第二章 選擇器 jQuery篇

2021-09-24 20:32:55 字數 3479 閱讀 5860

目錄

1.基本選擇器

1.1id選擇器

1.2型別選擇器(element)

1.3類選擇器

1.4通配選擇器

1.5分組選擇器

2.結構選擇器

2.1層級選擇器

2.2.1包含選擇器

2.2.2子選擇器(parent  >  child)

2.2.3兄弟選擇器(prev ~ siblings)

3.子元素選擇器

4.過濾選擇器

4.1定位過濾器

5.內容選擇器

6、可見過濾器

7.屬性選擇器

8、表單選擇器

8.1基本表單選擇器

8.2高階表單選擇器

9.優化jquery選擇器

10.原生選擇器

11.結語

jquery(「#id」)    $(「#id」)

getelementbyid();

id表示標籤id的屬性值

jquery(「element」)  $(「element」)

getelementsbytangname(); 

element表示標籤的名字

jquery(「.classname」);    $(「.classname」)

classname表示標籤class的屬性值,注意

getelementsbyclassname();

$(「*」) 

getelementsbyidtagname();

指定範圍內所有的標籤元素

$(「selector1,selector2,…….selectorn」)

ancestor   descendant

$(「form input」)

在給定的祖先元素下匹配所有後代(在form表單下匹配所有的input元素)

$(「labe + input」)

匹配所有pre元素後面的next元素(匹配所有跟在label後面的input元素)

匹配所有與prev同級的siblings元素

$(「form ~ input」)

匹配表單同輩的input元素

:first

:last

:not 去除所有與給定選擇器匹配的元素

$(「input:not(:checked)」)可以匹配到所有為被選中的input元素

:even 匹配索引值為偶數的值

:odd  匹配索引值為基數的值

:eq 匹配乙個給定索引值的元素,從0開始計算。$(「tr:eq(0)」)

:gt     匹配所有大於給定索引值的元素

$(「tr:gt(0)」)匹配第二個及後面的元素

:lt     匹配所有小於給定索引值的元素,$(「tr:lt(1)」)匹配到第乙個tr

:header  匹配如h1,h2,h3之類的標題元素

:animated 匹配所有正在執行動畫效果的元素

:contains匹配給定的文字元素

$(「div:contains()」)匹配所有包含的div元素

:empty匹配所有不包含子元素或文字的空元素

:has匹配所有含有選擇器匹配的元素的元素

$(「div:has(p)」)匹配所有包含p元素的div元素

:parent匹配含有子元素或者文字的元素

:hidden匹配所有不可見元素,或者typehidden的元素

$(「p:hidden」).show();顯示所有不可見或typehiddenp元素

:visible匹配所有的可見元素

案例: 

修改表單域中的value值$(「#test:radio」).val(「修改後的單選按鈕」)

$(「#test:hidden」).val(「修改後的隱藏域」)

#test為id的屬性值

案例:$(「#test:disabled」).val(「不可用」);

$(「#test:enabled」).val(「可用」);

$(「#test:checked」).removeattr(「checked」)

//removeattr();從表單中移除屬性

首頁

娛樂queryselector();  返回乙個元素物件

document.queryselector(「.content ul  li」);  獲得第乙個li元素

queryselectorall(); 返回乙個元素集合

document.queryselectorall(「.content ul li」);  獲得所有li元素

實際開發中常見的為id選擇器與類選擇器,其他稍作了解

第二章 jQuery選擇器

css選擇器 選擇器語法 描述示例 標籤選擇器 e 以文件元素作為選擇器 td a id選擇器 id 以文件元素的唯一識別符號id作為選擇器 note 類選擇器 e.classname 以文件元素的class作為選擇器 div.note dream 群組選擇器 e1,e2,e3 多個選擇符應用同樣的...

第二章《jQuery選擇器(一)》

在學習jquery前,先要弄明白dom物件與jquery物件的區別 簡單通俗理解的話可以認為dom物件就是頁面中的某乙個具體的文字標籤,而jquery物件是基於dom物件之上的,我們可以把某個dom物件轉化為jquery物件。只有是jquery物件才能使用jquery中的方法以及屬性。例 docum...

鋒利的jQuery第二章 選擇器

鋒利的jquery第二章 選擇器 id為one,class為one的div class為mini id為two,class為one,title為test class為mini,title為other class為mini,title為test class為mini class為mini class為...