1、简单选择器
#box{ #使用ID选择器的css规则
color:red; #将ID为box的元素字体颜色变红
}
在jquery中,如下方式可获得相同的结果:
$('#box').css('color','red'); //元素选择器,返回多个元素
$('#box').css('color','red');//ID选择器,返回单个元素
$('#box').css('color','red');//类(class)选择器,返回多个元素
注意:一个页面有且仅有一个ID
进阶选择器:(元素标签名,ID和类(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');//加了逗号,体会区别
注意:
在构造选择器时,有一个通用的优化原则,只追求必要的确定性,当选择器筛选越复杂,jq的内部选择器引擎处字符串的时间就越长。
如:
$('div#box ul li a #link');//让jq处理不必要的字符串
$('#link');//ID的唯一性,准确度不变,性能提升
2、高级选择器
后代选择器
$(‘#box.p').css('color','red');//全兼容
子选择器
$('#box>p').css('color','red');//兼容IE6