js事件的分類
事件的類型:有鼠標(biāo)事件，鍵盤事件，HTML事件，變化事件
注意：js中的事件前面要加on （如：onclick onmouseover），但jquery中的事件不需要加on 如（ [圖片上傳失敗...(image-39e6ec-1547189649195)]
("Element").mouseover ）
鼠標(biāo)事件:（最常用）
click,dblclick,mousedown,,mouseupmouseout,mouseover,mousemove;
事件屬性:
type:表明是什么事件;
target(DOM)或srcElement(IE):表明觸發(fā)事件的對(duì)象;
shiftKey,ctrlKey,altKey,metaKey(DOM):是否按下了Shift,Ctrl,Alt,Meta鍵;
button:0-未按下鍵;1-按左鍵;2-按右鍵;3-同時(shí)按下左右;4-按下中鍵;5-按下左和中;6-按下右和中;7-同時(shí)按下左中右;
鍵盤事件:
keydown,keypress,keyup
事件屬性:
keyCode:按下的鍵的代碼(等于Unicode值)
charCode(DOM):鍵對(duì)應(yīng)的代碼和字符會(huì)有一個(gè)分離;
target(DOM)或srcElement(IE):表明觸發(fā)事件的對(duì)象;
shiftKey,ctrlKey,altKey,metaKey(DOM):是否按下了Shift,Ctrl,Alt,Meta鍵;
HTML事件:（窗口，文檔，表單）
load,upload,abort,error,select,change,submit,reset,resize,scroll,focus,blue
與window有關(guān)的有resize窗口調(diào)大調(diào)小事件,scroll滾動(dòng)事件,
JS的冒泡事件
什么是冒泡事件？
在一個(gè)對(duì)象上觸發(fā)某類事件（比如單擊onclick事件），如果此對(duì)象定義了此事件的處理程序，那么此事件就會(huì)調(diào)用這個(gè)處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個(gè)事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播，從里到外，直至它被處理（父級(jí)對(duì)象所有同類事件都將被激活），或者它到達(dá)了對(duì)象層次的最頂層，即document對(duì)象（有些瀏覽器是window）
阻止事件冒泡的幾種方法
第一種： event.stopPropagation();
第二種： return false;
第三種： event.preventDefault();
jQuery節(jié)點(diǎn)操作
1、查找元素節(jié)點(diǎn)
$("ul li:eq()");
2、查找屬性節(jié)點(diǎn)
$("selector").attr("title")
3、創(chuàng)建文本節(jié)點(diǎn)、創(chuàng)建屬性節(jié)點(diǎn)
除節(jié)點(diǎn)，而是清空節(jié)點(diǎn)
4、復(fù)制節(jié)點(diǎn)
clone():復(fù)制節(jié)點(diǎn)后，被復(fù)制的新元素并不具有任何i行為
clone(true):復(fù)制元素的同時(shí)同時(shí)復(fù)制所綁定的事件
5、替換節(jié)點(diǎn)
replaceWith()、replaceAll():
$("p").replaceWith("<strong></strong>");
6、包裹節(jié)點(diǎn)
$("strong").wrap("<b></b>");warp譯為用...包裹（之前搞不清楚誰包裹誰，總是搞混，單詞不過關(guān)┭┮﹏┭┮）
<p></p>
<p></p>
<p></p>
wrapAll():$("p").wrapAll("<b></b>")——<b><p></p><p></p><p></p></b>
wrap()單獨(dú)包裹每個(gè)元素，<b><p></p></b> <b><p></p></b>
wrapInner():$("p").wrapInner("<b></b>")——<p><b></b></p>
7、屬性操作
（1）為同一個(gè)元素設(shè)置多個(gè)屬性：$('p').attr({"title":"title","name","test"});
$('p').css({"color":"red","font-style":"italy"});
=========({"鍵"："值","":"",})===========
（2）刪除屬性
$('p').removeAttr();
8、樣式操作和設(shè)置樣式
get:class:$("selector").attr("class")
set:class:$("selector").attr("class","addclass")
追加樣式：addClass(),removeClass(),
切換樣式：$().toggle(function(){//show},function(){//hide});
$().toggleClass()
判斷是否含有某個(gè)樣式
hasClass():return false/true<=>(等價(jià)于)$("selector").is(".class");
設(shè)置和過去html,文本和值
get:var selector_html=[圖片上傳失敗...(image-355a35-1547375965876)]
("selector")元素的html代碼
set:$("selector").html("<b></b>");
text():<=>javascript的innerText屬性：用來讀取或者設(shè)置某個(gè)元素中的文本內(nèi)容
set:$("selector").html("innerText");
val():<=>javascript的value屬性
Jquery:focus() blur()
javascript:onfocus() onblur()
設(shè)置網(wǎng)頁中默認(rèn)選中的元素
<select id="siggle"><option></option></select>
$("#single").val("");//設(shè)置列表的默認(rèn)選中項(xiàng)
<select id="multiple"><option></option></select>
========標(biāo)簽的value值=========
$("#multiple").val(["",""])//以數(shù)組形式賦值
$(":checkbox").val(["",""]);
$(":radio").val(["radio"]);
遍歷節(jié)點(diǎn)
children():return $("selector")的子元素集合
*children():只考慮子元素而不考慮其他后代元素
next()用于匹配元素后面緊鄰的同輩元素
pre()用于匹配元素前面緊鄰的同輩元素
siblings()用于取得匹配元素前后所有的同輩元素
closest()用于取得最近的匹配元素，如果不匹配則向上查找父元素，逐級(jí)向上直到找到匹配選擇器的元素，否則返回一個(gè)空的jquery對(duì)象
parent()、parents()、closest()的區(qū)別
parent():匹配元素的父級(jí)元素，返回一個(gè)
parents():匹配元素的祖先元素，返回多個(gè)
closest():從元素本身開始，逐級(jí)向上級(jí)元素匹配，并返回第一個(gè)最先匹配的祖先元素
CSS-DOM
獲取樣式屬性
$("selector").css("屬性鍵")//獲取值
css()設(shè)置多個(gè)樣式屬性
$("selector").css({"鍵":"值","鍵":"值",});
獲取元素的height屬性
$("selector").css("height");
$("selector").height();
作者：一片落葉就是渺小
鏈接：http://www.itdecent.cn/p/9724b8ec82d5
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。
