jQuery選擇器 元素查詢 節點操作

2021-09-12 18:58:09 字數 2445 閱讀 7352

jquery使用的api

表單驗證外掛程式,官網

www.jqueryui.com jqueryui官方外掛程式,功能多且全面

是一組基於jquery的ui外掛程式集合,demo

html、css和js框架,用於開發響應式布局、移動裝置優先的web專案

獲取jquery物件jquery(選擇器|dom節點,上下文物件)==>$(css選擇器|dom節點,上下文物件)

(1) 上下文物件可以是css選擇器、jquery物件

(2) jquery物件只能用jquery的方法

(3) jquery物件得到的是類陣列

a) length 若length為0,說明獲取不到該jquery物件

b) jquery 得到版本號,用於判斷是否為jquery物件

c) [索引] 獲取dom節點

dom節點與jquery物件的轉換

(1) jquery物件轉成dom節點

[索引]

(2) dom節點轉成jquery物件

jquery(dom節點)

延遲**執行

a) 第一種方式:jquery( function($){} )

b) 第二種方式:jquery(document).ready(function(){})

1. 基本選擇器

2. 表單選擇器

:text

:radio       //匹配所有單選按鈕

:checkbox     //匹配所有複選按鈕

:selected     //獲取已選擇的option元素

:checked     //匹配所有被選中的元素(核取方塊、單選框等,option選項)

3. 可見性

:hidden     //匹配所有不可見元素(display:none),或者type為hidden的元素

:visible     //匹配所有可見元素

4. 篩選選擇器

:odd/:even, :gt(n)/:lt(n)  篩選範圍(索引支援負數)

例:$("#output li:even").css(『background』, 『blue』);

:contains(歐巴馬) 篩選出包含「歐巴馬」這三個字的元素

5. 篩選方法

(1) first() / last()           獲取集合中第乙個/最後乙個元素

(2) eq(index|-index)        獲取第n個元素,n支援負數(表示從後面查詢)

(3) filter(選擇器|jq物件|dom節點)   縮小匹配範圍,將被匹配到的jq物件進行過濾,得到過 濾後的jq物件

(4) not(選擇器|jq物件|dom節點)   縮小匹配範圍,將被匹配到的jq物件進行過濾,除去過濾後 的jq物件

(5) has(選擇器|dom節點)      將匹配到的jq物件進行過濾,匹配到有這個兒子的jq物件

例:$("#output li").has(".aa").css(『background-color』,『red』);

1. 查詢子元素

2. 查詢父級元素

3. 查詢兄弟元素

1. 增刪改

(1) 建立jquery物件

$(''

);$(

'生成乙個div')

;

② 外部插入內容(新增為兄弟元素)

a) after: 在元素後面插入內容

b) before: 在元素前面插入內容

c) insertafter(兄弟元素)

d) insertbefore(兄弟元素)

(3) 元素刪除

① remove() 刪除元素

② empty() 清空內容

(4) 元素複製

① clone([event[,deepevent]])

a) event:(true 或 false)是否複製元素的行為,預設為false

b) deepevent: (true 或 false)是否複製子元素的行為,預設為event的值

2. 盒模型屬性

(1) offset() 獲取匹配元素相對於根元素的偏移量

返回乙個物件,包含當前元素的top,left值

(2) position()

獲取匹配元素相對(有定位屬性)父元素的偏移量,如果沒有定位父級,則相對於根元素(html),返回乙個物件,包含當前元素的top,left值。

(3) width(v) = width

取值/賦值,當傳入v時,相當於css(『width』,v)

(4) innerwidth() = width + padding; <==> clientwidth

(5) outerwidth() = width + padding + border; <==> offsetwidth

(6) outerwidth(true) = width + padding + border + margin

jQuery查詢節點 選擇器

jquery通過選擇器來完成節點的查詢 1 基本選擇器 通用 所有的選擇器 使用 號來表示。標籤選擇器 標籤名 div 使用標籤名字來定位 id選擇器 id 類選擇器 class 群組選擇器 並集 table,td 所有的table和td都被選擇 組合選擇器 交集 p.c1 標籤為p而且他的clas...

JQuery元素選擇器

1.基本選擇器 標籤選擇器 元素選擇器 語法 html標籤名 獲得所有匹配標籤名稱的元素 id選擇器 語法 id的屬性值 獲得與指定id屬性值匹配的元素 類選擇器 語法 class的屬性值 獲得與指定的class屬性值匹配的元素 並集選擇器 語法 選擇器1,選擇器2.獲取多個選擇器選中的所有元素 2...

jquery應用 查詢元素相關(選擇器)

子元素選擇器 大前提 所選的 都是 修飾div的.div 是它父元素 沒有限定 的第乙個孩子嗎?是最後乙個孩子嗎?是第index個孩子嗎?是唯一的孩子嗎?div first child 匹配所有為第乙個元素的div div last child 匹配所有為最後乙個元素的div div nth chi...