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>