溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文為大家分享了jQuery常用選擇器的具體代碼，供大家參考，具體內容如下
1、jQuery：（使用jQuery一定標明我們使用的版本號）
它是一個使用原生的JS來封裝的常用的方法的類庫（解決了瀏覽器的兼容問題）
2、jQuery中提供的方法
選擇器
通過傳遞對應規則的內容（ID、標簽名、樣式類名...），獲取到頁面中指定的元素/元素集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='div1'>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div></div>
<div id='div3'></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
//原生JS獲取到的結果屬于元素對象/元素集合/節點集合...他們可以使用瀏覽器為其提供的那些天生自帶的屬性和方法
//原生的JS對象不能直接的使用jQuery中提供的屬性和方法
var oDiv = document.getElementById('div1')
oDiv.clientWidth
oDiv.getAttribute
//jq獲取到的結果是一個jQuery對象，可以使用jQuery里面提供的屬性和方法，但是不能直接的使用瀏覽器內置的屬性和方法
var $oDiv = jQuery("#div1")//$("#div1")
$oDiv.innerWidth();
$oDiv.attr
//關于原生JS對象和jQuery對象之間的轉換
//1)、原生的轉變成jQuery:$(原生JS對象)
$(oDiv)
//2)、jQuery轉化成原生：直接通過索引獲取對應的元素對象即可
$oDiv[0]
$oDiv.get(0)//<==>$oDiv[0]都是通過索引來獲取指定位置的元素（JS原生對象）
//更多的jQuery選擇器
$('#div1')
$('div')
$('.w100')
$('*')
$('#div1,div,.w100')//把每一個選擇器獲取到的jQuery對象最后融合在一起，最后一起獲取到
$('#div1 li')//在子子孫孫級中進行查找
$('#div1>li')//在子級中進行查找
$('#div3+')//獲取它的下一個弟弟
$('#div3+ul')//獲取它的下一個弟弟并且標簽名是ul的
$('#div3~')//獲取它的所有的弟弟元素
$('#div3~ul')//獲取它的所有的弟弟元素并且標簽名為ul的
$('#div1>div:not(.w100)')//#div1下的所有子集div樣式類名不包含w100的
$('#div1>div:eq(0)')//通過索引獲取到集合中的某一個，但是獲取到的結果依然是一個jQuery對象（而get方法也是通過索引獲取，但是獲取到的是一個JS原生對象）
$('#div1>div:gt(1)')//大于索引1的（不包含索引1的）
$('#div1>div:lt(1)')//小于索引1的（不包含索引1的）
$('#div1 li:contains("我")')//獲取所有的li內容包含“我” 的
$('#div1 div:has(ul)')//在所有的div中包含ul的
$('#div1>*:nth-child(1)')//獲取所有的子元素的第一個
$('#div1>*:eq(1)')//獲取所有的子元素的第二個（索引為1）
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
