每天學習點jquery

2022-08-18 00:15:12 字數 4240 閱讀 7673

一、jquery選擇器

1、根據給定的id匹配乙個元素(如果選擇器中包含特殊字元,可以用兩個斜槓轉義)id選擇器

舉例:html** id="notme"

id="mydiv"

jquery** $("#mydiv");

結果[ id="mydiv"

]

查詢含有特殊字元的元素

html**

jquery** #foo\\:bar

#foo\\[bar\\]

#foo\\.bar

2、根據給定的元素名匹配所有的元素(element選擇器)

舉例:html** div1

div2

span

jquery** $("div");

結果:[ div1

, div2

]

3、根據給定的類匹配元素(.class選擇器)

舉例:html** div class="noteme"

div class="myclass"

span class="myclass"

jquery**:$(".myclass");

結果:[ div class="myclass"

, span class="myclass" ]

4、匹配所有元素(*選擇器)

舉例:html**:div

span

pjquery**:$("*") 

5、selector1,selector2,selectorn(將每乙個選擇器匹配到的元素合併後一起返回)

舉例:html**:div

p class="myclass"

span

p class="notmyclass"

jquery**:$("div,span,p.myclass");

結果:[ div

, p class="myclass"

, span ]

6、在給定的所有祖先元素匹配所有的後代元素

html**:

jquery**:$("form input")

結果;[ , ]

7、在給定的所有父元素下匹配所有的子元素

舉例: html**:

jquery**:$(" form > input")

結果:[ ]

8、匹配所有緊跟在prev元素後的next元素

舉例: html**:

jquery**:$("label + input")

結果:[ , ]

9、匹配 prev 元素之後的所有 siblings 元素

舉例:html**:找到所有與表單同輩的 input 元素

jquery**:$("form ~ input");

結果:

9、:first 獲取第乙個元素

舉例: html**:

jquery**:$('li:first');

結果:list item 1

10、:last()獲取最後的元素

舉例:html**:

jquery**:$('li:last')

結果:[ list item 1 ]

11、:not(selector) 去除所有與給定選擇器匹配的元素

用於篩選的選擇器

jquery**:$("input:not(:checked)")

12、:event匹配所有索引值為偶數的元素,從 0 開始計數

舉例:html**:

header 1

value 1

value 2

jquery**:$("tr:event")

結果:[ header 1

, value 2

]

13、odd 匹配所有索引值為奇數的元素,從 0 開始計數

舉例:html**:

header 1

value 1

value 2

jquery**:$("tr:odd")

結果:[ value 1

]

14、:eq(index)匹配乙個給定索引值的元素 從 0 開始計數

舉例:html**:

header 1

value 1

value 2

jquery**:$("tr:eq(1)")

結果:[ value 1

]

15、:gt(index) 匹配所有大於給定索引值的元素 從 0 開始計數

舉例:html**:

header 1

value 1

value 2

jquery**:$("tr:gt(0)")

結果:[ value 1

, value 2

]

16、:lt(index) 匹配所有小於給定索引值的元素 從 0 開始計數

舉例:html**:

header 1

value 1

value 2

jquery**:$("tr:lt(2)")

結果:[ header 1

, value 1

]

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

舉例:html**:

contents 1

contents 2

jquery**:$(":header").css("background","#eee")

結果:[ ,]

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

舉例:html**:run

只有對不在執行動畫效果的元素執行乙個動畫特效

jquery**:$("#run").click(function(), 1000); });

19、:focus觸發每乙個匹配元素的focus事件

舉例:html**:當頁面載入後將 id 為 'login' 的元素設定焦點:

jquery**:$("#id:focus")

20、:contains匹配包含給定文字的元素

舉例:html**:john resig

george martin

malcom john sinclair

j. ohn

jquery**:$("'div:constains('join'))

結果:[ john resig

, malcom john sinclair

]

學習jquery,每天進步一點點

3個月實習學習web前端,加油 1.jquery基本語法 selector action 2.jquery函式的第一句 document ready function 3.jquery元素選擇器 p 選擇p元素 p.intro 選擇所有class intro 的p元素 p intro 選擇所有id ...

每天學習點 html5

每天都需要不斷學習不斷進步,作為新人雖然學習的東西雜亂了點,但是有一顆學習進步的心。幾天就學習一下html5是什麼?接下來我會想我要看關於html5書籍,但是又不知道看什麼,那麼久上網查了一些,先記錄一下吧,呵呵。html5從入門到精通 這本書類似html5手冊,詳細介紹了各個標籤的意思及用法。ht...

每天學習一點 Android

每天都變著花樣的學東西,今天呢,看了看android教程和一些android開 壇,先了解一下皮毛,再決定到底怎麼學習。anoid早期由 android之父 之稱的andy rubin創辦,google於2005年併購了成立僅22個月的高科技企業android,展開了簡訊 手機檢索 定位等業務,基於...