jQuery學習筆記二 選擇器

2021-07-15 15:58:16 字數 1972 閱讀 4201

選擇器是jquery的核心,它幫助我們快速定位到乙個或多個dom節點。

// 查詢:

var div = $('#abc');

#abc#開頭。返回的物件是jquery物件。jquery物件類似陣列,它的每個元素都是乙個引用了dom節點的物件。

// 如果id為abc的存在,返回的jquery物件如下

["abc">...

]// 如果id為abc的不存在,返回的jquery物件如下

jquery的選擇器不會返回undefined或者null,好處是不必在下一行判斷if (div === undefined)

jquery物件和dom物件之間可以互相轉化:

var div = $('#abc'); // jquery物件

var divdom = div.get(0); // 假設存在div,獲取第1個dom元素

var another = $(divdom); // 重新把dom包裝為jquery物件

var ps = $('p'); // 返回所有節點

ps.length; // 數一數頁面有多少個節點

按class查詢注意在class名稱前加乙個.

var a = $('.red'); // 所有節點包含`class="red"`都將返回

// 例如:

// "red">...

// "green red">...

查詢同時包含red和green的節點:

var a = $('.red.green'); // 注意沒有空格!

// 符合條件的節點:

// "red green">...

// "blue green red">...

var email = $(

'[name=email]'); // 找出<??? name="email">

var passwordinput = $(

'[type=password]'); // 找出<??? type="password">

var a = $(

'[items="a b"]'); // 找出<??? items="a b">

當屬性的值包含空格等特殊字元時,需要用雙引號括起來。

按屬性查詢還可以使用字首查詢或者字尾查詢:

var icons = $('[name^=icon]'); // 找出所有name屬性值以icon開頭的dom

// 例如: name="icon-1", name="icon-2"

var names = $('[name$=with]'); // 找出所有name屬性值以with結尾的dom

// 例如: name="startswith", name="endswith"

查詢inputnameemail的元素:

var emailinput = $(

'input[name=email]'); // 不會找出"email">

根據tag和class來組合查詢:

var tr = $('tr.red'); // 找出"red ...">...

多項選擇器就是把多個選擇器用,組合起來一塊選:

$('p,div'); // 把和都選出來

$('p.red,p.green'); // 把和都選出來

jQuery筆記 選擇器 二

1.選擇器練習 1 查詢ul中的元素的內容格式 ul li xx text xx 代表方法 比如 獲取到第一元素,然後獲取當中的值 ul li first text 獲取最後乙個元素,然後獲取當中的值 ul li last text 查詢索引號是奇數的標籤,索引號從1開始 ul li odd siz...

JQuery 選擇器學習筆記

img removeattr title 移除指定元素屬性值 p last addclass lastp addclass 為指定元素新增class,p last 為最後乙個p元素 p first addclass firstp 同上,只不過是第乙個p元素 p last removeclass 移除...

jQuery學習筆記 選擇器

3 jquery四種常見寫法 第一種 function 第二種 document ready function 第三種 jquery function 第四種 jquery document ready function 注 比js裡window.onload事件高效,因為不需要整個文件載入結束去執...