jQuery基礎知識 選擇器與效果

2022-09-15 23:03:25 字數 2978 閱讀 5520

$(this).hide()-----隱藏當前元素 

$("p").hide()------隱藏所有段落 

$(".test").hide()--隱藏所有class="test"的元素 

$("#test").hide()--隱藏所有id="test"的元素

文件就緒函式 

$(document).ready(function() )

jquery選擇器 

選擇器允許對元素組或單個元素進行操作。

學習jquery選擇器的關鍵是學習jquery選擇器如何準確地選取你希望應用效果的元素 

jquery元素選擇器和屬性選擇器允許你通過簽名、屬性名或內容對html元素進行選擇。 

選擇器允許你對html元素組或單個元素進行操作。 

在html dom術語中: 

選擇器允許你對dom元素組或單個dom節點進行操作。

jquery元素選擇器 

jquery使用css選擇器來選取html元素 

$("p")選取元素 

$("p.intro")選取所有class="intro"的元素 

$("p#demo")選取所有id="demo"的元素 

jquery屬性選擇器 

jquery使用xpath表示式來選擇帶有給定屬性的元素。 

$("[href]")選取所有帶有href屬性的元素。 

$("[href='#']")選取所有帶有href值等於"#"的元素。 

$("[href!='#']")選取所有帶有href值不等於"#"的元素。 

$("[href$='.jpg']")選取所有href值以".jpg"結尾的元素。 

jquery css選擇器 

jquery css選擇器可用於改變html元素的css屬性。

jquery效果 

1.jquery隱藏/顯示 

hide()----隱藏被選的元素 

show()----顯示被選的元素 

toggle()--對被選元素進行隱藏和顯示的切換 

2.jquery淡入淡出 

fadein()------逐漸改變被選元素的不透明度,從隱藏到可見--$(selector).fadein(speed,callback); 

可選的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。 

可選的 callback 引數是 fading 完成後所執行的函式名稱。 

fadeout()-----逐漸改變被選元素的不透明度,從可見到隱藏--$(selector).fadeout(speed,callback); 

fadetoggle()--可以在 fadein() 與 fadeout() 方法之間進行切換。--$(selector).fadetoggle(speed,callback); 

fadeto()------把被選元素逐漸改變至給定的不透明度--$(selector).fadeto(speed,opacity,callback); 

必需的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。 

fadeto() 方法中必需的 opacity 引數將淡入淡出效果設定為給定的不透明度(值介於 0 與 1 之間)。 

可選的 callback 引數是該函式完成後所執行的函式名稱。 

3.jquery滑動 

slidedown()----用於向下滑動元素--$(selector).slidedown(speed,callback); 

可選的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。 

可選的 callback 引數是滑動完成後所執行的函式名稱。 

slideup()------用於向上滑動元素--$(selector).slideup(speed,callback); 

slidetoggle()--可以在 slidedown() 與 slideup() 方法之間進行切換--$(selector).slidetoggle(speed,callback); 

4.jquery動畫 

jquery animate()方法允許建立自定義的動畫。 

語法: 

$(selector).animate(, speed, callback); 

必須的params引數定義形成動畫的css屬性 

可選的speed引數規定效果的時長。它可以取以下值:"slow"、"fast"或毫秒 

可選的callback引數是動畫完成後所執行的函式名稱。

5.jquery stop() 

stop()方法用於在動畫或效果完成前對它們進行停止。 

stop()方法適用於jquery效果函式,包括滑動、淡入淡出和自定義動畫。 

語法: 

$(selector).stop(stopall, gotoend); 

可選的stopall引數規定是否應該清除動畫佇列。預設是false,即僅停止活動的動畫,允許任何排入佇列的動畫向後執行。 

可選的gotoend引數規定是否立即完成當前的動畫。預設是false。

6.jquery callback 

callback函式在當前動畫100%完成之後執行。 

語法: 

$(selector).hide(speed, callback) 

callback引數是乙個在hide操作完成後被執行的函式。 

如果您希望在乙個涉及動畫的函式之後來執行語句,請使用 callback 函式。 

7.jquery chaining 

通過jquery,你可以把動作/方法鏈結起來。 

chaining允許我們在一條語句中允許多個jquery方法(在相同的元素上)。 

例如:$("#p1").css("color", "red").slideup(2000).slidedown(2000); 

或 $("#p1").css("color", "red") 

.slideup(2000) 

.slidedown(2000);

jQuery基礎知識2 jQuery選擇器

jquery選擇器是其核心功能,按照選擇的元素類別可以分為4種 id選擇器 根據元素id選擇 divid 選擇id為divid的元素 標籤選擇器 根據元素的名稱選擇 a 選擇所得元素 css樣式類選擇器 根據應用到dom元素的css類進行選擇 beg 選擇所有css類為beg的元素 萬用字元選擇器 ...

JQuery的基礎知識和選擇器

jquery官方 jquery 1.4.min.js和jquery 1.4.js的區別?jquery 1.4.min.js 如果伺服器開啟gzip壓縮後,大小將變為18kb,主要應用於產品和專案 jquery 1.4.js 完整無壓縮版本,主要用於測試 學習和開發 document ready fu...

CSS基礎知識 選擇器

選擇器分組 通配選擇器 類選擇器 應用樣式而不考慮具體涉及的元素 只需要在元素中設定class屬性。例如 header 多類選擇器 header info id選擇器 根據元素的id設定樣式屬性值 例如 divid2 屬性選擇器 根據元素的屬性值,來選擇元素 例如 a href title 根據具體...