차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- study:php:jquery_셀렉터 [2011/08/11 04:50]
kamajaki0601 새로 만듦
+++ study:php:jquery_셀렉터 [2011/08/11 17:01] (현재)
kamajaki0601
@@ 줄 2: / 줄 2: @@
 jQuery의 가장 강력한 부분은 HTML DOM을 마음대로 트래버스 즉, 순회 탐색할 수 있다는 것이다. \\
 CSS 셀렉터를 사용하여 원하는 개체를 탐색할 수 있다.
+**다음과 같이 css 파일에서 사용했던 표현식이 바로 CSS 셀렉터
+**
+<code css>
+div p {
+    font-color:red;
+}
+#loginID {
+    font-weight:bold;
+    background:yellow;
+}
+.Columns {
+    padding:10px;
+    background:white;
+}
+</code>
+div p라는 셀렉터는 현재 문서 상에서 div 요소의 자식으로 존재하는 모든 p 요소들에 적용되며, \\
+#loginID는 loginID라는 id 값을 가진 요소에, .Columns는 class 어트리뷰트 값으로 Columns를 갖는 모든 요소에 적용
+이러한 셀렉터를 그대로 jQuery에서 사용가능 \\
+jQuery에서는 원하는 DOM 요소의 그룹을 찾기 위해서 $(selector) 혹은 jQuery(selector)과 같은 표현식을 사용하기에, \\
+위의 3가지 셀렉터를 다음과 같이 사용할 수 있다.
+<code css>
+$("div p") 혹은 jQuery("div p")
+$("#loginID") 혹은 jQuery("#loginID")
+$(".Columns") 혹은 jQuery(".Columns")
+</code>
+또한, jQuery는 이러한 기본적인 CSS 셀렉터 외에 고급 CSS 셀렉터도 지원한다. \\
+  * 계층 셀렉터
+  * 일반 필터 셀렉터
+  * 어트리뷰트 필터 셀렉터 등
+**계층 셀렉터 예**
+<code>
+p > a : p 요소 바로 아래 자식인 a 요소(하이퍼링크)와 일치된다.
+div + p : div 요소의 바로 다음에 나오는 형제 p 요소와 일치된다.
+div ~ p : div 요소의 다음에 나오는 모든 형제 p 요소와 일치된다.
+</code>
+$("p a")와 $("p > a")의 차이점은 전자가 p요소 하위에 존재하는 모든 a 요소를 선택한다면, \\
+후자는 p 요소 바로 아래의 자식으로 놓여있는 a 요소만을 선택한다는 것이 차이이다.
+즉, 다음과 같은 html이 존재한다면,
+<code html>
+<p>
+    <span>
+        <a href="1.aspx">1.aspx</a>
+    </span>
+    <br />
+    <a href="2.aspx">2.aspx</a>
+</p>
+</code>
+$("p a")는 1.aspx 링크와 2.aspx 링크 모두를 선택하지만, $("p > a")는 2.aspx 링크만을 선택한다는 것 \\
+다음과 같은 html 있다고 가정할 경우에, div + p 및 div ~ p오 ㅏ같은 경우는 자식이 아니라 형제 요소와 연관이 있다. \\
+<code html>
+<div>앨범 목록</div>
+<p>노라조</p>
+<span>수퍼맨</span>
+<p>이적</p>
+<span>다행이다</span>
+<p>현진영</p>
+<span>Break me down</span>
+</code>
+$("div + p")는 div 바로 다음에 나오는 형제 수준의 p 요소, 즉, "노라조"를 선택하게 되는 반면, \\
+$("div ~ p")는 div 요소 다음에 나오는 형제 요소들 중 모든 p 요소, 즉, "노라조", "이적", "현진영"과 일치된다. \\ \\
+더불어, a[title]이나 a[href^="mailto:"]와 같이 어트리뷰트를 기반으로 하는 필터링도 가능하다. \\
+특정 어트리뷰트가 존재하거나, 그 어트리뷰트 값이 특정 값으로 시작 혹은 끝나거나, 특정 값을 포함하거나 하는 부분까지 비교해서 선택할 수 있다. \\
+**다음은 이러한 어트리뷰트 필러의 예**
+<code>
+a[title] : title 어트리뷰트를 갖는 하이퍼 링크와 일치된다.
+a[href^="mailto:"] : href 값이 mailto로 시작하는 하이퍼 링크와 일치된다.
+a[href$=".pdf"] : pdf 파일에 링크가 걸린 모든 하이퍼링크와 일치된다.
+a[href*="taeyo.net"] : taeyo.net이라는 값이 포함되어 있는 모든 하이퍼 링크와 일치된다.
+input[type="text"] : text 형식의 입력 컨트롤과 일치된다.
+</code>
+이러한 선택이 가능한 것은 시작부분(^) 혹은 끝부분($)을 가리키는 정규 표현식을 jQuery가 지원하기 때문이다. \\
+**출처 : http://www.taeyo.pe.kr/Columns/View.aspx?SEQ=354&PSEQ=29&IDX=0**

adminschool.net wiki

사용자 도구

사이트 도구

차이

문서 도구