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>