jQuery(2)查詢元素

2021-09-29 23:48:30 字數 1976 閱讀 5958

1.按選擇器查詢元素:$

jquery不但支援所有css選擇器,而且還增加了一批新的jquery專屬選擇器:

包括:回顧: css中的子元素過濾:

css選擇器

:first-child 作為其父元素下第乙個子元素的所有元素

:last-child

:nth-child(i)

:only-child

總結: 根據元素在其父元素內的相對下標位置選擇元素。且序號從1開始

何時: 如果按照元素在其父元素內的相對位置選擇元素時

基本過濾: jquery新增:

:first  :last

:eq(i)  :lt(i)   :gt(i)

:even  :odd

偶數   奇數

特點: 先將符合條件的元素取出,統一放入乙個集合中。按元素在集合中的編號選擇元素。且下標從0開始。

何時: 今後希望打破父元素的界限,對所有子元素統一編號,按位置查詢元素時。

總結:今後只要能用css做的效果,一定首選css做,因為css的效率比js高,而且css沒有框架和平台的相容性問題。即使jquery中的選擇器,也必須首選css選擇器,css選擇器做不了的,才被迫選擇jquery新增的選擇器。因為jquery新增的選擇器都是用js程式在底層模擬的——效率低。

[屬性名!=值] jquery新增的

選擇不包含指定屬性的元素,以及雖然包含指定屬性但屬性值不等於指定值的元素。

等效於: :not([屬性名=值])

比如: [title!=help] 可選擇兩種:

1. 選擇不包含title屬性的元素

2. 選擇雖然包含title屬性,但title屬性值不是help的元素

2.過濾(jquery新增)

過濾:用元素的內容文字作為查詢條件

(1)內容過濾

① :contains(文字) 選擇元素內容中包含指定文字的元素

② :has(選擇器) 選擇子元素中包含符合條件的元素的父元素

(2)可見性過濾

①:visible  選擇所有可見的元素

②:hidden  選擇所有隱藏的元素(display:none和)

(3)表單元素過濾選擇器:

以表單元素的型別來選擇指定的表單元素

①:input   選擇所有表單元素——input select textarea button

input   只能選擇input元素

②:型別名  每種type值都對應著乙個專門的選擇器,比如:text   :password   :radio   :checkbox   ...

3.按節點間關係查詢

1. 父子關係:

dom: 元素.parentnode

元素.children

元素.firstelementchild

元素.lastelementchild

jq中: $元素.parent();

$元素.children(["選擇器"]);

問題: children()只能查詢直接子元素,無法在所有後代中查詢

解決: $元素.find("選擇器") 可在所有後代中查詢符合條件的元素。

強調: 要用.find()必須寫選擇器

$元素.children(":first-child")

$元素.children(":last-child")

2. 兄弟關係:

dom: 元素.nextelementsibling

元素.previouselementsibling

jq中: $元素.next() 之後乙個兄弟元素

$元素.nextall(["選擇器"]) 之後所有兄弟元素

$元素.prev() 之前乙個兄弟元素

$元素.prevall(["選擇器"]) 之前所有兄弟元素

$元素.siblings(["選擇器"]) 除當前元素外,所有平級的兄弟元素(不分前後)

jQuery2元素操作

1.對元素內容的操作 文字內容 text 設定內容 即使包含html 也將被認為是普通 text 獲取內容 html內容 html 設定內容 html 獲取內容 2.對值的操作 val 設定值 val 獲取值 對於radio按鈕 val 0,1,0 認為第二個被選中 對於select option ...

Jquery 2 基礎核心

基礎核心 function jquery function alert jquery 相等 恒等 css color red function window.onload function window.onload function window.onload function document ...

jQuery 2 選擇集過濾和轉移

選擇集過濾就是在選擇標籤的集合裡面過濾自己需要的標籤 has方法的示例 function script 這是第乙個div text id mytext div 這是第二個div text button div eq方法的示例 function eq方法的使用 var div div eq 1 設定樣...