jQuery之常用方法總結

2021-10-06 15:06:47 字數 4136 閱讀 4725

//1.獲取dom元素

//操作方法:jq選擇器(根據選擇器型別快速獲取需要的元素)$(

[selector]

,[content])$

("#box")$

(".imgbox")$

(".box a")$

("a"

,box)

...:

eq(n) 獲取集合中索引為n的

:gt(n) 大於這個索引的

:lt(n) 小於這個索引的

------

----

----

----

----

----

-//節點之間關係的屬性:用jq選擇器獲取的元素,我們設定變數名的時候一般都以$開始

//還可以再設定對應的選擇器進行二次篩選

let $box=$(

".box");

$box.

children

("a");

//獲取對應的子元素

$box.

find

("a");

//獲取對應的後代元素$(

"a")

.filter

(".active");

//同級篩選(在所有的a中篩選出具備class="active"樣式類的a)

$box.

prev()

; $box.

prev

(p);

//獲取它上乙個標籤名為p的哥哥

$box.

prevall()

; $box.

next()

; $box.

nextall

(".link");

$box.

siblings()

;//獲取所有的兄弟

$box.

index()

;//獲取索引

$box.

parent()

;//獲取父元素

$box.

parents()

;//獲取所有的祖先元素,一直到document

----

----

----

----

----

----

----

----

----

----

----

-------

增刪改let str=

`... `

;$("body").

(str)

;//追加到容器body的末尾$(

"body").

html

(str)

;//等價於innerhtml $(

"body").

html()

;//不傳參是獲取body中的html內容 除了這個方法還有text方法,等價於innertext

$a.inserbefore

($b)

;//把$a放到$b的前面(注意:$a,$b都是頁面中已經存在的元素)

$a.inserafter

($b)

;//把$a放到$b的後面$(

`haha `

).insertbefore

($a)

;//需要把新增加元素放到$a前面,需要把字串用$()包起來,相當於建立了乙個元素

$a.($b)

; $a

.prependto

($b)

;//=>$b.prepend($a) 在$b容器的開頭追加$a

$a.clone()

;//=>實現元素的轉殖

$a.remove()

;//=>實現元素的刪除

//操作表單元素的內容

$inp.

val(

)//獲取表單元素內容

$inp.

val(

'aaa'

)//設定表單元素內容

//html和text方法是操作非表單元素內容的

----

----

----

----

----

----

//3、操作自定義屬性

$box.

attr

('data-type'

)//=>獲取自定義屬性值

$box.

attr

('data-type'

,'b'

)//=>設定自定義屬性值

$box.

attr()

;//=>批量設定

$box.

removeattr

('data-type');

//=>移除自定義屬性

//表單元素操作內建或者自定義屬性一般使用prop和removeprop

$radio.

prop

('checked'

)$radio.

prop

('checked'

,true)--

--//4.操作css樣式(盒子模型屬性)

//設定樣式

$box.

css(

'width'

,200);

//=>css方法是設定或者批量設定樣式(原理是設定style行內樣式)$box.css(),寫的值不加單位,方法會幫我們自動設定上px單位

$box.

addclass

('active');

//=>設定樣式類(原理是對classname的操作),removeclass是移除,hasclass驗證是否存在某個樣式類,toggleclass之前有就是移除,沒有就是新增

//獲採樣式

$box.

css(

'width');

//=>不設定值的時候就是獲取(原理是getcomputedstyle,所有經過計算的樣式都可以獲取)

$box.

offset()

;//=>當前元素距離body的左偏移和上偏移

$box.

position()

;//=>當前元素距離父參照物的左偏移和上偏移

$box.innerwidth/

.innerheight/

.outerwidth/

.outerheight()

//=>等價於clientwidth/height 和 offsetwidth/height

$(document)

.scrolltop

([val]);

//=>可以獲取或者設定scrolltop的資訊,對應的方法 .scrollleft

//=>事件處理

//$元素.off([event type],[function])

//$元素.bind() $元素.unbind() $元素.delegate() ...

//$元素.click() .mouseover .mouseout ...等常用事件的快捷繫結

$box.on(

'click'

,function()

);$box.

click

(function()

);//=>動畫處理

//.animate([目標樣式],[總時間],[運動方式],[運動完做的事情])

//.stop / .finish

$box.

stop()

.animate(,

1000

,'linear'

,function()

);//=>ajax請求處理

let _data=

null;$.

ajax(}

);//=>常用的工具方法

$.each

([陣列、類陣列、物件]

,function

(index,item));

$('a')

.each

(function

(index,item));

//$.toarray()轉換為陣列 $.merge()陣列合併 $.makearray()把類陣列轉換為陣列 $.uniquesort()去重加排序 $.type資料型別檢測 ...

JQuery常用方法總結

jquery 選擇器 基本選擇器 id element class selector1,selectorn 層次選擇器 ancestor descendant parent child prev next prev siblings 過濾選擇器 簡單過濾選擇器 first 或 first last ...

jquery常用方法總結

以下是jquery中比較常用的一些操作實現方式 標籤名 取html元素 document.getelementsbytagname id 取單個控制項document.getelementbyid div id 取某個控制項中 控制項 id id 通過控制項id取其中的控制項 標籤.class樣式名...

js學習總結 jquery常用方法

可以看一下他的手冊 1 jquery的 函式 function fn1 value function fn2 value var call callbacks 建立乙個 函式的列表集合 call.add fn1 向集合中增加乙個叫做fn1的函式 call.fire 100 觸發fire方法的時候,把...