jQuery系列 二 jQuery選擇器 過濾器

2022-08-29 05:06:11 字數 1215 閱讀 2818

使用jquery選擇器選取dom元素,如使用id選擇器、類選擇器。但jquery選擇器很強大,支援多種。

1、使用多個類選取乙個或多個元素:選取這些同時擁有多個類的元素

$(".class1.class2").css("display","block"); //將同時具有類class1和class2的元素以塊元素顯示。

2、使用子元素選擇器選取元素:通過》選擇符選擇父元素的直接子元素

$("body > div").css("display","block"); //將body下的直接子元素div以塊元素顯示。

3、使用後代元素選擇器選取元素

$("body div").css("display","block"); //跟選擇直接子元素不同的是沒有》選擇符,直接以空格隔開。可以取到body下的所有div元素

4、組合選擇器:同時選取多種型別的元素

$(".class1,.class2")..css("display","block"); //以逗號隔開,選擇匹配class1或class2的元素

二、過濾器

1、:even和:odd:過濾生成條紋**

$("tr:even").css("background","#cccccc");

$("tr:odd").css("background","#eeeeee");

2、:first和:last

$("ul li:first").css("background","#eeeeee"); //將ul的後代元素第乙個li元素的背景色設定為#eeeeee

$("ul li:last").css("background","#cccccc"); //將ul的後代元素最後乙個li元素的背景色設定為#cccccc

3、:empty

$(".error:empty").css("display","none"); //如果.error div為空,就將它隱藏起來

4、:contains

$("tr td:contains('hello')").css("border","1px solid #ccc"); //用.contains過濾器找出**中包含hello字樣的單元格,並為其新增實線

5、選擇屬性值

$("input[name='username']").addclass("class1"); //選擇name=username的input文字框,為其新增類class1

這個有很多種選法,裡面就是[attr=value]這種配對方式。

JQuery學習系列篇(二)

hover over out over滑鼠移動到元素上要觸發的函式,out滑鼠移出元素要觸發的函式。2.togger 如果元素是可見的,切換為隱藏的 如果元素是隱藏的,切換為可見的。fn 在動畫完成時執行的函式,每個元素執行一次。2 陣列和物件操作 grep array,fn,invert 使用過濾...

jQuery原始碼學習筆記系列 二

首先這是之前提到過的匿名函式的第二個實參,乙個函式,用於傳遞給之前的factory的形參,而factory在存在window變數的情況下,將會執行factory global 而這個global看第乙個實參表示式可以知道是this或者是window 當然,這裡會有差別,暫時不談 先撇開這,往下。首先...

jQuery基礎系列(一) jQuery選擇器

jquery選擇器可以歸類分為基本選擇器,層級選擇器,過濾選擇器和表單選擇器。通過jquery選擇器我們能夠更快更方便的選擇到對應的元素或者元素組,進行相關dom節點操作。一 jquery基本選擇器1.id選擇器 id 2.class選擇器 class eg blue 3.element選擇器 el...