jQuery選擇器

1、id選擇器：——“#”

一個用來查找的ID，即元素的id屬性

$( "#id" )

id選擇器也是基本的選擇器，jQuery內部使用JavaScript函數document.getElementById()來處理ID的獲取。

原生語法的支持總是非常高效的，所以在操作DOM的獲取上，如果能採用id的話盡然考慮用這個選擇器

值得注意：
id是唯一的，每個id值在一個頁面中只能使用一次。如果多個元素分配了相同的id，將只匹配該id選擇集合的第一個DOM元素。但這種行爲不應該發生;有超過一個元素的頁面使用相同的id是無效的。

2、類選擇器：——“.”

通過class樣式類名來獲取節點

描述：

$( ".class" )

類選擇器，相對id選擇器來說，效率相對會低一點，但是優勢就是可以多選。

同樣的jQuery在實現上，對於類選擇器，如果瀏覽器支持，jQuery使用JavaScript的原生getElementsByClassName()函數來實現的。

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 90px;

float: left;

padding: 5px;

margin: 5px;

background-color: #EEEEEE;

}

</style>

</head>

<body>

<p>class="aaron"</p>

</div>

<p>class="aaron"</p>

</div>

<p>class="imooc"</p>

<p>jQuery選中</p>

</div>

<p>class="imooc"</p>

<p>jQuery選中</p>

</div>

//通過原生方法處理

//樣式是可以多選的，所以得到的是一個合集

//需要通過循環給合集中每一個元素修改樣式

var divs = document.getElementsByClassName('aaron');

for (var i = 0; i < divs.length; i++) {

divs[i].style.border = "3px solid blue";

}

</script>

//通過jQuery直接傳入class

//class選擇器可以選擇多個元素

$(".imooc").css("border", "3px solid red");//內部含有隱式的循環處理

</script>

</body>

</html>

我們不難發現：

jQuery除了選擇上的簡單，而且沒有再次使用循環處理

不難想到$(".imooc").css()方法內部肯定是帶了一個隱式的循環處理，所以使用jQuery選擇節點，不僅僅只是選擇上的簡單，同時還增加很多關聯的便利操作，後續我們還會慢慢的學到其他的優勢。

3、元素選擇器：

根據給定（html）標記名稱選擇所有的元素

描述：

$( "element" )

搜索指定元素標籤名的所有節點，這個是一個合集的操作。同樣的也有原生方法getElementsByTagName()函數支持。

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 90px;

float: left;

padding: 5px;

margin: 5px;

background-color: #EEEEEE;

}

</style>

</head>

<body>

<p>class="aaron"</p>

</div>

<p>class="aaron"</p>

</div>

<p>class="imooc"</p>

<p>jQuery選中</p>

</div>

<p>class="imooc"</p>

<p>jQuery選中</p>

</div>

//通過原生方法處理

//獲取到所有的節點標記名爲div的元素

//給每一個div加上藍色的邊框

var divs = document.getElementsByTagName('div');

for (var i = 0; i < divs.length; i++) {

divs[i].style.border = "3px solid blue";

}

</script>

//通過jQuery直接傳入標籤名p

//標籤是可以多個的，所以得到的同樣也是一個合集

$("p").css("border", "3px solid red");

</script>

</body>

</html>

第一組：通過getElementsByTagName方法得到頁面所有的<div>元素

var divs = document.getElementsByTagName('div');

divs是dom合集對象，通過循環給每一個合集中的<div>元素賦予新的boder樣式

第二組：同樣的效果，$("p")選取所有的<p>元素，通過css方法直接賦予樣式

4、全選擇器：——“*”

在CSS中，經常會在第一行寫下這樣一段樣式

* {padding: 0; margin: 0;}

通配符*意味着給所有的元素設置默認的邊距。

jQuery中我們也可以通過傳遞*選擇器來選中文檔頁面中的元素

描述：

$( "*" )

拋開jQuery，如果要獲取文檔中所有的元素，通過document.getElementsByTagName()中傳遞"*"同樣可以獲取到。

不難發現，id、class、tag都可以通過原生的方法獲取到對應的節點，但是我們還需要考慮一個兼容性的問題，我這裏順便提及一下，比如:

IE會將註釋節點實現爲元素，所以在IE中調用getElementsByTagName裏面會包含註釋節點，這個通常是不應該的。
getElementById的參數在IE8及較低的版本不區分大小寫
IE7及較低的版本中，表單元素中，如果表單A的name屬性名用了另一個元素B的ID名並且A在B之前，那麼getElementById會選中A
IE8及較低的版本，瀏覽器不支持getElementsByClassName

5、層級選擇器：

文檔中的所有的節點之間都是有這樣或者那樣的關係。
我們可以把節點之間的關係可以用傳統的家族關係來描述，可以把文檔樹當作一個家譜，那麼節點與節點直接就會存在父子，兄弟，祖孫的關係了。
選擇器中的層級選擇器就是用來處理這種關係。

仔細觀察層級選擇器之間還是有很多相似與不同點：

層級選擇器都有一個參考節點
後代選擇器包含子選擇器的選擇的內容
一般兄弟選擇器包含相鄰兄弟選擇的內容
相鄰兄弟選擇器和一般兄弟選擇器所選擇到的元素，必須在同一個父元素下

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>子選擇器與後代選擇器</h2>

<p>div下的第一個p元素</p>

</div>

<p>div下的第一個p元素</p>

</div>

<p>div下的article下的p元素</p>

</article>

</div>

<p>div下的article下的p元素</p>

</article>

</div>

//子選擇器

//$('div > p') 選擇所有div元素裏面的子元素P

$('dic>p').css("border", "1px groove red");

</script>

//後代選擇器

//$('div p') 選擇所有div元素裏面的p元素

$('div p').css("border", "1px groove red");

</script>

<h2>相鄰兄弟選擇器與一般兄弟選擇器</h2>

<div>兄弟節點div, +~選擇器不能向前選擇</div>

<span class="prev">選擇器span元素</span>

<div>span後第一個兄弟節點div</div>

<div>兄弟節點div

<div class="small">子元素div</div>

</div>

<span>兄弟節點span,不可選</span>

<div>兄弟節點div</div>

</div>

//相鄰兄弟選擇器

//選取prev後面的第一個的div兄弟節點

$(".prev+div").css("border", "3px groove blue");

</script>

//一般相鄰選擇器

//選取prev後面的所有的div兄弟節點

$(".prev~div").css("border", "3px groove blue");

</script>

</body>

</html>

6、篩選選擇器：——“：”

篩選選擇器的用法與CSS中的僞元素相似，選擇器用冒號“：”開頭，通過一個列表，看看基本篩選器的描述：

注意事項：

:eq(), :lt(), :gt(), :even, :odd 用來篩選他們前面的匹配表達式的集合元素，根據之前匹配的元素在進一步篩選，注意jQuery合集都是從0開始索引
gt是一個段落篩選，從指定索引的下一個開始，gt(1) 實際從2開始

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>基本篩選器</h2>

<h3>:first/:last/:even/:odd</h3>

<p>div:first</p>

</div>

</div>

</div>

</div>

</div>

</div>

//找到第一個div

$(".div:first").css("color", "#CD00CD");

</script>

//找到最後一個div

$(".div:last").css("color", "#CD00CD");

</script>

//:even 選擇所引值爲偶數的元素，從 0 開始計數

$(".div:even").css("border", "3px groove red");

</script>

//:odd 選擇所引值爲奇數的元素，從 0 開始計數

$(".div:odd").css("border", "3px groove blue");

</script>

</div>

</div>

</div>

</div>

</div>

</div>

//:eq

//選擇單個

$(".aaron:eq(2)").css("border", "3px groove blue");

</script>

//:gt 選擇匹配集合中所有索引值大於給定index參數的元素

$(".aaron:gt(3)").css("border", "3px groove blue");

</script>

//:lt 選擇匹配集合中所有索引值小於給定index參數的元素

//與:gt相反

$(".aaron:lt(2)").css("color", "#CD00CD");

</script>

<div>

<p>Aaron</p>

</div>

<div>

</div>

<div>

</div>

//:not 選擇所有元素去除不匹配給定的選擇器的元素

//選中所有緊接着沒有checked屬性的input元素後的p元素，賦予顏色

$("input:not(:checked)+p").css("background-color", "#CD00CD");

</script>

</body>

</html>

7、內容篩選選擇器：

基本篩選選擇器針對的都是元素DOM節點，如果我們要通過內容來過濾，jQuery也提供了一組內容篩選選擇器，當然其規則也會體現在它所包含的子元素或者文本內容上。

內容過濾器描述如下表：

注意事項：

1、:contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素

2、如果:contains匹配的文本包含在元素的子元素中，同樣認爲是符合條件的。

3、:parent與:empty是相反的，兩者所涉及的子元素，包括文本節點

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>內容篩選器</h2>

<h3>:contains/:has</h3>

<p>:contains</p>

</div>

<p>:contains</p>

</div>

<p>

</p>

</div>

<p>:contains</p>

</div>

//查找所有class='div'中DOM元素中包含"contains"的元素節點

//並且設置顏色

$(".div:contains(':contains')").css("color", "#CD00CD");

</script>

//查找所有class='div'中DOM元素中包含"span"的元素節點

//並且設置顏色

$(".div:has(span)").css("color", "blue");

</script>

<h3>:parent/:empty</h3>

<a>:parent</a>

</div>

<a>:parent</a>

</div>

<a>:parent</a>

</div>

<a></a>

</div>

//選擇所有包含子元素或者文本的a元素

//增加一個藍色的邊框

$("a:parent").css("border", "3px groove blue");

</script>

//找到a元素下面的所有空節點(沒有子元素)

//增加一段文本與邊框

$("a:empty").text(":empty").css("border", "3px groove red");

</script>

</body>

</html>

8、可見性篩選選擇器：

元素有顯示狀態與隱藏狀態，jQuery根據元素的狀態擴展了可見性篩選選擇器:visible與:hidden。

這2個選擇器都是 jQuery 延伸出來的，看起來比較簡單，但是元素可見性依賴於適用的樣式

:hidden選擇器，不僅僅包含樣式是display="none"的元素，還包括隱藏表單、visibility等等

我們有幾種方式可以隱藏一個元素：

CSS display的值是none。
type="hidden"的表單元素。
寬度和高度都顯式設置爲0。
一個祖先元素是隱藏的，該元素是不會在頁面上顯示
CSS visibility的值是hidden
CSS opacity的指是0

如果元素中佔據文檔中一定的空間,元素被認爲是可見的。

可見元素的寬度或高度，是大於零。

元素的visibility: hidden 或 opacity: 0被認爲是可見的，因爲他們仍然佔用空間佈局。

不在文檔中的元素是被認爲是不可見的，如果當他們被插入到文檔中，jQuery沒有辦法知道他們是否是可見的，因爲元素可見性依賴於適用的樣式

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>可見性篩選選擇器</h2>

<h3>:visible/:hidden</h3>

<a>display</a>

<p id="div1" style="display:none;">display</p>

</div>

<a>width</a>

<a>height</a>

<p id="div2" style="width:0;height:0">width/height</p>

</div>

<a>visibility</a>

<a>opacity</a>

<p id="div3" style="visibility:hidden;opacity:0">visibility</p>

</div>

function show (ele) {

if (ele instanceof jQuery) {

$("#show").html('元素的長度的 = ' + ele.length)

} else {

alert(ele+' 不是jQuery對象')

}

</script>

//查找id = div1的DOM元素,是否可見

show( $("#div1:visible") ); //元素的長度=0

</script>

//查找id = div2的DOM元素,是否可見

show( $("#div2:visible") ); //元素的長度=0

</script>

//查找id = div3的DOM元素,是否可見

show( $("#div3:visible") ); //元素的長度=1

</script>

//查找id = div1的DOM元素,是否隱藏

show( $("#div1:hidden") ); //元素的長度=1

</script>

//查找id = div2的DOM元素,是否隱藏

show( $("#div2:hidden") ); //元素的長度=1

</script>

//查找id = div3的DOM元素,是否隱藏

show( $("#div3:hidden") ); //元素的長度=0

</script>

</body>

</html>

9、屬性選擇器：

屬性選擇器讓你可以基於屬性來定位一個元素。

可以只指定該元素的某個屬性，這樣所有使用該屬性而不管它的值，這個元素都將被定位，也可以更加明確並定位在這些屬性上使用特定值的元素，這就是屬性選擇器展示它們的威力的地方。

在這麼多屬性選擇器中[attr="value"]和[attr*="value"]是最實用的

[attr="value"]能幫我們定位不同類型的元素，特別是表單form元素的操作，比如說input[type="text"],input[type="checkbox"]等

[attr*="value"]能在網站中幫助我們匹配不同類型的文件

示例：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>屬性篩選選擇器</h2>

</div>

</div>

</div>

</div>

//查找所有div中，屬性name=p1的div元素

$(".div[name=p1]").css("border", "3px groove red");

</script>

//查找所有div中，有屬性p2的div元素

$(".div[p2]").css("border", "3px groove blue");

</script>

//查找所有div中，有屬性name中的值只包含一個連字符“-”的div元素

$(".div[name|='-']").css("border", "3px groove #00FF00");

</script>

//查找所有div中，有屬性name中的值包含一個連字符“空”和“a”的div元素

$(".div[name~='a']").css("border", "3px groove #668B8B");

</script>

</div>

</div>

</div>

</div>

//查找所有div中，屬性name的值是用imooc開頭的

$(".div[name^='imooc']").css("border", "3px groove red");

</script>

//查找所有div中，屬性name的值是用imooc結尾的

$(".div[name$=imooc]").css("border", "3px groove blue");

</script>

//查找所有div中，有屬性name中的值包含一個test字符串的div元素

$(".div[name*=test]").css("border", "3px groove #00FF00");

</script>

//查找所有div中，有屬性testattr中的值沒有包含"true"的div

$(".div[testattr!=true]").css("border", "3px groove #668B8B");

</script>

</body>

</html>

10、子元素篩選選擇器：

子元素篩選選擇器不常使用，其篩選規則比起其它的選擇器稍微要複雜點。

子元素篩選選擇器描述表：

注意事項：

:first只匹配一個單獨的元素，但是:first-child選擇器可以匹配多個：即爲每個父級元素匹配第一個子元素。這相當於:nth-child(1)
:last 只匹配一個單獨的元素， :last-child 選擇器可以匹配多個元素：即，爲每個父級元素匹配最後一個子元素
如果子元素只有一個的話，:first-child與:last-child是同一個
:only-child匹配某個元素是父元素中唯一的子元素，就是說當前子元素是父元素中唯一的元素，則匹配
jQuery實現:nth-child(n)是嚴格來自CSS規範，所以n值是“索引”，也就是說，從1開始計數，:nth-child(index)從1開始的，而eq(index)是從0開始的
nth-child(n) 與 :nth-last-child(n) 的區別前者是從前往後計算，後者從後往前計算

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>子元素篩選選擇器</h2>

<h3>:first-child、:last-child、:only-child</h3>

<a>:first-child</a>

<a>第二個元素</a>

<a>:last-child</a>

</div>

<a>:first-child</a>

</div>

<a>:first-child</a>

<a>第二個元素</a>

<a>:last-child</a>

</div>

//查找class="first-div"下的第一個a元素

//針對所有父級下的第一個

$(".first-div a:first-child").css("color", "#CD00CD");

</script>

//查找class="first-div"下的最後一個a元素

//針對所有父級下的最後一個

//如果只有一個元素的話，last也是第一個元素

$(".first-div a:last-child").css("color", "red");

</script>

//查找class="first-div"下的只有一個子元素的a元素

$(".first-div a:only-child").css("color", "blue");

</script>

<h3>:nth-child、:nth-last-child</h3>

<a>:first-child</a>

<a>第二個元素</a>

<a>第三個元素</a>

<a>:last-child</a>

</div>

<a>:first-child</a>

<a>第二個元素</a>

</div>

<a>:first-child</a>

<a>第二個元素</a>

<a>第三個元素</a>

<a>:last-child</a>

</div>

//查找class="last-div"下的第二個a元素

$(".last-div a:nth-child(2)").css("color", "#CD00CD");

</script>

//查找class="last-div"下的倒數第二個a元素

$(".last-div a:nth-last-child(2)").css("color", "red");

</script>

</body>

</html>

11、表單元素選擇器：

無論是提交還是傳遞數據，表單元素在動態交互頁面的作用是非常重要的。

jQuery中專門加入了表單選擇器，從而能夠極其方便地獲取到某個類型的表單元素

表單選擇器的具體方法描述：

注意事項：

除了input篩選選擇器，幾乎每個表單類別篩選器都對應一個input元素的type值。大部分表單類別篩選器可以使用屬性篩選器替換。比如 $(':password') == $('[type=password]')

12、表單對象屬性篩選選擇器：

除了表單元素選擇器外，表單對象屬性篩選選擇器也是專門針對表單元素的選擇器，可以附加在其他選擇器的後面，主要功能是對所選擇的表單元素進行篩選。

表單篩選選擇器的描述：

注意事項：

選擇器適用於複選框和單選框，對於下拉框元素, 使用 :selected 選擇器
在某些瀏覽器中，選擇器:checked可能會錯誤選取到<option>元素，所以保險起見換用選擇器input:checked，確保只會選取<input>元素

<!DOCTYPE html>

<html>

<head>

<style>

input {

display: block;

margin: 10px;

padding: 10px;

}

</style>

</head>

<body>

<h2>子元素篩選選擇器</h2>

<h3>enabled、disabled</h3>

<form>

</form>

//查找所有input所有可用的（未被禁用的元素）input元素。

$("input:enabled").css("border", "2px groove red");

</script>

//查找所有input所有不可用的（被禁用的元素）input元素。

$("input:disabled").css("border", "2px groove blue");

</script>

<h3>checked、selected</h3>

<form>

<option>imooc</option>

<option>aaron</option>

</select>

</form>

//查找所有input所有勾選的元素(單選框,複選框)

//移除input的checked屬性

$("input:checked").removeAttr('checked')

</script>

//查找所有option元素中,有selected屬性被選中的選項

//移除option的selected屬性

$("option:selected").removeAttr('selected')

</script>

</body>

</html>

13、特殊選擇器：this

this是JavaScript中的關鍵字，指的是當前的上下文對象，簡單的說就是方法/屬性的所有者

下面例子中，imooc是一個對象，擁有name屬性與getName方法,在getName中this指向了所屬的對象imooc

var imooc = {

name:"慕課網",

getName:function(){

//this,就是imooc對象

return this.name;

}

imooc.getName(); //慕課網

當然在JavaScript中this是動態的，也就是說這個上下文對象都是可以被動態改變的(可以通過call,apply等方法)，具體的大家可以查閱相關資料。

同樣的在DOM中this就是指向了這個html元素對象，因爲this就是DOM元素本身的一個引用。

假如給頁面一個P元素綁定一個事件:

p.addEventListener('click',function(){

//this === p

//以下兩者的修改都是等價的

this.style.color = "red";

p.style.color = "red";

},false);

通過addEventListener綁定的事件回調中，this指向的是當前的dom對象，所以再次修改這樣對象的樣式，只需要通過this獲取到引用即可

this.style.color = "red"

但是這樣的操作其實還是很不方便的，這裏面就要涉及一大堆的樣式兼容，如果通過jQuery處理就會簡單多了，我們只需要把this加工成jQuery對象

換成jQuery的做法：

$('p').click(function(){

//把p元素轉化成jQuery的對象

var $this= $(this)

$this.css('color','red')

})

通過把$()方法傳入當前的元素對象的引用this，把這個this加工成jQuery對象，我們就可以用jQuery提供的快捷方法直接處理樣式了

總體：

this，表示當前的上下文對象是一個html對象，可以調用html對象所擁有的屬性和方法。

$(this),代表的上下文對象是一個jquery的上下文對象，可以調用jQuery的方法和屬性值。

AI模型 Llama 3體驗筆記

【面試準備】又一次失敗的面試經歷，題目離譜～資深軟件測試工程師

dotnet 8 版本與銀河麒麟V10和UOS系統的 glibc 兼容性

安卓的fragment跳轉問題

SVN服務器搭建與使用二

SVN服務器搭建與使用三

SVN服務器搭建與使用一

Bootstrap菜單、導航、按鈕

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結