Jquery 선택기 기본 과정 예제에 대한 자세한 설명

Jquery의 선택기는 XPath2.0 및 CSS1-3의 구문을 차용하여 매우 훌륭하며 여러 브라우저와 호환되므로 원래 매우 복잡했던 DOM을 갑자기 더 단순하게 만듭니다. 최신 버전은 1.2.2b입니다. 아래의 모든 예는 다음과 같습니다. 이 버전을 기반으로 제공되는 예제도 있습니다.

테스트 HTML 코드:

<div id="father">
   <div id="first">I am first</div>
   <div id="second" class="red">I am second</div>
   <div id="third" style="display:none">I am third</div>
</div>
<p class="red">I am forth</p>
<h4></h4>

기본:

#id: object의 id 속성을 기반으로 개체를 가져옵니다. ㅋㅋㅋ

//내가 먼저 보여줘 element: 특정 HTML 태그alert($('p'
))과 일치하는 모든 개체입니다.

길이

) ;

//4.class 표시: 클래스 속성을 기반으로 객체 가져오기alert($('.red ' )
.length

)

;

//Display 2*: 모든 개체 가져오기alert($ ( '* ')
.length

)

;

//객체의 합계를 HTML로 표시하지만 결과는 브라우저에 따라 다릅니다selector1, selector2, selectorN : 중복 항목을 제거하지 않고 여러 선택기 모음을 가져옵니다. alert($('.red, #second,p')
.length

)

;

//디스플레이 4 레벨 선택기: ancestorDescendant: 이 선택기는 공간입니다. 즉, 먼저 첫 번째 선택기의 모든 개체를 찾은 다음 하위 노드 개체에서 두 번째 선택기와 일치하는 모든 개체를 찾는다는 의미입니다. alert($('#father .red
')

.

html

())

;

//나를 보여주세요 secondparent > child: 이 선택자는 보다 큼 기호입니다. 즉, 먼저 첫 번째 선택자의 모든 개체를 찾은 다음 하위 노드에서 두 번째 선택 항목과 일치하는 모든 개체를 찾습니다. 노드) 기호 객체.

alert($('#father > .red').html());
//쇼 I am second

prev + next: 이 선택자는 더하기 기호입니다. 이는 먼저 첫 번째 선택자의 모든 개체를 찾은 다음 동일한 수준에 있고 두 번째 선택 기호를 충족하는 다음 노드를 찾는다는 의미입니다. 물체.

alert($('#father + .red').html());
//쇼 I am four

prev ~ siblings: 이 선택자는 ~ 기호입니다. 이는 먼저 첫 번째 선택자의 모든 객체를 찾은 다음 두 번째 선택자와도 일치하는 동일한 수준의 모든 후속 노드에서 객체를 찾는 것을 의미합니다. .

alert($('#첫 번째 ~ #third').html());
//쇼 I am third

기본 필터:

:first: 여러 개체 중에서 첫 번째 개체 일치
:last: 여러 개체 중에서 마지막 개체 일치

alert( $( '.red:first').html());
//내가 2위임을 표시
alert ($ ㅋㅋㅋ . html());//Show I am before:even: 모든 개체의 짝수 일치 :odd
: 모든 개체의 짝수 일치 홀수

alert($('p:even').length);
//显示2
alert($('p:odd').length);
//显示2

:eq(index)：匹配某一下表的单独某元素

alert($('p:eq(2)').html());
//显示I am second

:gt(index)：匹配大于某一下标的所有元素
:lt(index)：匹配小于某一下标的所有元素

alert($('p:gt(1)').length);
//显示2
alert($('p:lt(2)').length);
//显示2

:header：匹配所有的header元素，例如h1,h2,h3,h4,h5,h6

alert($(':header').length);
//显示1

:animated：匹配所有有动画效果的元素

function animateIt()
{
   $("#second").slideToggle("slow", animateIt);
}
animateIt();
alert($(':animated').html());
//显示I am second

文本过滤符：

:contains(text)：匹配内部拥有该文本元素的对象，包含间接有用的情况

alert($('p:contains("first")').length);
//显示2

:empty：匹配所有没有子元素的对象

alert($(':header:empty').length);
//显示1

:has(selector)：匹配所有至少含有一个子选择符的对象

alert($('p:has("#third")').attr('id'));
//显示father

:parent：匹配所有的父对象，父对象包含那些只含有文本的对象

alert($('p:parent').length);
//显示4

可见性过滤符：

:hidden：匹配所有隐藏对象，或者input中的hidden类型
:visible：匹配所有可见的对象

alert($('p:hidden').length);
//显示1
alert($('p:visible').length);
//显示3

属性过滤符：

[attribute]：匹配拥有某一属性的所有对象
[attribute=value]：匹配拥有某一属性和值的对象
[attribute!=value]：匹配拥有某一属性，且不是某一值的对象
[attribute^=value]：匹配拥有某一属性，且以某一值开头的对象
[attribute$=value]：匹配拥有某一属性，且以某一值结尾的对象
[attribute*=value]：匹配拥有某一属性，且包含某一值的对象

alert($('p[class]').html());
//显示I am second
alert($('p[class=red]').html());
//显示I am second
alert($('p[id!=father]').length);
//显示3
alert($('p[id^=f]').length);
//显示2
alert($('p[id$=d]').length);
//显示2
alert($('p[id*=ir]').length);
//显示2

[selector1][selector2][selectorN]：匹配同时符合多个属性选择符的对象

alert($('p[id=second][class^=r]').length);
//显示I am second

子过滤符：

:nth-child(index/even/odd/equation)：匹配子元素中的某一下标/偶数/奇数/等式的对象，:eq(index)只能匹配某单一对象的子元素特征，而这个方法可以匹配多个对象的某一子元素共同特征

alert($('#father p:nth-child(1)').html());
//显示I am first
alert($('#father p:nth-child(even)').length);
//显示1
alert($('#father p:nth-child(odd)').length);
//显示2
alert($('#father p:nth-child(3n)').length);
//显示1，其实是每3个一匹配

:first-child：匹配第一个子元素
:last-child：匹配最后一个子元素
这两个匹配符也可以对多个父对象的所有子元素进行匹配操作

alert($('#father p:first-child').html());
//显示I am first
alert($('#father p:last-child').html());
//显示I am third

:only-child：如果一个父元素只有一个子元素，就匹配这个子元素

alert($('p:only-child').length);
//显示0

위 내용은 Jquery 선택기 기본 과정 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!