18. eq() / qt() / lt() / not() 1234$('p:gt(2)').css("background-color", "brown"); // n보다 큰 index 태그들$('p:eq(2)').css("background-color", "yellow"); // 해당 index값$('p:lt(2)').css("background-color", "red"); // n보다 작은 index $('p:not(.intro)').css("background-color", "yellow"); // 선택자에 해당되는것 제외하고 적용cs :eq(index) - 해당 index값에 요소 적용 :qt(index) - 해당 index값보다 큰 인덱스에 요소 적용 :lt(index) - 해당 index값보다 작은 인덱스..

13. '~' 1$('div ~ p').css('background-color', 'yellow');cs 전자 조전이 시작 하는 데부터 후자 조건까지의 모든 해당 요소를 반환.(형제레벨) ex) div 이후에 위치하고, 형제관계에 있는 모든 p 요소 선택 14. 공백 1$('div p').css('background-color', 'yellow');cs 상위 요소 내에 포함된 하위 요소들을 선택. ex) div내에 위치한 모든 p 요소 선택 15. '+' 1$('div + p').css('background-color', 'yellow');cs 기준 요소 바로 다음에 위치한 요소들을 선택. ex) div 바로 다음에 위치한 p 태그 선택 16. '>' 1$('div>span').css('backgroun..

:even / :odd :only-child / :only-of-type 11. :even :odd 12$('tr:even').css("background-color", "#efefef");$('tr:odd').css("background-color", "gray");cs :even - 0, 2, 4, 6, 8... 인덱스 값이 짝수인 것만 가져오는 선택자이다. :odd - 1, 3, 5, 7, 9.. :even과 반대로 인덱스 값이 홀 수 인것만 가져오는 선택자이다. 12. :only-child / :only-of-type 12$('p:only-child').css("background-color","yellow");$('p:only-of-type').css("background-color","yell..

:nth-child / :nth-of-type :nth-last-child / :nth-last-of-type 9. nth-child(n) / nth-last-child(n) 1$('p:nth-child(1)').css("background-color", "red");cs 1$('p:nth-last-child(1)').css("background-color", "red");cs index번호(n)는 1부터 시작한다. nth-child(n) :부모를 가지고 있는 자식이면서, 부모의 n번째 위치에 있는 것을 가져온다. nth-last-child(n) : 부모의 마지막 자식부터 n만큼의 자식 요소에만 속성을 적용한다. 10. nth-of-type(n) / nth-last-of-type(n) 12$('p:nth..

last / last-child / last-of-type :first / :first-child / :first-of-type / :last / :last-child / :last-of-type을 통하여 비교적 더 자신이 원하는 요소를 가져올 수 있다. 선택자 이후의 코드 설명은 간단한 코드이기에 생략하겠다. 6. first / last 1$('p:first').css('background-color','red');cs (E):first/last document의 요소 중에 첫번째(마지막) E 유형을 찾는다. 7. first-child / last-child 1$('p:first-child').css('background-color','red');cs (E):first-child / last-child..

기존에 사용하였던 자바스크립트에서는 getElementsByTagName getElementsByClassName getElementById 등... 우리가 선언한 요소들을 가져오기에는 너무나도 번거로웠다. jQuery가 사랑받는 이유는, 번잡한 자바스크립트 소스를 절반 이상 줄일 수 있기 때문이다. 1. * 다른 언어에서도 *은 대부분 전체,모두를 뜻한다. 대표적으로는 DBMS 언어들이 그렇다. 역시 동일하다 1$("*").css("border","solid 1px red");cs document의 모든 요소를 선택자로 사용한다. 모든 요소에 border:solid 1px red; 을 선언하는 것과 같다. 2. #(아이디) 자바스크립트에서의 getElementById와 동일하다. 1$("#jquery"..

jquery의 핵심은 바로 선택자이다. 주로 사용되는 선택자들이니 꼭암기하여야 한다. 이 글에서는 먼저 종류들을 나열하고 조금씩 다음글을 통해 개념을 설명하도록 하겠다. 1. * 2. #id 3. element 4. element, element, element.. 5. .class, .class, .class 6. .class.class 선택자 의미 .intro.member* 7. :first :first-child :first-of-type* 8. :last :last-child :last-of-type* 9. :even :odd 10. :nth-child(n|even|odd|an+b) :nth-of-type(n) * 11. :nth-last-child(n) :nth-last-of-type(n)* 1..

jQuery 란? 모든 브라우저에서 동작하는 클라이언트 "자바스크립트 라이브러리" 라이브러리란? 편리(보다 빠르게, 더 쉽게, 기능이 풍부)하게 사용할 수 있는 객체, 함수 등의 집합 jQuery : ㄱ. html / DOM 조작 ㄴ. CSS 조작 ㄷ. HTML 이벤트 처리 ㄹ. 효과 / 애니메이션 ㅁ. ajax 처리 jQuery 사용하는 방법 : ㄱ. jQuery.com 에서 jQuery라이브러리 다운로드ㄴ.CDN(Content Delivery Network) 호스팅 사용하는 방법 js파일 다운로드 링크 : http://jquery.com/download/ uncompressed -> 디버깅용compressed -> 성능향상용 window.jQuery / $ 최상위 객체 var $ = jQuery; w..