-요약설명

• A > B : 자손 선택자 - A태그의 자식인 모든 B태그를 선택합니다.
• A  B : 하위 선택자 - A태그의 자손인 모든 B태그를 선택합니다.
• A + B : 인접 형제 선택자 - A요소로 바로 뒤의 B요소를 선택합니다. A와 B사이에 다른 요소가 있으면 선택되지 않습니다.
• A ~ B : 일반 형제 선택자 - A태그 뒤의 모든 B 요소를 선택합니다. 형제, 자식까지 포함이며 A태그의 앞에있거나 부모태그는 선택되지 않습니다.

-심화설명

 · A > B 요소

태그들이 포함 관계를 가질 때 포함하는 요소를 부모 요소, 포함 되는 요소를 자식요소라고 합니다. 부모 요소로 A 선택자를 잡앗을때 모든 B태그는 하위 서택자가 됩니다. 하지만 " > "의 경우 부모의 바로 아래 즉 직계자식요소에만 적용됩니다. 예제와 같이 자식의 자식들을 많이 만들어 놓았는데 빨간색 border가 적용된건 직계 자식들만 적용되었고 자손?이라는 글씨 등 직계자식이 아닌 요소들은 빨간색 보더가 생성되지 않은 부분을 확인할 수 있습니다.

예제

결과

 ·  A  B 요소

A > B 선택자와 다르게 A (띄어쓰기) B 선택자는 A의 부모요소의 모든 B 요소를 선택하는 것입니다. 아래 예제에서 보면 위의 예제에서완 다르게 <style>태그 안에서 .A div로 선택 된걸 확인 할 수 있으며, 결과에서 보시면 모든 div에 빨간색 박스가 생성된걸 확인 할 수 있습니다 . 아래 I클래스와 J클래스는 A부모요소의 자식이 아니기 때문에 빨간색 박스가 가지 않은 부분을 확인할 수 있습니다.

예제

결과

 · A + B 요소

같은 부모 요소를 가지는 요소들을 형제의 관계라고 부릅니다. 이 때 먼저나오는 요소를 형 요소 나중에 나오는 요소를 동생 요소라고 하는데 HTML태그상 위에 있는것을 말합니다. A + B요소는 인접 형제 선택자라고 부르며 형요소를 바로 뒤따르는 동생요소를 선택할 때 사용합니다.  아래 예제에서 보면 알 수 있듯이 B클래스 다음 바로 C클래스가 나올시 C클래스를 선택하는 것입니다. 만약 .C+div를 했다면 D클래스만 선택 되었을 것입니다. 또한 예제2 에서 보면 B와 D를 + 셀렉터로 연계 시켰으나 중간에 .C의 요소가 있어 아무것도 적용되지 않은 것을 확인 할 수 있습니다. ※예제에서는 B클래스와 C클래스를 사용하였습니다. A, B 요소는 예시로 둔 변수 입니다.

예제1

결과

예제2

결과

 · A ~ B

A ~ B 의 요소는 일반 형제 선택자라고 부르며, A 를 뒤따르는 형제요소들을 선택하는 것입니다. 아래 예제에서 보면 .C를 선택하고 ~ div를 셀렉터로 두었습니다 결과는 B는 포함이 되지 않고 C 를 뒤따르는 D, E, F 클래스가 선택되었습니다. G의 경우는 color가 상속되었지만 포함이 되진 않은 경우입니다.

예제

결과

요약설명

• * : 모든 엘리먼트를 컨텍트 한다.
• .class : 해당 클래스명을 가진 엘리먼트를 컨텍트 한다.
• element : 엘리먼트 요소를 컨텍트 한다.
• #id : 아이디값을 가진 엘리먼트 요소를 컨택트 한다.
• selector1, selectorN... : 2개이상의 엘리먼트 요소를 컨택트 한다.

심화설명

* 요소 / 사용법 $('*').css('color','red');

$("*") 이렇게 사용하며, 모든 엘리먼트가 컨택트 됩니다.

예제1.

결과.

.class 요소 / 사용법 $(".class").css("color","red");

$(".class")이렇게 사용하며, 해당 class를 가진 엘리먼트가 컨택트 됩니다.

ABC클래스를 가진 모든 엘리먼트를 선택합니다.

예제2.

결과

element 요소 / 사용법 $("ul li p").css("color","red");

$("element")이렇게 사용하며 css와 동일한 방식으로 선택자를 선택하여 사용합니다.

ul 안의 li 안의 모든 p 를 가르키는 상황입니다.

예제3.

결과

#id 요소 / 사용법 $("#id").css("color","red");

$("id")이런식으로 사용하며 id 값을 가진 엘리먼트를 컨택트합니다.

wow라는 id값을 갖고있는 엘리먼트를 컨택트합니다.

예제4.

결과

다중 선택자 요소  / 사용법 $("요쇼", "요소")

" , " 콤마를 사용함으로써 여러개의 엘리먼트를 선택하여 사용합니다.

id값이 wow인 엘리먼트와 클래스명이 ABC인 엘리먼트 태그요소들을 선택합니다.

예제5.

결과

jQuery는 클라이언트 측 HTML을 스크립팅하기 위해 간소화한 크로스 플랫폼 자바스크립트 라이브러리입니다. jQuery는 오늘날 가장 인기 있는 자바스크립트 라이브러리입니다. 웹 상에서 가장 트래픽이 많은 상위 천만 개의 사이트중 65%에서 사용 중입니다. jQuery는 MIT 라이선스로 배포되는 무료 오픈소스 소프트웨어입니다.

jQuery는 빠르고, 작고, 기능이 풍부한 자바스크립트 라이브러리입니다.

jQuery는 여러 브라우저에서 동작하는 사용하기 쉬운 API를 통해 HTML문서 탐색과 조작, 이벤트 처리, 애니메이션, Ajax 등을 훨씬 더 간단하게 만들어 줍니다. 다양성과 확장성을 겸비한 jQuery는 수백만 명이 자바스크립트 코드를 작성하는 방식을 바꿨습니다.