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>