jQuery中的事件机制与DOM操作

jQuery事件机制

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

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

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>