js事件的分类
事件的类型:有鼠标事件，键盘事件，HTML事件，变化事件
注意：js中的事件前面要加on （如：onclick onmouseover），但jquery中的事件不需要加on 如（ [图片上传失败...(image-39e6ec-1547189649195)]
("Element").mouseover ）
鼠标事件:（最常用）
click,dblclick,mousedown,,mouseupmouseout,mouseover,mousemove;
事件属性:
type:表明是什么事件;
target(DOM)或srcElement(IE):表明触发事件的对象;
shiftKey,ctrlKey,altKey,metaKey(DOM):是否按下了Shift,Ctrl,Alt,Meta键;
button:0-未按下键;1-按左键;2-按右键;3-同时按下左右;4-按下中键;5-按下左和中;6-按下右和中;7-同时按下左中右;
键盘事件:
keydown,keypress,keyup
事件属性:
keyCode:按下的键的代码(等于Unicode值)
charCode(DOM):键对应的代码和字符会有一个分离;
target(DOM)或srcElement(IE):表明触发事件的对象;
shiftKey,ctrlKey,altKey,metaKey(DOM):是否按下了Shift,Ctrl,Alt,Meta键;
HTML事件:（窗口，文档，表单）
load,upload,abort,error,select,change,submit,reset,resize,scroll,focus,blue
与window有关的有resize窗口调大调小事件,scroll滚动事件,
JS的冒泡事件
什么是冒泡事件？
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）
阻止事件冒泡的几种方法
第一种： event.stopPropagation();
第二种： return false;
第三种： event.preventDefault();
jQuery节点操作
1、查找元素节点
$("ul li:eq()");
2、查找属性节点
$("selector").attr("title")
3、创建文本节点、创建属性节点
除节点，而是清空节点
4、复制节点
clone():复制节点后，被复制的新元素并不具有任何i行为
clone(true):复制元素的同时同时复制所绑定的事件
5、替换节点
replaceWith()、replaceAll():
$("p").replaceWith("<strong></strong>");
6、包裹节点
$("strong").wrap("<b></b>");warp译为用...包裹（之前搞不清楚谁包裹谁，总是搞混，单词不过关┭┮﹏┭┮）
<p></p>
<p></p>
<p></p>
wrapAll():$("p").wrapAll("<b></b>")——<b><p></p><p></p><p></p></b>
wrap()单独包裹每个元素，<b><p></p></b> <b><p></p></b>
wrapInner():$("p").wrapInner("<b></b>")——<p><b></b></p>
7、属性操作
（1）为同一个元素设置多个属性：$('p').attr({"title":"title","name","test"});
$('p').css({"color":"red","font-style":"italy"});
=========({"键"："值","":"",})===========
（2）删除属性
$('p').removeAttr();
8、样式操作和设置样式
get:class:$("selector").attr("class")
set:class:$("selector").attr("class","addclass")
追加样式：addClass(),removeClass(),
切换样式：$().toggle(function(){//show},function(){//hide});
$().toggleClass()
判断是否含有某个样式
hasClass():return false/true<=>(等价于)$("selector").is(".class");
设置和过去html,文本和值
get:var selector_html=[图片上传失败...(image-355a35-1547375965876)]
("selector")元素的html代码
set:$("selector").html("<b></b>");
text():<=>javascript的innerText属性：用来读取或者设置某个元素中的文本内容
set:$("selector").html("innerText");
val():<=>javascript的value属性
Jquery:focus() blur()
javascript:onfocus() onblur()
设置网页中默认选中的元素
<select id="siggle"><option></option></select>
$("#single").val("");//设置列表的默认选中项
<select id="multiple"><option></option></select>
========标签的value值=========
$("#multiple").val(["",""])//以数组形式赋值
$(":checkbox").val(["",""]);
$(":radio").val(["radio"]);
遍历节点
children():return $("selector")的子元素集合
*children():只考虑子元素而不考虑其他后代元素
next()用于匹配元素后面紧邻的同辈元素
pre()用于匹配元素前面紧邻的同辈元素
siblings()用于取得匹配元素前后所有的同辈元素
closest()用于取得最近的匹配元素，如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素，否则返回一个空的jquery对象
parent()、parents()、closest()的区别
parent():匹配元素的父级元素，返回一个
parents():匹配元素的祖先元素，返回多个
closest():从元素本身开始，逐级向上级元素匹配，并返回第一个最先匹配的祖先元素
CSS-DOM
获取样式属性
$("selector").css("属性键")//获取值
css()设置多个样式属性
$("selector").css({"键":"值","键":"值",});
获取元素的height属性
$("selector").css("height");
$("selector").height();
作者：一片落叶就是渺小
链接：https://www.jianshu.com/p/9724b8ec82d5
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
网友评论