特殊符號的轉義:
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 規...