jQuery 選擇器 整理

2021-08-19 04:54:10 字數 4266 閱讀 5289

一、 css選擇器

1.查詢元素的方法按照

形式來寫

2.支援多級查詢:

形式大概在:

3.用jq給css 新增樣式

css()

即4.current 當前

5 .next() 返回後乙個同級元素

這個返回的實際上就是第二個li;

6.parent()取相應的父元素

7.siblings() 取同級元素的集合(不包括自己本身)

實際上去得的是13,14兩個li,它和next()的區別在於 乙個是去集合另乙個是取乙個元素

4. children()取得所有子元素

它可以有引數 結果是取得符合條件的子代元素

$("#ul1").children().css('background',"red");//取得的是前四個

$("#ul1").children('.li2').css("background","yellow"//取得是最後乙個

5.remove()

6.toggleclass() 函式

沒有類則是建立乙個類,如果有則反選。

7.:eq()選擇器

例如 傳-1取得是最後乙個dom元素。

html()函式,是jq的語法,不穿函式的時候用來取得這個dom函式的值,傳值的時候會覆蓋原有的html結構可以是這種東西。

執行的東西應該是乙個$元素,而不是乙個$陣列

8.:even

例如這個函式選擇的是所有奇數的dom元素,1,3,5,7,需要注意的是這個肯定會回傳乙個陣列,所以不能使用像html()這種只能操作乙個的函式。

9.屬性選擇器:

選中 含有aa這個單詞的元素?

選中以aa為結尾的 dom元素

選中以aa為開頭的dom元素

選中不含有aa 的dom元素

//選中以aa 為字首的dom 元素?

10.

1.$("#div h1:first-child")

這句話的意思是選中div下面的第乙個孩子而且必須是h1。

2.$("#div h1:first of type")

選中div下第乙個型別是h1的dom 元素

3.$("#div h1:nth-child(2n)")選擇所有偶數

4.$("#div h1:nth-child(2n+1)")選擇所有奇數

二jq 擴充套件選擇器

1.:animated

選擇正在執行動畫效果的dom元素

$("div:animated").toggleclass("colored");

2.eq()選擇器

例如 傳-1取得是最後乙個dom元素。

html()函式,是jq的語法,不穿函式的時候用來取得這個dom函式的值,傳值的時候會覆蓋原有的html結構可以是這種東西。

執行的東西應該是乙個$元素,而不是乙個$陣列

3.:even

例如這個函式選擇的是所有奇數的dom元素,1,3,5,7,需要注意的是這個肯定會回傳乙個陣列,所以不能使用像html()這種只能操作乙個的函式。

4.:odd

選擇所有偶數的dom元素。

5.:first

匹配第乙個元素

6. :gt(index)

var $div1 =$("#div1 li:gt(0)");

$div1.each(function());

索引從零開始,所以這個是操作所有大於index(0+1)的元素。

7.:header

var $div1 = $("div1:header")

選擇所有header標題元素 類似於h1,h2,h3,h4。

8.:lang(lang)

$( "div:lang(es-es)" ).addclass( "spain" );

選擇指定語言的所有元素

對於html元素,語言值由lang屬性決定,也可能由來自meta元素或http頭資訊決定。

9.:last

$("div:last").css("background","red");

選擇最後乙個div

10.:it(index)

var div1 = $("div:it(0)");

$div1.each(function());

用於操作所有小於index+1的dom元素。

11.:not(selector)

$("input:not(:checked) + span").css("background-color", "yellow");

選擇除了選定元素之外的其他元素。不推薦使用沒有.not()好用。

12.:html

選擇該文件的根元素

在html中,文件的根元素,和$(":root")選擇的元素一樣, 永遠是元素

13.:target

選擇由文件uri的格式化識別碼表示的目標元素

如果文件的uri包含乙個格式化的識別符號,或hash(雜湊), 然後:target選擇器將匹配id和識別符號相匹配的元素。 例如,給定的uri $( "p:target" ),將選擇元素。

14.:empty

var $div1 = $("#div1 li:empty").css("background","red");

選擇空元素的jq元素

15:contains(text)

var $div1 = $("#div1 li:contains(2)").css("background","red");

選擇內容中含有text 的所有jq元素

15.:parent

var $div1 = $("#div1 li:parent").css("background","red");

選擇任何有子元素或者文字的父元素

16.:hidden

選中所有隱藏元素

17.:visible

選中所有可見元素

18.:button

選中所有按鈕

19.:checkbox

選中所有核取方塊的jq元素

20.:checked

$(":checked").val("haha")

選擇所有被選中的單選框,並且單選框不能新增背景和邊框,用於單選框和核取方塊,下拉框用:selected

21.js 物件

分三種jq物件 就是個自定義物件,但可以當做陣列來操作。

22. dom 物件和jq 物件互換

1.dom物件 換成jq 物件

$btn = $("obtn")

console.log($btn);

2.jq 物件轉成 dom 物件

兩種方式

1..get(0) 因為jq 物件相當於乙個陣列

console.log($btn.get(0));

或者console.log($btn[0]);

23.api 函式 就是那些語法

24.js 命名規範

1.o 代表原生的

2.$代表jq 物件

25.屬性選擇器:

選中 含有aa這個單詞的元素?

選中以aa為結尾的 dom元素

選中以aa為開頭的dom元素

選中不含有aa 的dom元素

//選中以aa 為字首的dom 元素?

26.

1.$("#div h1:first-child")

這句話的意思是選中div下面的第乙個孩子而且必須是h1。

2.$("#div h1:first of type")

選中div下第乙個型別是h1的dom 元素

3.$("#div h1:nth-child(2n)")選擇所有偶數

4.$("#div h1:nth-child(2n+1)")選擇所有奇數

27. 我有乙個ul 裡面各種li li不確定多少個,把他橫過來,根據裝置寬度不同,間隙相同,所有li 均分,第一列在最左邊 ,最後一列在最右邊......

1. 檢測不同的裝置用css3響應式設計

28.each()函式

var $div1 =$("#div1 li");

$div1.each(function());

用來遍歷jq元素但是需要用this來指向,並且那個$一定不要忘,是$(this)並不是this。

30..val(value)函式

想乙個jq元素中新增value 屬性 value=value(自己設的東西)。

31.1.toggle 函式

不傳引數的時候

toggle();

改變這個元素的顯示或者隱藏

toggle可以傳遞乙個函式來控制是隱藏還是顯示

這個引數是乙個布林值

jQuery選擇器整理

jquery物件訪問 1.each callback 以每個匹配的元素作為上下文來執行乙個函式,return false 停止迴圈 return true 跳至下乙個迴圈。來個例項 img each function 2.size 與length相同,都是返回jquery物件中元素的個數。img s...

JQuery選擇器 選擇器簡介

在開始學習jquery選擇器之前,有必要了解一下css 層疊樣式表 技術。css是一項出色的技術,它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構,只需通過新增不同的css規則,就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...

Jquery選擇器 基本選擇器

jquery作為我們常用前端工具之一,實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分,它必須被兩個反斜槓轉義 引數 id,用於搜尋的,通過元素的 id 屬性中給定的值。示例 查...