jQuery选择器

1、基本选择器

$('#id属性值') -------------->document.getElementById()
$('tag标签名称')-------------->document.getElementsByTagName()
$('.class属性值')--------------> class属性选择器
$('*') --------------->通配符选择器
$('s1,s2,s3')------------------>联合选择器

2、层次选择器

$(s1 s2)   //[父子]  派生选择器：在s1内部获得全部s2的节点（不考虑层次）
$(s1 > s2)    //[父子]  直接子元素选择器：在s1内部获得子元素节点s2
$(s1+s2)    //[兄弟]  直接兄弟选择器：在s1后边获得紧挨着的第一个兄弟关系的s2节点
$(s1 ~ s2)    //[兄弟]  后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点

例子1：

$('div span');  //在div内部获得span节点,没有层次，子span全部获得
<div>
    <span></span>
    <p><span></span></p>
</div>

例子2：

$('div > span');  //在div内部获得span节点,有层次，仅获得一级子元素
<div>
    <span></span>
    <p><span></span></p> //获取不到这个
</div>

例子3：

$('div + span');  //获得后面第一个兄弟节点
<div>
    <span></span>
    <p><span></span></p> //获取不到这个
</div>
<span></span>//只能获取到这个
<span></span>//获取不到

例子4：

$('div ~ span');  //获得后面所有的span兄弟节点
<div>
    <span></span>
    <p><span></span></p> //获取不到这个
</div>
<span></span>//获取到
<span></span>//获取到

3、并且选择器

一：基本

:first    //第一个
:last    //第二个
$('li:first')    //li标记的第一个
$('li:last')    //li标记的最后一个

二：索引

//eq(下标索引值)
$('li:eq(3)')      //找到li标记的第三个

三：范围

//gt(索引号)   节点大于某个值，索引值从0开始
//lt(索引值)     节点小于某个值
$('li:gt(2)')     //索引值大于2的li标记
$('li:lt(4)')     //索引值小于4的li标记，不含4

四：even

//:even 匹配到下标节点数为偶数的节点
//:odd 匹配到下标节点数为奇数的节点
$('li:odd')
$('li:even')

五：除去某个节点

//:not(selector选择器) 除去某个节点
$('li:not('#yun')')    //除了id为yun的节点

六：header

//header 匹配h1,h2,h3,h4
$(':header')

3、并且选择器的复杂用法

1)并且选择器可以单独使用

2）各种选择器都可以构造“并且”关系

3）并且关系的选择器可以使用多个，每个选择器使用前，已经获得节点的下标要“归位”（归零）。

4）多个并且关系的选择器，没有前后顺序要求，但是要避免产生“歧义”。

3、内容过滤选择器

1）：contains(内容)

包含内容选择器，获得的节点内部必须包含指定的内容

$('div:contains(beijing)')
<div>I like <span>beijing</span></div> //标签不构成影响，符合条件
<div>xiaoming like shanghai</div> //没有beijing不符合

2）:empty

获得空元素（内部没有任何元素/文本（空））节点对象

$('div:empty')
<div>I like</div>
<div>      </div>
<div>hello</div>
<div><img></div>
<div></div> //符合条件，其他不符合

3）:has(选择器)

节点内部必须包含指定选择器对应的元素

$('div:has('#apple')');
<div><p></p></div>
<div><span id="apple"></span></div> //符合条件

4）:parent

寻找的节点必须作为父元素节点存在

$('div:parent')
<div></div>
<div>   </div>//符合
<div><input type="text"></div> //符合
<div>sun</div>//符合

4、表单域选中选择器

1）:checked

获得被选中的复选框checkbox、获得被选中的单选按钮radio

2）:selected

获得被选中的下拉列表项目option