jquery选择器

 

在页面上获得各种元素节点对象而使用的条件就是选择器。 

 

1、基本选择器

 

$(‘#id属性值’)  ----------->document.getElementById()

$(‘tag标签名称’)----------->document.getElementsByTagName();

$(‘.class属性值’) class属性值选择器

$(‘*’)     通配符选择器

$(‘s1,s2,s3’)联合选择器

 

 

5种基本选择器的使用：

 

 

2、层次选择器

2.1 $(s1  s2) [父子]

派生选择器：在s1内部获得全部的s2节点(不考虑层次)

$(“div  span”);  在div内部获得span节点

<div>

<span></span>

<p><span></span></p>

</div>

<span></span>

 

2.2 $(s1 > s2) [父子]

直接子元素选择器:  在s1内部获得子元素节点s2

$(‘div > span’);  //在div内部获得子元素span节点

<div>

<span></span>

<p><span></span></p>

<span></span>

</div>

<span></span>

 

2.3 $(s1 + s2) [兄弟]

直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点

$(‘div + span’)    //在div后边获得紧紧挨着的第一个兄弟关系的span节点

<div>

<span></span>

<p><span></span></p>

<span></span>

</div>

<span></span>

<span></span>

<div></div>

<span></span>

 

2.4 $(s1 ~ s2) [兄弟]

后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点

$(‘div ~ span)    //获得div后边全部兄弟关系的span节点

<div>

<span></span>

<p><span></span></p>

<span></span>

</div>

<span></span>

<span></span>

<div></div>

<span></span>

<p></p>

<span></span>

 

层次选择器的具体使用：

 

3.并且(过滤)选择器

 

 

 

3.1 基本用法

并且选择器的基本使用：

 

3.2 复杂用法

注意：
① 并且选择器可以单独使用
② 各种选择器都可以构造“并且”关系
③ 并且关系的选择器可以使用多个，每个选择器使用前，已经获得节点的下标要“归位”(归零)
④ 多个并且关系的选择器，没有前后顺序要求，但是要避免产生“歧义”

 

 

4. 内容过滤选择器