jQuery常规选择器

1.简单选择器(常用)
2.进阶选择器
3.高级选择器
===========================1.简单选择器
$('div').css('color', 'red'); //元素选择器,返回多个元素
$('#box').css('color', 'red'); //ID 选择器,返回单个元素
$('.box').css('color', 'red'); //类(class)选择器,返回多个元素

为了证明ID 返回的是单个元素,而元素标签名和类(class)返回的是多个,我们可以采
用jQuery 核心自带的一个属性length 或size()方法来查看返回的元素个数。
alert($('div').size()); //3 个
alert($('#box').size()); //1 个,后面两个失明了
alert($('.box').size()); //3 个

==========================2.进阶选择器
//群组选择器
span, em, .box { //多种选择器添加红色字体
color:red;
}
$('span, em, .box').css('color', 'red'); //群组选择器jQuery 方式
//后代选择器
ul li a { //层层追溯到的元素添加红色字体
color:red;
}
$('ul li a').css('color', 'red'); //群组选择器jQuery 方式
//通配选择器
* { //页面所有元素都添加红色字体
color:red;
}
$('*').css('color', 'red'); //通配选择器

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

==========================3.高级选择器

相关推荐