input框事件,jQuery其他事件,自定义事件,事件冒泡,事件委托,节点操作

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("");
6、包裹节点
$(“strong”).wrap("");warp译为用…包裹(之前搞不清楚谁包裹谁,总是搞混,单词不过关┭┮﹏┭┮)

wrapAll():$("p").wrapAll(" ")——

wrap()单独包裹每个元素,

wrapInner():$("p").wrapInner(" ")——

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(" "); text():<=>javascript的innerText属性:用来读取或者设置某个元素中的文本内容 set:$("selector").html("innerText"); val():<=>javascript的value属性 Jquery:focus() blur() javascript:onfocus() onblur() 设置网页中默认选中的元素 $("#single").val("");//设置列表的默认选中项 ========标签的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();

猜你喜欢

转载自blog.csdn.net/weixin_43167531/article/details/86485246