サマリー：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>選擇器案例.html</title> <script type="text/javascript" src="j
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器案例.html</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style>
div{
margin: 10px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("a").css("text-decoration","none");
$("p:first").css("color","#ccc")
$("p:last").css("color","#888")
$("a:odd").css("color","pink")
$("div:contains(第一類)").css("color","purple")
$(":disabled").css("background","red")
$("input[name][id=username]").css("background-color","yellow")
$(":selected").css("color","green")
})
</script>
<p>男裝 </p>
<div>第一類:</div>
1 <a href="">上衣</a>
2 <a href="">半袖</a>
3 <a href="">T-shirt</a>
<div>第二類:</div>
4 <a href="">外套</a>
5 <a href="">短褲</a>
6 <a href="">衛(wèi)衣</a>
<p>女裝</p>
1 <a href="">長(zhǎng)裙子</a>
2 <a href="">半袖</a>
3 <a href="">牛仔褲</a><br>
4 <a href="">外套</a>
5 <a href="">短裙子</a>
6 <a href="">衛(wèi)衣</a>
<p>兒童</p>
1 <a href="">上衣</a>
2 <a href="">褲子</a>
3 <a href="">鞋</a><br>
4 <a href="">襪子</a>
5 <a href="">玩具</a>
6 <a href="">手表</a>
<br>
<br>
<form >
姓名:<input type="text" name="" id="username"><br>
電話:<input type="text" name=""><br>
聯(lián)系人:<input type="text" name=""><br>
地址:<input type="text" name=""><br>
郵箱:<input type="text" name="" placeholder="這里禁止填寫" disabled><br>
性別:<select>
<option>女</option>
<option selected>男</option>
</select>
</form>
</body>
</html>
jquery基本選擇器語(yǔ)法:
$("#id名") 根據(jù)給定的id來(lái)匹配到元素
$(".class名") 根據(jù)給定的class來(lái)匹配到元素
$("element") 根據(jù)給定的標(biāo)簽來(lái)匹配到元素
$("*") 匹配到所有元素
$("#id名,.class名,element") 匹配到頁(yè)面中多個(gè)選擇器
jquery層級(jí)選擇器語(yǔ)法:
$("父級(jí)元素>子級(jí)元素") 給定的父級(jí)元素下匹配所有的子元素
$("祖先元素 后代元素") 給定的祖先元素下匹配所有的后代元素
$("prev+next")(同級(jí)元素) 匹配緊跟在prev后面的next元素
$("prev~siblings") 匹配prev元素后面的所有的siblings元素
jquery順序選擇器:
1 順序
$(":first") 第一個(gè)元素
$(":last") 最后一個(gè)元素
2 比較(x的順序是從0開(kāi)始的)
$(":gt(x)") 表示大于值x的元素
$(":lt(x)") 表示小于值x的元素
$(":eq(x)") 表示等于值x的元素
3 奇偶數(shù)(x的順序是從0開(kāi)始的)
$(":odd") 奇數(shù)排序
$(":even") 偶數(shù)排序
4 非
$(":not(selector)") 匹配不是selector(選擇器)的所有元素
jquery內(nèi)容選擇器:
$(":contains(text)") 匹配包含給定文本(text)的元素
$(":has(selector)") 匹配包含特定選擇器元素的元素
$(":empty") 匹配不含有內(nèi)容的元素(即不含有子元素或者文本的空元素)
$(":parent") 匹配含有子元素或者文本的元素
jquery屬性選擇器:
$("[屬性名]") 匹配包含給定屬性的元素
$("[屬性名=屬性值]") 匹配給定屬性是某個(gè)特定值的元素
$("[屬性名!=屬性值]") 匹配所有不含有特定值得屬性或者說(shuō)是屬性不等于特定值的元素
$("[屬性名^=屬性值]") 匹配給定屬性是以某些值開(kāi)始的元素
$("[屬性名$=屬性值]") 匹配給定屬性是以某些值結(jié)尾的元素
$("[屬性名*=屬性值]") 匹配給定屬性包含某些值的元素
$("attrSel[1] attrSel[1] attrSel[1]") 符合選擇器，需要同時(shí)瞞住多個(gè)條件使用
jquery表單選擇器:
$(":enabled") 所有激活的input元素(可以使用的input元素)
$(":disabled") 所有禁用的input元素(不可以使用的input元素)
$(":selected") 所有被選取的元素，針對(duì)于select元素
$(":checked") 所有被選中的input元素
添削の先生：查無(wú)此人添削時(shí)間：2018-11-25 09:41:15
先生のまとめ：挺不錯(cuò)的，會(huì)了選擇器，基本就弄懂一半了，只要對(duì)頁(yè)面進(jìn)行操作，都要先選擇對(duì)象。