前端 jQuery選擇器

2021-09-08 15:52:45 字數 2337 閱讀 7726

jquery 使用 css 選擇器來選取 html 元素。

$("p")選取元素。

$("p.intro")選取所有class="intro"元素。

$("p#demo")選取所有id="demo"元素。

jquery 使用 xpath 表示式來選擇帶有給定屬性的元素。

$("[href]")選取所有帶有href屬性的元素。

$("[href='#']")選取所有帶有href值等於#的元素。

$("[href!='#']")選取所有帶有href值不等於#的元素。

$("[href$='.jpg']")選取所有href值以.jpg結尾的元素。

用空格分隔

$("父元素 子元素 孫元素")

基本選擇器

描 述返 回

示 例說明

#id根據給定的id匹配

單個$("#test")選取idtest的元素

.class根據給定的類名匹配

集合$(".test")選取所有classtest的元素

element根據給定的元素名匹配

集合$("p")選取所有的元素

*匹配所有元素

集合$("*")選取所有的元素

sel1,sel2,...,seln將每個選擇器匹配到的元素合併後一起返回

集合$("div,span,p.myclass")選取所有和擁有classmyclass元素

通過dom元素之間的層次關係來獲取特定的元素,例如後代元素,子元素,相鄰元素和兄弟元素等。

層次選擇器

描 述返 回

示 例說明

$("ancestor descendant")選取ancestor元素裡所有descendant(後代)元素

集合$("div span")選取下的所有的元素

$("parent>child")選取parent元素下的child(子)元素

集合$("div>span")選取元素下元素名是的子元素

$("prev+next")選取緊接prev元素後的next元素

集合$(".one+div")選取classone的下乙個兄弟元素

$("prev~siblings")選取prev元素之後的所有siblings元素

集合$("#two~div")選取idtwo的元素後面所有兄弟元素

可以用next()方法來代替$("prev+next")選擇器,即$(".one+div")$(".one").next("div")等效。

可以用nextall()方法來代替$("prev~siblings")選擇器,即$(".one~div")與$(".one").nextall("div")等效。

前端 jQuery選擇器

jquery selectorstitle src script body header container style head jqueryh1 header container heading1 heading oneh1 para1 hellop class heading2 heading...

初識前端 jQuery的選擇器

選擇器方法 說明id選擇器 id屬性值 獲取id屬性為指定值的元素 如果出現同名id屬性,只會獲取第乙個 元素選擇器 標籤名 元素名 獲取指定標籤名的所有元素 類選擇器 class屬性值 獲取class屬性為指定值的所有元素 通用選擇器 獲取頁面中的所有元素 屬性選擇器 屬性名 屬性值 獲取設定過指...

JQuery選擇器 選擇器簡介

在開始學習jquery選擇器之前,有必要了解一下css 層疊樣式表 技術。css是一項出色的技術,它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構,只需通過新增不同的css規則,就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...