jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素(注意:jQuery选择器返回的是jQuery对象)
jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多更加复杂的选择器
jQuery选择器虽然很多,但是选择器之间可以互相替代,就是说获取一个元素,会有很多种方法获取到,所以平时真正能用到的只是少数的最常用的选择器
jQuery常用选择器:
// ~ 获取的是某个元素后面的所有的兄弟元素
用法:
$("#dv~span")
// + 获取的是某个元素后面的直接兄弟元素
用法:
$("#dv+span")
// > 获取的是某个元素的直接子元素
用法:
$("#dv>span")
// 空格 获取的是某个元素的所有的子元素(孙子元素)
用法:
$("#dv span")
例子:
html:
css:
没加jQuery浏览器效果:
1.jQuery:
这是给button按钮绑定点击事件
$("#btn").click(function(){
// 获取div后面所有的兄弟元素span,设置span背景颜色为红色
$("#dv~span").css("backgroundColor","red");
})
浏览器效果:
2.jQuery:
这是给button按钮绑定点击事件
$("#btn").click(function(){
// 获取div后面的直接兄弟元素span,设置span背景颜色为红色
$("#dv+span").css("backgroundColor","red");
})
浏览器效果:
注意:要是把html代码中的p标签取消注释的话,那么获取div后面的直接兄弟元素 span,设置span背景颜色为红色,则没有效果
3.jQuery:
这是给button按钮绑定点击事件
$("#btn").click(function(){
// 获取div的直接子元素span,设置span背景颜色为红色
$("#dv>span").css("backgroundColor","red");
})
浏览器效果:
4.jQuery:
这是给button按钮绑定点击事件
$("#btn").click(function(){
// 获取div的所有子元素span(包括孙子元素),设置span背景颜色为红色
$("#dv span").css("backgroundColor","red");
})
浏览器效果:
// 获取的是class为cls的p元素
用法:
$("p.cls")
例子:
html:
css:
没加jQuery浏览器效果:
jQuery:
这是给button按钮绑定点击事件
$("#btn").click(function(){
// 获取class为cls的p标签,设置背景颜色为黄色
$("p.cls").css("backgroundColor","yellow");
})
浏览器效果:
// 获取的是id为dv的元素,p标签和class为cls的元素(使用时要用逗号分隔)
用法:
$("#dv,p,.cls")
例子:
html:
css:
没加jQuery浏览器效果:
jQuery:
这是给button按钮绑定点击事件
$("#btn").click(function(){
// 获取id为dv的元素,p标签和class为cls的元素,设置背景颜色为黄色
$("#dv,p,.cls").css("backgroundColor","yellow");
})
浏览器效果:
// 获取的是id为uu的元素的直接子元素li中,索引为2的元素(索引是从0开始)
用法:
$("#uu>li:eq(2)")
例子:
html:
css:
没加jQuery浏览器效果:
jQuery:
这是给button按钮绑定点击事件
$("#btn").click(function(){
// 获取id为uu的元素的直接子元素li中,索引为2的元素,设置背景颜色为红色
$("#uu>li:eq(2)").css("backgroundColor","red");
})
浏览器效果:
小案例:
隔行变色
html:
css:
jQuery: :odd是获取id为uu的元素的直接子元素li中,索引为奇数的元素。 :even是获取id为uu的元素的直接子元素li中,索引为偶数的元素
浏览器效果: