jQuery基本选择器、进阶选择器、高级选择器
（1）基本选择器
元素选择器、ID选择器、类选择器
$('div').css('color','red');//元素选择器，返回多个元素
$('#box').css('color','red');//ID选择器，返回单个元素
$('.box').css('color','red');//类(class)选择器，返回多个元素为了证明ID返回的是单个元素，而元素标签名和类(class)返回的是多个，我们可以采用jQuery核心自带的一个属性length或size()方法来查看返回的元素个数。
jQuery选择器支持CSS1、CSS2的全部规则，支持CSS3部分实用的规则，同时它还有少量独有的规则。所以，对于已经掌握CSS的开发人员，学习jQuery选择器几乎是零成本。而jQuery选择器在获取节点对象的时候不但简单，还内置了容错功能，这样避免像JavaScript那样每次对节点的获取需要进行有效判断。
$('#pox').css('color','red');//不存在ID为pox的元素，也不报错
document.getElementById('pox').style.color='red';//报错了因为jQuery内部进行了判断，而原生的DOM节点获取方法并没有进行判断，所以导致了一个错误，原生方法可以这么判断解决这个问题：
if(document.getElementById('pox')){//先判断是否存在这个对象
document.getElementById('pox').style.color='red';
}那么对于缺失不存在的元素，我们使用jQuery调用的话，怎么去判断是否存在呢？因为本身返回的是jQuery对象，可能会导致不存在元素存在与否，都会返回true。
if($('#pox').length>0){//判断元素包含数量即可
$('#pox').css('color','red');
}（2）进阶选择器
在简单选择器中，我们了解了最基本的三种选择器：元素标签名、ID和类(class)。那么在基础选择器外，还有一些进阶和高级的选择器方便我们更精准的选择元素。
- 群组选择器
span,me,.box{
color:red; //多种选择器添加红色字体
}$('span,me,.box').css('color','red'); //群组选择器jQuery方式- 后代选择器
ul li a{ //层层追溯到的元素添加红色字体
color:red;
}$('ul li a').css('color','red');//群组选择器jQuery方式- 通配选择器
*{ //页面所有元素都添加红色字体
color:red;
}$('*').css('color','red'); //通配选择器警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$('*')，这种使用方法效率很低，影响性能，建议尽可能少用。
还有一种选择器，可以在ID和类(class)中指明元素前缀，比如：
$('div.box');//限定必须是.box元素获取必须是div
$('p#boxdiv.side');//同上类(class)有一个特殊的模式，就是同一个DOM节点可以声明多个类(class)。那么对于这种格式，我们有多class选择器可以使用，但要注意和class群组选择器的区别。
.box.pox{//双class选择器，IE6出现异常
color:red;
}$('.box.pox').css('color','red');//兼容IE6，解决了异常多class选择器是必须一个DOM节点同时有多个class，用这多个class进行精确限定。而群组class选择器，只不过是多个class进行选择而已。
$('.box,.pox').css('color','red'); //加了逗号，体会区别警告：在构造选择器时，有一个通用的优化原则：只追求必要的确定性。当选择器筛选越复杂，jQuery内部的选择器引擎处理字符串的时间就越长。
比如：
$('div#box ul li a#link');//让jQuery内部处理了不必要的字符串
$('#link');//ID是唯一性的，准确度不变，性能提升（3）高级选择器
- 后代选择器
$('#boxp').css('color','red');//全兼容jQuery为后代选择器提供了一个等价find()方法
$('#box').find('p').css('color','red');//和后代选择器等价- 子选择器，孙子后失明
#box>p{ //IE6不支持
color:red;
}$('#box>p').css('color','red'); //兼容IE6jQuery为子选择器提供了一个等价children()方法：
$('#box').children('p').css('color','red');//和子选择器等价- next选择器(下一个同级节点)
#box +p{ //IE6不支持
color:red;
}$('#box+p').css('color','red'); //兼容IE6jQuery为next选择器提供了一个等价的方法next()：
$('#box').next('p').css('color','red');//和next选择器等价- nextAll选择器(后面所有同级节点)
#box ~p{ //IE6不支持
color:red;
}$('#box~p').css('color','red');//兼容IE6jQuery为nextAll选择器提供了一个等价的方法nextAll()：
$('#box').nextAll('p').css('color','red');//和nextAll选择器等价层次选择器对节点的层次都是有要求的，比如子选择器，只有子节点才可以被选择到，孙子节点和重孙子节点都无法选择到。next和nextAll选择器，必须是同一个层次的后一个和后N个，不在同一个层次就无法选取到了。
在find()、next()、nextAll()和children()这四个方法中，如果不传递参数，就相当于传递了“*”，即任何节点，我们不建议这么做，不但影响性能，而且由于精准度不佳可能在复杂的HTML结构时产生怪异的结果。
$('#box').next();//相当于$('#box').next('*');为了补充高级选择器的这三种模式，jQuery还提供了更加丰富的方法来选择元素：
$('#box').prev('p').css('color','red');//同级上一个元素
$('#box').prevAll('p').css('color','red');//同级所有上面的元素nextUntil()和prevUnitl()方法是选定同级的下面或上面的所有节点，选定非指定的所有元素，一旦遇到指定的元素就停止选定。
$('#box').prevUntil('p').css('color','red');//同级上非指定元素选定，遇到则停止
$('#box').nextUntil('p').css('color','red');//同级下非指定元素选定，遇到则停止siblings()方法正好集成了prevAll()和nextAll()两个功能的效果，及上下相邻的所有元素进行选定：
$('#box').siblings('p').css('color','red');//同级上下所有元素选定//等价于下面：
$('#box').prevAll('p').css('color','red');//同级上所有元素选定
$('#box').nextAll('p').css('color','red');//同级下所有元素选定警告：切不可写成“$('#box').prevAll('p').nextAll('p').css('color','red');”这种形式，因为prevAll('p')返回的是已经上方所有指定元素，然后再nextAll('p')选定下方所有指定元素，这样必然出现错误。
app.js文件
$(function(){
//id选择器
$("#box").hide().slideDown();
$("#box").css("background-color","rgba(100,100,100,0.4)");
//标签选择器
$("p").css("background-color","aqua");
$("p").css("font-family","heiti");
$("p").css("font-size","40px");
//类选择器
$(".pp").css("font-family","simhei");
alert($("p").size());
$("#log").css("border","solid 1px grey");
$("#log")[0].innerHTML+='$("p").size()-->'+$("p").size()+"<br/>";
$("#log")[0].innerHTML+='$("p").length-->'+$("p").length+"<br/>";
alert($("#log br").length);
//进阶选择器 群组选择器
$("p,span").css("color","red");
//后代选择器
$("#box p").css("font-size","40px");
$("#box").find($("p")).css("font-size","40px");
//高级选择器
//子选择器
$("div>p").css("font-size","36px");
$("div").children("p").css("font-size","36px");
//next选择器
$("#box+div").css("border","1px solid blue");
$("#box").next($("div")).css("border","1px solid blue");
//nextAll选择器
$("#box~div").css("background-color","aqua").css("margin","10px");
$("#box").nextAll("div").css("background-color","aqua").css("margin","10px");
//单元块儿
$("#last").prevUntil("a").css("background-color","aqua").css("margin","50px");
//选取上下同级的元素
$("#last").siblings("div").css("border","1px solid blue").css("margin","10px");
});html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.0.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="box">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>
</div>
<div>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>
</div>
<a>截至</a>
<div id="last">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>
</div>
<div>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>
</div>
<div id="log">
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
