jQuery常用屬性 方法 操作DOM以及擴充套件方法

2021-10-07 00:09:54 字數 3780 閱讀 1739

特殊符號的轉義:

class操作:

內容操作:

屬性操作:

dom節點操作

jq的擴充套件方法

改變jq符號:

//從此zz就代表$

let zz = $.

onconflict

()

1.網頁裡所有資源載入完成:

$((

)=>

)//可以走很多遍

window.

onload=(

)=>

//只走一遍

2.網頁中dom結構載入完成:

window.

addeventlistenter

('domcontentloaded',(

)=>

)

基礎語法:$(seiector).action()

標籤、類、id、並集、交集、全域性、$(』*』)

後代(空格)、子代(>)、第乙個兄弟(+)、所有兄弟元素(~)

:frist(css3中: :first-child)

選第乙個元素

例:

$

('li:frist'

)

:last(css3中: :last-child)

選最後乙個元素

:not()

除去寫進去的元素

:even

選索引為偶的元素

:odd

選索引為奇的元素

:eq(1)

選索引=1的元素

:eq(1)

選索引=1的元素

:gt(1)

選索引》1的元素

:lt(1)

選索引<1的元素

:header

所有標題元素

:focus

選取當前獲取焦點的元素

filter(『a』)

選出a的元素

not(『a』)

選出除去a的元素

has(『a』)

選出包含a的元素

$('#id\\a')

$('#id\\[2\\]')

addclass

新增class

removeclass

刪除class

toggleclass

有則刪除class,無則新增class

hasclass

有返回true,無返回false

css(『color』);//獲取屬性

attr(『data-age』);//獲取或設定自定義屬性

data();//獲取或設定自定義屬性

$(』[data-age]』).html();//獲取自定義屬性

prop();//獲取或設定原生屬性

// 給jquery擴充套件的例項方法

$.fn.

extend(,

dian()

}})// 給jquery擴充套件靜態方法

$.extend(}

)$('.demo').

dian()

$('.demo').

red(

) $.

yellow()

$('.demo').

css(

'color');

//獲取屬性$(

'.demo').

attr

('data-age');

//獲取自定義屬性$(

'.demo').

data

('age');

//獲取自定義屬性$(

'.demo').

data()

;//獲取自定義屬性$(

'[data-age]').

html()

;//獲取自定義屬性$(

).attr

('data-a',10

)//獲取或設定自定義屬性$(

).prop

('checked'

)//獲取或設定原生屬性

建立節點:

$('

')$(

'')

新增節點:

1、內部新增:

2、外部新增:

$(a).insertbefore(b)把a新增到b外的前

$(a).insertafter(b)把a新增到b外的後

$(a).before(b)把b新增到a外的前

$(a).after(b)把b新增到a外的後

刪除節點

remove() 刪除整個節點,不保留元素的繫結事件

detach() 刪除整個節點,保留元素的繫結事件

empty() 清空節點內容

替換節點

$(a).replacewith(b) 把a節點替換為b節點

$(a).replaceall(b) 把b節點替換為a節點

複製節點

clone(boolean) 當boolean為true時複製事件處理,為false時不複製事件處理

查詢節點

find() 查詢子節點

child() 查詢子代節點

繫結事件

="btn"

>add<

/button>$(

'.btn').

click

(function()

)//新增出來的節點並沒有繼承原來的方法

$(document).on

('click'

,'.btn'

,function()

)// 委託給父級 ,新增出來的節點繼承了原來的方法

動畫效果

1、hide(1000) 隱藏1秒

show(1000) 顯示1秒

toggle() => hide()+show() 在隱藏和顯示之間切換

2、fadeout() 淡出

fadein() 淡入

fadtoggle() =>fadeout() +fadein()

3、slideup() 向上摺疊

sildedown() 向下延伸

sildetoggle() =>slideup()+sildedown()

4、animate(,1000)

js轉jq

var

= mybox =

jquery

(box)

; mybox.

html

('ccc'

);

jq轉js

var mybox =$(

'').get(1

);mybox.innerhtml =

'hi'

;

="demo"

>

11asdadassdaddww1<

/div>

// 給jquery擴充套件的例項方法

$.fn.

extend(,

dian()

}})// 給jquery擴充套件靜態方法

$.extend(}

)$('.demo').

dian()

//11asdadass......$(

'.demo').

red(

) $.

yellow

()

JQuery 屬性操作方法

以下的方法可以用於獲得或者設元素的dom屬性 addclass sample 1.p first addclass class1 如需加多個,用空格分隔 2.p addclass function n 注 n為選取器的index.hasclass sample p first hasclass cl...

jquery屬性操作 attr 方法

attr 方法設定或返回被選元素的屬性值。根據該方法不同的引數,其工作方式也有所差異。返回被選元素的屬性值。selector attr attribute 引數 描述attribute 規定要獲取其值的屬性。檢視影象寬度 效果圖 設定被選元素的屬性和值。selector attr attribute...

jQuery 屬性操作 attr 方法

attr 方法設定或返回被選元素的屬性值。根據該方法不同的引數,其工作方式也有所差異。返回被選元素的屬性值。selector attr attribute 設定被選元素的屬性和值。selector attr attribute,value 引數 描述attribute 規定屬性的名稱。value 規...