html页面元素就一些html标签（元素），和对应的html元素属性组成，
属性包括id，class，获取css样式属性等，其中通过css样式属性获取jQuery，这里的css样式属性就可以称为jQuery的css选择器
另外jQuery还支持xpath选择，其实跟css差不多。
下面就这对各种常用的选择器怎么使用做个说明：
1、id选择器
如：页面上有这段代码：<body><div id='myDiv'></div></body>
如果我要获取<div id='myDiv'></div>这个页面元素，我可以这样：
var jqObj = $('#myDiv') ;
这样我就获取这个元素并返回jQuery对象，接下来我们就可以使用jQuery的函数操作这个jqObj,如
$('#myDiv').hide();
或者jqObj.hide();//hide函数是将id为myDiv的div元素隐藏起来，就变成了<div id='myDiv' style="display:none;"></div>
2、类选择器（html元素的class属性）
如页面上有这段代码：
<body><div><p class='pp'></p><p class='pp'></p><p class='pp'></p></div></body>
总共3个p元素。
$('.pp');：这样就获取到所有的p元素了。
在学习笔记（一）中曾经说，jQuery通过构造函数获取的jQuery对象是一个集合（网页html元素的集合），这个很重要。
现在$('.pp')就是一个html元素的集合，不过他是一个jQuery对象，要使用jQuery的api去操作。
如给所有的p元素加上一个类型class：
$('.pp').addClass('newClass');//这样操作就是对所有的元素都进行addClass操作
则变成了
<body><div><p class='pp newClass'></p><p class='pp newClass'></p><p class='pp newClass'></p></div></body>
很多时候我们要操作不是对所有的元素都进行addClass操作，如这对第一和第三个p元素进行addClass操作：
$('.pp').each(function(index,item){
if(1 != index){//第二个p元素不进行addClass操作
$(this).addClass('newClass');
}
});
3、元素（标签）选择器
<body><div><p class='pp'></p><p class='pp'></p><p class='pp'></p></div></body>
如：$('p')就选择了所有的p元素
4、缩小范围的选择器应用
如在实际应用中，我们只知道某个元素的id，class或者标签（这能确定这个元素）
那么我们就能通过这个慢慢缩小范围找到我们想要的元素：
<body>
<div id='div1'>
<ul>
<li>哈哈</li>
</ul>
</div>
<div id="div2">
<ul>
<li>嘻嘻</li>
<li>呜呜</li>
</ul>
</div>
</body>
如果我们需要获取到<li>嘻嘻</li>这个元素
我们就可以先定位到其父辈，然后由父辈往下搜索：
$('div#div2 ul li');这样就获取到所有的li元素：<li>嘻嘻</li><li>呜呜</li>
$('div#div2 ul li').eq(0);就获取到了<li>嘻嘻</li>
等同于$('div#div2 ul li:first');
等同于$('div#div2 ul li:eq(0)');
其中:first，:eq()是伪类选择器，而eq()方法是jQuery为实现伪类一样效果提供的方法
5、伪类选择器
1）通过构造函数获取的jQuery对象是一个集合（网页html元素的集合），对集合中的某个元素进行快速定位：
$("p:first"); 第一个 <p> 元素
$('p:last'); 最后一个<p> 元素
$('p:even'); 所有偶数的<p> 元素
$('p:odd'); 所有奇数的<p> 元素
$('p:eq(1)'); 第二个 <p> 元素，下标从0开始
$('p:gt(1)'); 下标大于1的所有 <p> 元素，下标从0开始
$('p:lt(1)'); 下标小于1的所有 <p> 元素，下标从0开始
$("p:not('class=newClass')"); 不包括class=‘newClass’的<p>元素
$('p:first-child'); 所有<p>元素的第一个子元素的集合
2)表单元素快速定位伪类选择器
$(':input'); 所有的<input>元素
$(':text'); 所有type="text"的<input>元素
$(':password'); 所有type="password"的<input>元素
$(':radio'); 所有type="radio的<input>元素
$(':checkbox'); 所有type=checkbox的<input>元素
$(':submit'); 所有type="submit'“的<input>元素
$(':reset'); 所有type="reset“的<input>元素
$(':buttom'); 所有type="buttom“的<input>元素
$(':image'); 所有type="image“的<input>元素
$(':file'); 所有type="file“的<input>元素
3)属性值伪类选择器
$('p[class]'); 所有带有class属性的<p>元素 如：<p class="newClass"></p>
$('p[class="newClass"]'); 所class属性值为newClass的<p>元素
$('p[class!="newClass"]'); 所class属性值不为newClass的<p>元素
$('p[class^="new"]'); 所class属性值以new开头的<p>元素
$('p[class$="new"]'); 所class属性值以new结尾的<p>元素
4)标识元素状态的伪类选择器
$('div:visible'); 所有可见的div元素
$('div:hidden'); 所有隐藏的div元素
$('a:enabled'); 所有可以使用的a元素
$('a:disabled'); 所有不可用的a元素
$('select'),find(':selected'); 所有已选中的下拉框select
$(':animated'); 所有所有动画元素
5)其他伪类选择器
$("contains('www')"); 包含文本www的所有元素
$(':header') 所有标题元素<h1>-<h6>
$(':empty'); 无子节点的元素
$("li:has('ul')").css('backgroup-color','red'); 子孙后代中有ui的li元素的集合
6、伪类方法（jQuery为实现伪类一样效果提供的方法）
1）empty() 从DOM中删除所有匹配元素的子节点
如$('p').empty(); 所有<p>元素的子节点都从DOM中删除
2）eq() 等效于伪类选择器:eq() 如$("li").eq(2).css('backgroud-color','red');
3) end() 看例子：$("li").eq(2).css('backgroud-color','red').end().eq(1).css('width','800');
等同于 $("li").eq(2).css('backgroud-color','red'); $("li").eq(1).css('width','800');
其中eq()有可能使用find(),filter()，not()过滤，缩小范围，然后通过end(),再返回大范围
补充：filter() 去除符合条件字符串的元素 如 $("li").filter(':even').css('backgroud-color','red');
even：偶数，就是去除下标为偶数的元素，也就是选择奇数的元素
find() 与filter()相反,筛选符合条件字符串的元素，$("li").find(':even').css('backgroud-color','red');
就是选择偶数元素
4）first() 如：$("li").first().css('backgroud-color','red');
5) $("li").has('ul').css('backgroup-color','red'); 子孙后代中有ui的li元素的集合
扫一扫
1812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
