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、创建节点
var ("<li></li>");
var ("<li></li>");
li_1);
4、创建文本节点、创建属性节点
除节点，而是清空节点
2、复制节点
clone():复制节点后，被复制的新元素并不具有任何i行为
clone(true):复制元素的同时同时复制所绑定的事件
3、替换节点
replaceWith()、replaceAll():
$("p").replaceWith("<strong></strong>");
4、包裹节点
$("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>
5、属性操作
（1）为同一个元素设置多个属性：$('p').attr({"title":"title","name","test"});
$('p').css({"color":"red","font-style":"italy"});
=========({"键"："值","":"",})===========
（2）删除属性
$('p').removeAttr();
6、样式操作和设置样式
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=("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();
一：什么是事件委托？
事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。
二：为什么要用事件委托？
1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢？因为，每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。此外，必须事先指定所有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。
2.对有很多个数据的表格以及很长的列表逐个添加事件，简直就是噩梦。所以事件委托，能极大地提高页面的运行性能，减少开发人员的工作量。
网友评论