這里把jQuery的選擇器大致分為兩類：基本選擇器和篩選選擇器
一丶基本選擇器
id選擇器
<div id="fancy">
<p>id="fancy"</p>
<p>選中</p>
</div>
<script type="text/javascript">
$("#fancy").css("color", "red");
//使用方法 $( "#id" )
</script>類選擇器
<div class="fancy">
<p>class="fancy"</p>
<p>選中</p>
</div>
<script type="text/javascript">
$(".fancy").css("color", "red");
//使用方法 $( ".class" )
</script>元素選擇器
<div>
<p>選中</p>
<a>未選中</a>
</div>
<script type="text/javascript">
$("p").css("color", "red");
//使用方法 $( "element" )
</script>運行結果
全選擇器
<div>
<p id="well">id</p>
<p class="fancy">class</p>
<a>wellfancy</a>
</div>
<script type="text/javascript">
$("*").css("color", "red");
//使用方法 $( "*" )
</script>
運行結果
層級選擇器：
子選擇器
<div>
<p>選中1</p>
<p>選中2</p>
<a>未選中</a>
<dd>
<p>hello</p>
</dd>
</div>
<script type="text/javascript">
$("div > p").css("color", "red");
//使用方法 $("parent > child")
</script>運行結果
后代選擇器
<div>
<p>選中1</p>
<p>選中2</p>
<a>未選中</a>
<dd>
<p>hello</p>
</dd>
</div>
<script type="text/javascript">
$("div p").css("color", "red");
//使用方法 $("ancestor descendant")
</script>
運行結果
二丶篩選選擇器
基本篩選選擇器
$(": first ")，匹配第一個元素
$(": last")，匹配最后一個元素
$(": eq(index)")，在匹配的集合中選擇索引值為index的元素
$(": gt(index)")，在匹配的集合中選擇大于索引值為index的元素
$(": lt(index)")，在匹配的集合中選擇小于索引值為index的元素
注意：jQuery合集都是從0開始索引的，即編號為0的元素是第一個元素
<div class="well">
<div class="qq">
<p>編號為0</p>
</div>
<div class="qq">
<p>編號為1</p>
</div>
<div class="qq">
<p>編號為2</p>
</div>
<div class="qq">
<p>編號為3</p>
</div>
<div class="qq">
<p>編號為4</p>
</div>
<div class="qq">
<p>編號為5</p>
</div>
</div>
<script type="text/javascript">
//選擇編號為2的元素
$(".qq:eq(2)").css("border", "3px groove red");
</script>
<script type="text/javascript">
//選擇編號大于3的元素
$(".qq:gt(3)").css("border", "3px groove blue");
</script>
<script type="text/javascript">
//選擇編號小于2的元素
$(".qq:lt(2)").css("border", "3px groove black");
</script>
運行結果
內容篩選選擇器
$(": contains(text)")，選擇所有包含指定文本的元素
$(": has(selector)")，選擇元素中至少包含指定選擇器的元素
注意：contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
<body>
<div class="well">
<div class="qq">
<p>123</p>
</div>
<div class="qq">
<p>123</p>
</div>
<div class="qq">
<p>123</p>
</div>
<div class="qq">
<p>456</p>
</div>
<div class="qq">
<span>456</span>
</div>
<div class="qq">
<p>456</p>
</div>
</div>
<script type="text/javascript">
$(".qq:contains('123')").css("border", "3px groove red");
</script>
<script type="text/javascript">
$(".qq:has(span)").css("border", "3px groove blue");
</script>
</body>運行結果
屬性篩選選擇器
屬性篩選選擇器有很多，其中 [attr="value"]和[attr*="value"]是最常用到的
[attr="value"]，選擇指定屬性值等于給定字串或以該文字串為前綴的元素
[attr*="value"]，選擇指定屬性具有包含一個給定的子字串的元素
子元素篩選選擇器
$(" : first-child ")，選擇所有父級元素下的第一個子元素
$(" : last-child ")，選擇所有父級元素下的最后一個子元素
$(" : only-child ")，如果某個元素是其父元素的唯一子元素，那么他會被選中
$(" : nth-child ")，選擇他們所有父元素的第n個子元素
$(" : nth-last-child ")，選擇他們所有父元素的第n個子元素，但是從最后一個往前計數
<div class="left last-div">
<div class="div">
<a>:first-child</a>
<a>第二個元素</a>
<a>第三個元素</a>
<a>:last-child</a>
</div>
<div class="div">
<a>:first-child</a>
<a>第二個元素</a>
</div>
<div class="div">
<a>:first-child</a>
<a>第二個元素</a>
<a>第三個元素</a>
<a>:last-child</a>
</div>
</div>
<script type="text/javascript">
//查找class="last-div"下的第二個a元素
$('.last-div a:nth-child(2)').css("color", "blue");
</script>
<script type="text/javascript">
//查找class="last-div"下的倒數第二個a元素
$('.last-div a:nth-last-child(2)').css("color", "red");
</script>運行結果
表單元素選擇器
$(" : input ")，選擇所有input，textarea，select和button元素
$(" : text")，匹配所有文本框
$(" : password ")，匹配所有密碼框
$(" : radio")，匹配所有單選按鈕
$(" : checkbox")，匹配所有多選按鈕
$(" : submit")，匹配所有提交按鈕
$(" : image")，匹配所有影像域
$(" : reset")，匹配所有重置按鈕
$(" : button")，匹配所有按鈕
$(" : file")，匹配所有檔案域
<div class="left first-div">
<form>
<input type="text" value="text"/>
<input type="password" value="password"/>
<input type="submit" />
</form>
</div>
<script type="text/javascript">
$(":input").css("border", "3px groove red");
</script>
<script type="text/javascript">
//匹配所有input元素中型別為text的input元素
$('input:text').css("background", "#A2CD5A");
</script>
<script type="text/javascript">
//匹配所有input元素中型別為password的input元素
$('input:password').css("background", "yellow");
</script>
<script type="text/javascript">
//匹配所有input元素中的提交的按鈕,修改背景顏色
$('input:submit').css("background", "#C6E2FF");
</script>
運行結果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/291508.html
標籤：其他
上一篇：基于Node.js搭建express應用實作簡單Web服務器功能，建議收藏
下一篇：前端進階學習之路