jquery 常見選擇器

2021-08-26 21:47:21 字數 3225 閱讀 4617

1、$(…)

$() 一切的核心,可以跟4種引數

$(expression),比如$(「#id」)、$(「.class」)等,返回jquery物件,或者jquery物件的集合

$(html),比如$(「hello world」),返回jquery物件,或者jquery物件的集合

$(element),比如$(document.body),返回jquery物件,或者jquery物件的集合

$(*),所有元素

2、jquery object accessors

jquery.index(element),返回該jquery物件在集合中的索引

jquery.each(function),遍歷jquery物件集合,在每個物件上執行function函式,function callback(index, domelement);

jquery.size(),返回jquery物件集合的大小

jquery.length,相當於size()方法

jquery.get(),獲取原生domelement物件的array

jquery.get(index),獲取原生domelement物件

jquery.eq(position),獲取jquery物件集合中的乙個jquery物件

3、data相關方法

jquery.data(name)

jquery.data(name, value)

jquery.removedata(name)

4、選擇符

multiple(selector1, selector2),可以選擇多個元素或者表示式,包裝成jquery物件的集合

例子:$(「div,span」)

id(id)

例子:$(「#id」)

class(class)

例子:$(「.class」)

element(element)

例子:$(「div」)

all例子:$(「*」)

descendant

例子:$(「table tr td」)

child(parent, child)

例子:$(「#id > span」),和上乙個descendant的區別在於,descendant只要是後代就會被選中,而child必須是直接子節點,不包括孫子節點

next(prev, next)

siblings(prev, siblings)

例子:$(「#prev ~ div」),選中的是#prev之後的所有div標籤,返回jquery物件的集合,有點像next,但是範圍更大

basic filters

$(「:header」),選中所有header,包括等

$(「tr:odd」),選中所有奇數行

$(「tr:even」),選中所有偶數行

$(「:animated」),選中所有當前有特效的元素,$(「div:animated」),選中當前所有有特效的

$(「tr:first」),選中第一行

$(「tr:last」),選中最後一行

$(「input:not(:checked)」),選中所有沒有「checked」的input元素

$(「td:gt(4)」),選中所有index是4之後的td

$(「td:lt(4)」),選中所有index是4之前的td

$(「td:eq(4)」),選中index是4的td,可以用$(「td」).eq(4)來實現同樣的效果

content filters

$(「div:contains(『john』)」),選中所有包含」john」字串的div

$(「td:empty」),選中所有內容為空的td

$(「div:has(p)」),選中包含有元素的元素,返回jquery物件集合

$(「td:parent」),選中所有包含子節點的元素,包括文字也可以算是子節點

visibility filters

$(「span:hidden」),選中所有隱藏的

$(「span:visible」),選中所有可見的

attribute filters

$(「div[id]「),選中包含id屬性的元素

$(「input[name$='letter']「),選中包含某個屬性的元素,這個屬性名是以』letter』結尾的

$(「input[name^='letter']「),選中包含某個屬性的元素,這個屬性名是以』letter』開頭的

$(「input[name*='man']「),選中包含某個屬性的元素,這個屬性的屬性名裡包含』man』

$(「input[name='newsletter']「),選中包含乙個屬性的元素,這個屬性的名字是』newsletter』

$(「input[name!='newsletter']「),選中所有不包含』newsletter』屬性的元素

$(「input[id][name$='man']「),選中包含id屬性,和以』man』結尾屬性的元素

child filters

$(「ul li:nth-child(2)」),選中自身是元素的第二個子節點的元素,注意這個計算是從1開始的,不是從0開始

$(「div span:firstchild」),選中自身是元素的第乙個子節點的元素

$(「div span:lastchild」),選中自身是元素的最後乙個子節點的元素

$(「div span:onlychild」),選中自身是元素的唯一子節點的元素

forms

$(「:button」),所有元素,和元素

$(「form :checkbox」),選中所有標籤下的,不過這樣會比較慢,官方建議使用$(「input:checkbox」)

$(「:file」),選中所有

$(「:hidden」),選中所有隱藏元素,以及

$(「:input」),選中所有

$(「:text」),選中所有

$(「:password」),選中所有

$(「:radio」),選中所有,不過這樣會比較慢,建議使用$(「input:radio」)

$(「:image」),選中所有

$(「:reset」),選中所有

$(「:submit」),選中所有

form filters

$(「input:enabled」),選中所有enabled的元素

$(「input:disabled」),選中所有disabled的元素

$(「input:checked」),選中所有checked的元素

$(「input:selected」),選中所有selected的元素

jQuery常見選擇器

以下內容都是我讀 鋒利的jquery 的筆記,記錄下來,沒事多看看。id為one,class為one的div class為mini id為two,class為one,title為test的div class為mini,title為other class為mini,title為test class為m...

jQuery常見選擇器

id id選擇器 div 元素選擇器 classname 類選擇器 classname,classname1,id1 組合選擇器 id classname 子元素選擇器 id classname 後代元素選擇器 id classname 緊鄰下乙個元素選擇器 id classname 兄弟元素選擇器...

jQuery中選擇器(常見)

null zgx 2018 01 17 16 49 22 39329 收藏 10 分類專欄 jquery 文章標籤 jquert 前端一 基本選擇器 基本選擇器是jquery中最常用也是最簡單的選擇器,它通過元素的id class和標籤名等來查詢dom元素。1 id選擇器 id 描述 根據給定的id...