jQuery学习（二）-常规选择器

一、常规选择器分类
（1）、简单选择器
（2）、进阶选择器
（3）、高级选择器
二，简单选择器（id选择器，元素选择器，类选择器）
（1）id选择器
使用jQuery选择器时，必须使用“$()”函数来包装我们css规则，经过jQuery对象包装后，返回对应元素的jQuery对象，我们得到这个DOM节点后就可以进行操作啦。

#box{       //使用ID选择器的css规则     
color:red;  //将ID为box的元素字体颜色变红
}

在jQuery选择器里，我们使用如下方式可以获取同样的结果：

$("#box").css("color","red"); //获取DOM节点对象,并添加行为

（2）元素选择器和类选择器

$("div").css("color","red");  //(1)元素选择器，返回多个对象
$("#box").css("color","red"); //(2)ID选择器，返回单个对象
$(".box").css("color","red"); //(3)类（clas）选择器，返回多个对象

为了证明ID返回的是单个元素，元素选择器和类选择器返回的是多个对象，我们可以使用jQuery的一个属性length或size()方法查看返回元素个数。

三、进阶选择器（群组选择器，后代选择器，通配符选择器）

//(1)群组选择器
span , em , .box{  //多种选择器添加红色字体
    color:red;
}
$("span , em , .box").css("color","red");//群组选择器jQuery方式

//(2)后代选择器
ul li a{
    color:red; //层层追溯到的元素添加红色字体
}
$("ul li a").css("color","red"); //后代选择器jQuery的方式

//(3)通配符选择器
*{
    color:red; //页面上所有元素都添加红色字体
}
$("*").css("color","red"); //通配符选择器jQuery的方式

//特殊选择器，可以在ID和类（class）中指明元素前缀
$("div.box"); //限定.box元素获取必须是div标签
$("p#box") //限定#box元素获取必须是p标签

目前介绍的六中选择器，在实际开发中我们可以灵活搭配，使得选择器更加的准确和快速：

$("#box p , ui li * ").css("color","red"); //组合了多种选择器

注意：通配符选择器比如$(“*”),这种使用方法效率很低，影响性能，建议少用。

三、高级选择器

//(1)后代选择器
$("#box p").css("color","red"); 

jQuery为后代选择器提供了一个等价的find（）方法
$("box").find("p").css("color","red"); //和后代选择器等价

//(2)子选择器

$("#box >p").css("color","red"); //对应jQuery使用

jQuery为子选择器提供了一个定价的children()方法：
$("#box").children("p").css("color","red"); //和子选择器等价

//（3）next选择器（同级节点下一个元素）
$("#box+p").next("p").css("color","red");

jQuery为next选择器提供了一个等价的方法next();
$("#box").next("p").css("color","red");

//（4）nextAll选择器（同级节点所有元素）
$("#box~p").css("color","red");

jQuery为nextAll选择器提供了一个等价的方法nextAll();
$("#box").nextAll("p").css("color","red");

注意：在find()、next()、nextAll()、和children()这四个方法中，如果不传递参数，就相当于传递了”*”,即任何节点，不但影响性能，在复杂情况下产生怪异的结果。

为了补充高级选择器的这四中模式，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');

注意：以上选择器对其变量进行缓存，速度会进一步提高
var box = $('#box'); 
var p = box.find('p');

四、属性选择器

注意：图片上的“a””代表元素名称“title”代表属性名称。

//选定具有这个属性=这个属性值的
$("li[class=class1]").css("color","red");

//选定具有这个属性且以开头属性值匹配的
$("div[title^=title1]").css("color","red");