JQuery入門學習(2)

2022-07-25 06:42:07 字數 4735 閱讀 8089

1、屬性操作

①attr()方法

attr()方法用於獲取所匹配元素集合中第乙個元素的屬性,也可以用來設定所匹配元素的乙個或多個屬性值,attr()方法有如下所示的4種語法格式。

attr(name);//

獲取元素的屬性值

attr(name,value);//

設定元素的某個屬性的值

attr();//

設定元素的多個屬性的值

attr(name.function([index,oldarrt]));//

用函式返回值設定元素的屬性

②removeattr()方法

removeattr()方法用於測試匹配元素的指定屬性,其語法格式如下。

removeattr(name);

③prop()方法

用於獲取所匹配元素集合中第乙個元素的屬性,也可以用來設定所匹配元素的乙個或多個屬性值。多用於boolean型別的屬性操作,如checked、selected、disabled等。

如:$("input [ type='checkbox']").prop("checked");

④removeprop()方法

removeprop(name);

2、樣式操作

①addclass()方法

addclass() 方法向被選元素新增乙個或多個類。

該方法不會移除已存在的 class 屬性,僅僅新增乙個或多個 class 屬性。

$(selector).addclass(class)

//使用函式向被選元素新增類。

$(selector).addclass(function(index,oldclass))

②removeclass()方法

從被選元素移除乙個或多個類。

$(selector).removeclass(class)

③toggleclass()方法

toggleclass() 對設定或移除被選元素的乙個或多個類進行切換。

該方法檢查每個元素中指定的類。如果不存在則新增類,如果已設定則刪除之。這就是所謂的切換效果。

不過,通過使用 "switch" 引數,您能夠規定只刪除或只新增類。

toggleclass(classname);

$(selector).toggleclass(class,

switch);

//使用函式來切換類

$(selector).toggleclass(function(index,class),switch)

④css()方法

css() 方法返回或設定匹配的元素的乙個或多個樣式屬性。

//

返回 css 屬性值

$(selector).css(name);

//設定 css 屬性

$(selector).css(name,value);

//使用函式來設定 css 屬性

$(selector).css(name,function

(index,value));

//設定多個 css 屬性/值對

$(selector).css();

3、內容操作(來自w3cschool)

方法描述

addclass()

向匹配的元素新增指定的類名。

after()

在匹配的元素之後插入內容。

向匹配元素集合中的每個元素結尾插入由引數指定的內容。

向目標結尾插入匹配元素集合中的每個元素。

attr()

設定或返回匹配元素的屬性和值。

before()

在每個匹配的元素之前插入內容。

clone()

建立匹配元素集合的副本。

detach()

從 dom 中移除匹配元素集合。

empty()

刪除匹配的元素集合中所有的子節點。

hasclass()

檢查匹配的元素是否擁有指定的類。

html()

設定或返回匹配的元素集合中的 html 內容。

insertafter()

把匹配的元素插入到另乙個指定的元素集合的後面。

insertbefore()

把匹配的元素插入到另乙個指定的元素集合的前面。

prepend()

向匹配元素集合中的每個元素開頭插入由引數指定的內容。

prependto()

向目標開頭插入匹配元素集合中的每個元素。

remove()

移除所有匹配的元素。

removeattr()

從所有匹配的元素中移除指定的屬性。

removeclass()

從所有匹配的元素中刪除全部或者指定的類。

replaceall()

用匹配的元素替換所有匹配到的元素。

replacewith()

用新內容替換匹配的元素。

text()

設定或返回匹配元素的內容。

toggleclass()

從匹配的元素中新增或刪除乙個類。

unwrap()

移除並替換指定元素的父元素。

val()

設定或返回匹配元素的值。

wrap()

把匹配的元素用指定的內容或元素包裹起來。

wrapall()

把所有匹配的元素用指定的內容或元素包裹起來。

wrapinner()

將每乙個匹配的元素的子內容用指定的內容或元素包裹起來。

4、常用特效方法

(1)隱藏/顯示

$(selector).hide(speed,callback);//隱藏html元素

$(selector).show(speed,callback);//顯示html元素

$(selector).toggle(speed,callback);//可以使用 toggle() 方法來切換 hide() 和 show() 方法。顯示被隱藏的元素,並隱藏已顯示的元素:

可選的 speed 引數規定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。

(2)淡入淡出

$(selector).fadein(speed,callback);//淡入已隱藏的元素

$(selector

).fadeout(speed,callback

);//用於淡出可見元素。

$(selector

).fadetoggle(speed,callback

);//如果元素已淡出/淡入,則 fadetoggle() 會向元素新增淡入/淡出效果。

$(selector

).fadeto(speed,opacity,callback

);//允許漸變為給定的不透明度(值介於 0 與 1 之間)。

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

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

(3)滑動

$(selector

).slidedown(speed,callback

);//用於向下滑動元素。

$(selector

).slideup(speed,callback

);//用於向上滑動元素。

$(selector

).slidetoggle(speed,callback

);//可以在 slidedown() 與 slideup() 方法之間進行切換。

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

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

(4)動畫

$(selector

).animate(,speed,callback

);必需的 params 引數定義形成動畫的 css 屬性。

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

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

示例:

//

**來自菜鳥教程

$("div").animate();

//使用預定值

$("div").animate();

//使用佇列功能

var div=$("div");

div.animate(,"slow");

div.animate(,"slow");

div.animate(,"slow");

div.animate(,"slow");

(5)停止動畫

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

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

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

因此,預設地,stop() 會清除在被選元素上指定的當前動畫。

(6)方法鏈結

//

**來自菜鳥教程

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

.slideup(2000)

.slidedown(2000);

5、cookie的使用

參考:

JQuery入門學習(1)

為了避免在dom対象完全載入之前過早地執行 jquew提供 了乙個名為ready 的函式,使用函式 使用該函式可以將包括在其中的 推遲至dom物件載入完畢後再執行。語法格式如下 document ready function 1 如果不希望使用 ready 函 數 則可 將jquery 寫在頁面ht...

JQuery 入門學習列表

選擇器 元素選擇 eq find parents next prev index dom元素和jquery元素區別與轉換 eq get 屬性樣式操作 attr data css 類操作 addclass removeclass toggleclass hasclass 獲取寬高 width heig...

JQuery學習筆記(2)

jquery的屬性選擇器 div id為one test div id為one te div id為one te div id為one es xxt aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 子元素選擇器 根據該元素是父元素下出現的位置來選中子元素.one two three f...