반응형


* 메서드 체이닝

의미: "메서드를 연이어 적용한다"

하나의 메서드만을 사용하지 않고, 여러 메서드를 '연이어' 써서 적용할 수 있다.


간단한 이해를 위해서 메서드에 css를 적용했다.



↓ 출력화면




* 제이쿼리 필터 선택자(:)

"요소:checked" →체크한 요소를 선택자로 지정

"요소:odd" →홀수인 요소를 선택자로 지정

"요소:even" →짝수인 요소를 선택자로 지정

"요소:lt" →(less than)~보다 작은 것들을 선택자로 지정

"요소:gt" →(greater than)~보다 큰 것들을 선택자로 지정

"요소:focus" →커서가 위한 부분을 선택자로 지정

"요소:selected" →선택된 요소를 선택자로 지정

"요소:contains('문자열')" →특정 문자열을 포함하는 문서객체를 선택자로 지정

ex) $("li:contain('가나다')").메서드( );   →'가나다'를 포함하는 문서객체를 선택자로 지정

"요소:has('요소명')" →요소명을 선택자로 지정(여기서 요소명은 보통 태그명.)

ex) $(".class:has('h2')).메서드( );

"요소:not(선택자)" →ex) $("li:not(first)").메서드( )     :li중 첫 번째 것을 제외한 나머지를 선택자로 지정

"요소:eq(0)" →0번째(=first)

"요소:eq(1)" →1번째

"요소:eq(-1)" →마지막(=last)

"요소:eq(-2)" →마지막에서 2번째

"요소:nth-child(2n+1)" 인덱스와는 다르게 첫 번째 것이 '1'. 

즉 1,2,3,4,...순서로 진행. 

'0' 없음!



↓ 출력화면


반응형
반응형


* jQuery(제이쿼리)

HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리


기본 구조

$(document).ready(function(){ });

$(function(){ });



* jQuery(제이쿼리) 선택자 지정하기


ex1) 


↓ 출력화면



좀 더 자세한 예제.


ex2)


↓ 출력화면



* 제이쿼리 속성 선택자

"요소[속성='값']"  →해당 값을 갖고 있는 요소

"요소[속성$='값']" →해당 값으로 끝나는 요소

"요소[속성^='값']" →해당 값으로 시작되는 요소


 .val: html의 value값을 뜻한다. 



↓ 출력화면


→이어 제이쿼리 메서드 체이닝, 필터 선택자(checked,focus,selected,contains,nth-child 등) 예제 및 정리!!



반응형

+ Recent posts