jQuery 속성선택자
요소[속성] | 특정 속성을 가지고 있는 문서 객체를 선택함 |
요소[속성=값] | 속성 안의 값이 특정 값과 같은 문서 객체를 선택함 |
| 요소[속성~=값] | 속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체를 선택함 |
요소[속성^=값] | 속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택함 |
| 요소[속성$=값] | 속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택함 |
요소[속성*=값] | 속성 안의 값이 특정 값을 포함하는 문서 객체를 선택함 |
사용 예)
$('input[type=text]').val("텍스트 값추가");
1. jQuery 기본 필터 선택자
| 요소:odd | 홀수 번째에 위치한 문서 객체르 선택함 |
요소:even | 짝수 번째에 위치한 문서 객체를 선택함 |
| 요소:first | 첫 번째 위치한 문서 객체를 선택함 |
| 요소:last | 마지막에 위치한 문서 객체를 선택함 |
사용 예)
| 과일명 | 당도 |
|---|---|
| 사과 | 2 |
| 딸기 | 3 |
| 수박 | 4 |
| 멜론 | 2 |
$('tr:odd').css('background', '#F9F9F9');
$('tr:event').css('background', '#9F9F9F');
$('tr:first').css('background', '#333333').css('color','#FFFFFF'); // 배경색 / 글자색
2. jQuery 입력 양식 필터 선택자
요소:button | input 태그중 type 속성이 button인 문서 객체와 button 태그를 선택함 |
요소:checkbox | input 태그중 type 속성이 check인 문서 객체를 선택 |
요소:file | input 태그중 type 속성이 file인 문서 객체를 선택 |
| 요소:image | input 태그중 type 속성이 image인 문서 객체를 선택 |
| 요소:password | input 태그중 type 속성이 password인 문서 객체를 선택 |
| 요소:radio | input 태그중 type 속성이 radio인 문서 객체를 선택 |
| 요소:reset | input 태그중 type 속성이 reset인 문서 객체를 선택 |
| 요소:submit | input 태그중 type 속성이 submit인 문서 객체를 선택 |
요소:text | input 태그중 type 속성이 text인 문서 객체를 선택 |
요소:checked | 체크된 입력 양식을 선택함 |
| 요소:disabled | 비활성화된 입력 양식을 선택함 |
| 요소:enabled | 활성화된 입력 양식을 선택함 |
요소:focus | 초점이 맞춰져 있는 입력 양식을 선택함 |
요소:input | 모든 입력 양식을 선택함(input , textarea , select , button 태그) |
| 요소:selected | option 객체 중 선택된 태그를 선택함 |
사용 예) $("부모태그">"자식태그")
$('select > option:selected').val(); // select 로 선택된 값이 찾기
3. jQuery 함수 필터 선택자
요소:contains(문자열) | 특정 문자열을 포함하는 문서 객체를 선택함 |
요소:eq(n) | n번째에 위치하는 문서 객체를 선택함 |
| 요소:gt(n) | n번째 초과에 위치하는 문서 객체를 선택함 |
요소:has(h1) | h1 태그를 가지고 있는 문서 객체를 선택 |
요소:lt(n) | n번째 미만에 위치하는 문서 객체를 선택 |
요소:not(선택자) | 선택자와 일찌하지 않는 문서 객체를 선택함 |
요소:nth-child(3n+1) | 3n+1번째에 위치하는 문서 책체를 선택함 |
사용 예)
| 과일명 | 당도 |
|---|---|
| 사과 | 2 |
| 딸기 | 3 |
| 수박 | 4 |
| 멜론 | 2 |
$('tr:eq(0)').css('background', '#000000').css('color', 'White');
$('td:nth-child(3n)').css('background', '#454545');
$('td:nth-child(3n+1)').css('background', '#333333').css('color','#FFFFFF'); // 배경색 / 글자색
jQuery 배열
$.each(array , function(index,item){ }) ; | (배열 , 함수(배열인덱스, 배열 인덱스 값)) // 함수를 배열겟수만큼 반복실행 |
$(selector).each(array , function(index,item){ }) ; | 선택한 속성.each(배열 , 함수(배열인덱스, 배열 인덱스 값)) // 함수를 배열겟수만큼 반복실행 |
jQuery 메서드 (문서 객체 다루기)
addClass() | 문서 객체의 클래스 속성을 추가 함. => $('선택').addClass('정의한 클래스이름'); |
removeClass() | 문서 객체의 클래스 속성을 제거 함. => $('선택').removeClass ('삭제할 클래스이름'); |
| arrt() | 속성과 관련되 모든 기능을 수행함. 1. 이미지태그의 경로 속성값 알아내기 => $('img').attr('src'); 2. 속성 값추가 => $(selector).attr(속성이름 , 속성값); => $(selector).attr(속성이름 , function( 속성각각의 index값 ,attr ){} ); => $(selector).attr(object); => $(' => $(' |
removeAttr(name) | 문서 객체의 속성을 제거 함. |
css() | 스타일과 관련된 모든 기능 수행 1. 스타일 속성값 가져오기 => $('h1').css('color') // h1 태그의 색상값 2. 속성 값 추가 => $(selector).css(name , value); => $(selector).css(name , function(속성 각각의 index값 ,style){} ); => $(selector).css(object); |
html() | 문서 객체 내부의 글자와 관련된 모든 기능을 수행함 (html 태그인식) 1. 값 가져오기 => $('h1').html(); // 맨처음 h1 태그 값만 출력 2. 값 추가 => $(selector).html(value); => $('div').html(' 내용'); // 태그인식 |
| text() | 문서 객체 내부의 글자와 관련된 모든 기능을 수행함 1. 값 가져오기 2. 값 추가 => $(selector). text (value); => $('div'). text (' 내용'); // 정규표현식 으로 표현 |
remove() | 특정 문서 객체를 제거. => $('h1').first().remove(); // 첫번쩨 h1 삭제 |
| empty() | 특정 문서 객체의 후손을 모두 제거 함. => $('div').empty(); // div 자식 객체까지 삭제 |
| $() | 문서 객체를 생성함 => $(' ');=> $(' ').html('내용');=> $(' ').html('내용').addendTo('body'); // 태그와 내용을 body 에추가 |
$(a).appendTo(b) | a를 b의 뒷 부분에 추가함. (태그안) => $('img').first().appendTo('body'); // 첫번째이미지를 body 안 맨뒤로 보냄 |
| $(a).prependTo(b) | a를 b의 앞 부분에 추가함. (태그안) |
$(a).insertAfter(b) | a를 b의 뒷에 추가함. (태그 밖) |
| $(a).insertBefore(b) | a를 b의 앞에 추가함. (태그 밖) |
| $(a).append(b) | b를 a안의 뒷 부분에 추가함. |
$(a).prepend (b) | b를 a안의 앞 부분에 추가함. |
$(a).after(b) | b를 a의 뒷에 추가함. |
| $(a).before(b) | b를 a의 앞에 추가함. |
| clone() | 문서 객체를 복사 $('div').append( $(h1) ).clone()); // h1 태그를 div 태그안으로 복재 |
jQuery 이벤트
이벤트 객체속성
event.pageX | 브라우저의 화면을 기준으로 한 마우스의 X좌표 위치 |
event.pageY | 브라우저의 화면을 기중으로 한 마우스의 Y좌표 위치 |
event.preventDefault() | 기본 이벤트를 제거함 |
event.stopPropagation() | 이벤트 전달을 제거함 |
이벤트 메소드
| $(document).ready() | html 문서가 다불러와지면 실행 |
| bind() | 이벤트를 연결함 => $(selector).bind(object); |
unbind() | bind() 메서드를 사용한 이벤트 연결 제거 => $(selector).unbind(); => $(selector).unbind(eventName); => $(selector).unbind(eventName, function); |
delegate() | 현재 또는 미래에 존재하는 문서 객체에 이벤트를 연경함 (version:1.4.3*) |
undelegate() | delegate() 메서드를 사용해 연결한 이벤트를 제거함 (version:1.4.3*) |
| live() | 현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결함 |
die() | live() 메서드를 사용해 연결한 이벤트를 제거함 => $(selector).die(eventName , function) |
| one() | 이벤트를 한번만 연결함 |
on() | 이벤트를 연결함, 아래 이벤트열결을 대체함 ( delegate 대체함 version:1.7 ) => bind() : $(selector).on(eventName , eventHandler) => live() : $(document).on(eventName , selector, eventHandler) => delegate() : $(selector).on(eventName , selector , eventHandler) |
| off() | 이벤트를 제거함 => die() : $(document).off(eventName , selector[, eventHandler]) => undelegate() : $(selector).off(eventName , selector[, eventHandler]) |
toggle(function(event){}, ... , function(event){} ) | click 이벤트를 여러 이벤트 핸들러를 번갈아가며 실행할 수있게 연결함 |
hover(mouseenter , mouseleave) | mouseenter 이벤트와 mouseleave 이벤트를 동시에 연결함 |
trigger() | 이벤트를 강제 발생 => $(selector).trigger(eventName, data) |
마우스 이벤트
click | 마우스를 클릭할 때 발생함. |
| dblclick | 마우스를 더블클릭할 때 발생함. |
| mousedown | 마우스 버튼을 누를 때 발생함. |
| mouseup | 마우스 버튼을 뗄 때 발생함. |
| mouseenter | 마우스 요소의 경계 외부에서 내부로 이동할 때 발생. (자기자신만 이벤트) |
| mouseleave | 마우스 요소의 경계 내부에서 외부로 이동할 때 발생. (자기자신만 이벤트) |
mousemove | 마우스를 움직일 때 발생함. |
| mouseout | 마우스가 요소를 벗어날 때 발생함. (버블링) |
mouseover | 마우스를 요소 안에 들어올 때 발생함.(버블링) |
키보드 이벤트
| keydown | 키보드가 눌러질 때 발생함. |
| keypress | 글자가 입력될 때 발생함. |
keyup | 키보드가 떼어질 때 발생함. |
윈도우 이벤트
ready | 문서 객체가 준비를 완료함. |
| load | 윈도우(문서 객체)를 불러들일 때 발생함. |
| unload | 윈도우(문서 객체)를 닫을 때 발생함. |
| resize | 윈도우의 크기를 변화시킬 때 발생함. |
| scroll | 윈도우를 스크롤할 때 발생함. |
| error | 에러가 있을 때 발생함. |
입력 양식 이벤트
| change | 입력 양식의 내용을 변경할 때 발생함. |
focus | 입력 양식에 초점을 맞추면 발생함. |
| focunsin | 입력 양식에 초점이 맞춰지기 바로 전에 발생함. |
| focusout | 입력 양식에 초점이 사라지기 바로 전에 발생함. |
| blur | 입력 양식에 초점이 사라지면 발생함. |
| select | 입력 양식을 선택할 때 발생함(input[type=text] 태그와 textarea 태그 제외). |
| submit | submit 버튼을 누르면 발생함. |
| reset | reset 버튼을 누르면 발생함. |
간단한 이벤트 종류
| blur | focus | focusin | focusout | load |
| resize | scroll | unload | click | dblclick |
| mousedown | mouseup | mousemove | mouseover | mouseout |
| mouseenter | mouseleave | change | select | submit |
| keydown | keypress | keyup | error | ready |
$(select).methodName(function(event){ });
jQuery effects
메서드
| show() | 문서 객체를 크게 하며 보여줌. |
| hide() | 문서 객체를 작게 하며 사라지게 함. |
| toggle() | show() 메서드와 hide() 메서드를 번갈아 실행함. |
slideDown() | 문서 객체를 슬라이드 효과와 함께 보여줌. |
slideUp() | 문서 객체를 슬라이드 효과와 함께 사라지게 함. |
slideToggle() | slideDown() 메서드와 slideUp() 메서드를 번갈아 실행함. |
fadeln() | 문서 객체를 선명하게 하며 보여줌. |
| fadeout() | 문서 객체를 흐리게 하며 사라지게 함. |
| fadeToggle() | fadeln() 메서드와 fadeOut() 메서드를 번갈아 실행함. |
| animate() | 사용자 지정 효과를 생성함. ( opacity , height , width , top , bottom , left , right , margin , padding ) => $(selector).animate(object , speed); => $(selector).animate(object , speed , easing); => $(selector).animate(object , speed , easing , callback); |
clearQueue() | 큐의 내용을 제거 함. |
stop() | 효과와 애니메이션을 정지함. => $(selector).stop() => $(selector).stop(clearQueue) => $(selector).stop(clearQueue , goToEnd) |
| delay() | 큐에 있는 명령을 잠시 중지함. => $(this).delay(500).animate({ left:500 }, 'slow' ) |
1. $(selector).method();
2. $(selector).method(speed); // 밀리초 단위의 숫자나 문자열 ( slow, normal , fast )
3. $(selector).method(speed , callback); // callback 효과를 모두 완료한 후에 실행할 함수를 지정
4. $(selector).method(speed , easing , callback);// 기본(linear , swing ) , easing플러그인 설치.
출처 : http://turfrain.tistory.com/40 작성자 : turfrain