//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方法的時候,把...