jQuery选择器总结及案例
jQuery的选择器
1.基本选择器 语法：
1）$('#id名')根据给定的id来匹配到元素
2）$('.class名')根据给定的class来匹配到元素
3）$('element')根据给定的标签名来匹配到元素
4）$('*')匹配所有元素
5）$('#id名,.class名,element')匹配到页面多个选择器
2. 层级选择器(相当于父类和子类的元素关系)
1）给定的父级元素下匹配所有的子元素:$('父级元素>子级元素')
2）给定的祖先元素下匹配所有的后代元素:$('祖先元素 后代元素')
3）匹配紧跟在prev元素后面的next元素:$('prev+next')(同级元素)
4）匹配prev元素后面所有的siblings元素:$('prev~siblings')
3. 顺序选择器
1）顺序
$(':first')第一元素
$(':last')最后一个元素
2）比较(比较x的顺序是从0开始)
$(':gt(x)')表示值大于x的元素
$(':lt(x)')表示值小于x的元素
$(':eq(x)')表示值等于x的元素
3）奇偶数
$(':odd')奇数顺序
$(':even')偶数顺序
4）非
$('.not(selector)!')匹配不是selector的所有元素
4. 内容选择器 语法：
1）$(':contains(text)')匹配给定包含文本(text)的元素
2）$(':has(selector)')匹配包含特定选择器元素的元素
3）$(':empty')匹配不含有内容的元素(即 不包含子元素或者文本的空元素)
4）$(':parent')匹配含有子元素或者文本的元素
5. 属性选择器 语法：
1）$('[属性名]')匹配包含给定属性的元素
2）$('[attribute=value]')匹配给定属性是某个给定值的元素
3）$('[attribute!=value]')匹配所有不含指定值的属性，或者说是属性不等于特定值的元素
4）$('[attribute^=value]')匹配给定属性是以某些值开始的元素
5） $('[attribute$=value]')匹配给定属性是以某些值结尾的元素
6） $('[atttibute*=value]')匹配给定属性包含某些值得元素
7） $('attribute[1][2][3]')复合选择器,需要同时满足多个条件得使用
6. 表单选择器 语法
1）$(':enabled')所有激活的input元素(可以使用input元素)
2）$(':disable')所有禁用的Input元素(不可以使用的input元素)
3）$(':selected')所有被选取的元素,针对select元素
4） $(':checked')所有被选中的input元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width: 200px;height:200px;margin:0px auto; margin-top: 20px; background:#ccc;}
#box1{margin-left: 700px;margin-top: 20px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#box1').css('background','red')
$('#box2').css('background','blue')
$('#box3').css('background','pink')
})
var box
window.onload=function(){
box=document.getElementById("box")
}
function red(){
box.style.backgroundColor="red"
}
function blue(){
box.style.backgroundColor="blue"
}
function pink(){
box.style.backgroundColor="pink"
}
</script>
<div id="box"></div>
<input type="button" value="红色" id="box1" onclick="red()">
<input type="button" value="蓝色" id="box2" onclick="blue()">
<input type="button" value="粉色" id="box3" onclick="pink()">
</body>
</html>