摘要：jQuery的選擇器1.基本選擇器 語法：1）$('#id名')根據(jù)給定的id來匹配到元素2）$('.class名')根據(jù)給定的class來匹配到元素3）$('element')根據(jù)給定的標(biāo)簽名來匹配到元素4）$('*')匹配所有元素5）$('#id名,.class名,element')匹配到頁面多個(gè)選擇器2. 層級選
jQuery的選擇器
1.基本選擇器 語法：
1）$('#id名')根據(jù)給定的id來匹配到元素
2）$('.class名')根據(jù)給定的class來匹配到元素
3）$('element')根據(jù)給定的標(biāo)簽名來匹配到元素
4）$('*')匹配所有元素
5）$('#id名,.class名,element')匹配到頁面多個(gè)選擇器
2. 層級選擇器(相當(dāng)于父類和子類的元素關(guān)系)
1）給定的父級元素下匹配所有的子元素:$('父級元素>子級元素')
2）給定的祖先元素下匹配所有的后代元素:$('祖先元素 后代元素')
3）匹配緊跟在prev元素后面的next元素:$('prev+next')(同級元素)
4）匹配prev元素后面所有的siblings元素:$('prev~siblings')
3. 順序選擇器
1）順序
$(':first')第一元素
$(':last')最后一個(gè)元素
2）比較(比較x的順序是從0開始)
$(':gt(x)')表示值大于x的元素
$(':lt(x)')表示值小于x的元素
$(':eq(x)')表示值等于x的元素
3）奇偶數(shù)
$(':odd')奇數(shù)順序
$(':even')偶數(shù)順序
4）非
$('.not(selector)!')匹配不是selector的所有元素
4. 內(nèi)容選擇器 語法：
1）$(':contains(text)')匹配給定包含文本(text)的元素
2）$(':has(selector)')匹配包含特定選擇器元素的元素
3）$(':empty')匹配不含有內(nèi)容的元素(即 不包含子元素或者文本的空元素)
4）$(':parent')匹配含有子元素或者文本的元素
5. 屬性選擇器 語法：
1）$('[屬性名]')匹配包含給定屬性的元素
2）$('[attribute=value]')匹配給定屬性是某個(gè)給定值的元素
3）$('[attribute!=value]')匹配所有不含指定值的屬性，或者說是屬性不等于特定值的元素
4）$('[attribute^=value]')匹配給定屬性是以某些值開始的元素
5） $('[attribute$=value]')匹配給定屬性是以某些值結(jié)尾的元素
6） $('[atttibute*=value]')匹配給定屬性包含某些值得元素
7） $('attribute[1][2][3]')復(fù)合選擇器,需要同時(shí)滿足多個(gè)條件得使用
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="藍(lán)色" id="box2" onclick="blue()">
<input type="button" value="粉色" id="box3" onclick="pink()">
</body>
</html>
批改老師：滅絕師太批改時(shí)間：2018-12-10 10:44:41
老師總結(jié)：總結(jié)的很全面，測試的還不夠奧！完成的不錯(cuò)，繼續(xù)保持！