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. 内容过滤选择器