jQuery中的事件机制与DOM操作

jQuery事件机制

jQuery的事件机制，指的是jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。

下面我们先来回顾一下事件的几种类型。

事件	描述
click()	鼠标单击事件
dblclick()	鼠标双击事件
hover()	鼠标悬停事件
mousedown()	鼠标按下事件
mouseup()	鼠标抬起事件
mouseenter()	鼠标进入事件（不支持子元素）
mouseleave()	鼠标离开事件（不支持子元素）
mouseout()	鼠标离开事件（支持子元素）
mouseover()	鼠标进入事件（支持子元素）
mousemove()	鼠标移动事件
focus()	聚焦事件
change()	表单元素的值发生改变时激起的事件
submit()	表单提交事件，绑定在form

on()：事件绑定

$(function(){$('div').on({click:function(){console.log('鼠标单击')},mouseover:function(){console.log('鼠标进入')}})
})

off()：事件解绑

$(function(){$('div').click(function(){alert(1)})$('button').click(function(){$('div').off('click')})
})

trigger()：事件触发

$(function(){$('div').click(function(){$('div').css('background-color','red')})$('button').click(function(){$('div').trigger('click')})
})

jQuery中的DOM操作

jQuery中提供了一系列的操作DOM节点的API，用于解决DOM原生API无法进行批量操作并且功能性较差的弊端。

创建节点

创建元素节点：var newTd = $("<td></td>")
创建文本节点：在创建元素节点时直接把文本内容写出来：var newTd = $("<td>文本内容</td>"）

插入节点

prepend() / prependTo()： 在匹配元素内部集合的最前面插入参数，作为它的第一个子元素。
append() / appendTo()： 在匹配元素内部集合的末尾处插入参数，作为它的最后一个子元素。。
before() / insertBefore()： 在匹配元素的前面插入参数，作为其兄弟节点。
after() / insertAfter()： 在匹配元素的后面插入参数，作为其兄弟节点。

<script>$(function(){var $li = $('<li>新元素</li>')$('ul').prepend($li)$li.prependTo($('ul'))  $('.two').after($li)$li.insertAfter($('.two'))})
</script>
<ul><li></li><li class="two"></li><li></li>
</ul>

删除节点

empty()： 清除匹配元素的所有子元素。
remove()： 删除匹配元素以及元素绑定的事件。
detach()： 删除匹配元素，保留元素绑定的事件。

<script>$(function(){//$('ul').empty()$('li').click(function(){alert(111)})var a = $(".one").remove()$("ul").append(a)   //点击时无响应var b = $(".two").detach()$("ul").append(b)   //点击时弹出响应框})
</script>
<ul><li class="one">one</li><li class="two">two</li><li></li>
</ul>

复制节点

clone()： 参数默认是false，为浅复制(不复制事件)，如果参数为true，为深复制(复制事件)。

<script>$(function(){$('.one').click(function(){alert(111)})var a = $(".one").clone()$("ul").append(a)   //点击时无响应var b = $(".one").clone(true)$("ul").append(b)   //点击时弹出响应框})
</script>
<ul><li class="one">one</li><li></li>
</ul>

替换节点

replaceWith() / replaeAll()： 用提供的内容替换集合中所有匹配的元素，并且返回被删除元素的集合。

<script>$(function(){var $li = $('<li>新元素</li>')$('.two').replaceWith($li)$li.replaeAll($('.two'))})
</script>
<ul><li class="two"></li><li class="two"></li><li></li>
</ul>

包裹节点

wrap()： 在每个匹配元素的外层包裹上一个html元素。该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义。
wrapAll()： 将所有匹配元素当做是一个整体，在这个整体的外部用指定的html元素进行包裹。
wrapInner()： 将每个匹配的元素的子内容(包括文本节点)用其他元素包裹起来。

<script>$(function(){$('span').wrap('<div style="background:yellow;"></div>')$('p').wrapAll('<div style="background:red;"></div>')$('.two').wrapInner('<div style="background:blue;"></div>')})
</script>
<ul><li></li><li class="two"><span></span><span></span></li>
</ul>
<span></span>
<p></p>
<p></p>

遍历节点

children()： 用于取得匹配元素的子元素集合（只考虑子元素而不考虑任何后代元素）。
$(".content .inner")=>$(".content").children(".inner");
parent()： 取得匹配元素集合中，每个元素的父元素。
parents()： 获得集合中每个匹配元素的祖先元素。
filter()： 把当前所选择的所有元素再进行筛选过滤。
find()： 在当前元素对象中的子元素中，查找和参数所匹配的所有的后代元素。
next()： 取得匹配元素紧邻的后面兄弟元素。
nextAll()： 查找当前元素之后所有的同辈元素。
prev()： 取得匹配元素前面紧邻的兄弟元素。
prevAll()： 查找当前元素之前所有的同辈元素。
siblings()： 取得匹配元素前后所有的兄弟元素。

<script>$(function(){$('ul').find('.two').css('background','coral')$('.two').next('li').css('background','coral')$('.two').prev('li').css('background','coral')})
</script>
<ul><li></li><li class="two"></li><li></li><li></li>
</ul>

closest()： 取得匹配元素的最近的元素，如果匹配不上继续向上查找父元素，常用于在表格中删除某一行。

<script type="text/javascript">$(function(){$('td:contains("删除")').click(function(){$(this).closest($('tr')).remove()})   })
</script>
<table><tr><td>1</td><td></td><td></td><td>删除</td></tr><tr><td>2</td><td></td><td></td><td>删除</td></tr>
</table>

jQuery中的事件机制与DOM操作相关推荐

jQuery中的事件机制深入浅出
昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...
jQuery 中的事件参数传递机制
jQuery 中的事件参数传递机制 jQuery事件参数传递模型: 注:trigger 不能与 bind 的原生函数一样,使用同样的参数传递形式: 参数传递一: $(document).ready(f ...
「前端面试题系列7」Javascript 中的事件机制（从原生到框架）
前言这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法伪类与伪元素的区别及实战如何实现一个圣杯布局? ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
jQuery中绑定事件的几种方法
以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",functi ...
四、jQuery 中的事件和动画(嘎嘎详细)
文章目录前言一.事件 1.1 加载 DOM 1.1.1 执行时机 1.1.2 多次使用 1.1.3 简写方式 1.2 事件绑定 1.2.1简单使用 1.2.2 简写绑定事件 1.3 合成事件 1. ...
jQuery 中的事件冒泡和阻止默认行为
jQuery 中的事件冒泡和阻止默认行为参考资料: <锋利的jQuery> 作者:单东林张晓菲魏然出版社: 人民邮电出版社 1.事件冒泡 [javascript] vi ...
锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画
锋利的Jquery读书笔记第三章 jQuery中的DOM操作 jQuery中的事件事件绑定 bind方法合成事件 hover方法 toggle方法事件冒泡事件对象停止事件冒泡阻止默认行为 ...
jquery中的事件和动画
目录一.jquery中的事件 1.加载DOM 2.事件绑定 3.合成事件 4.事件冒泡 5.事件对象的属性 6.移除事件二.jquery中的动画 1.隐藏和显示 2.滑动效果 3.淡入淡出效果三 ...

jQuery中的事件机制与DOM操作

jQuery事件机制

on()：事件绑定

off()：事件解绑

trigger()：事件触发

jQuery中的DOM操作

创建节点

插入节点

删除节点

复制节点

替换节点

包裹节点

遍历节点

jQuery中的事件机制与DOM操作相关推荐

最新文章

热门文章