jQuery 事件
程序员文章站
2022-07-06 12:40:41
事件注册单个事件注册语法: $('div').click(function () { 处理的事情 })$('div').click(function () { $(this).css('backgroundColor', 'red') });$('div').mouseenter(function ... ......
事件注册
- 单个事件注册
语法: $('div').click(function () { 处理的事情 })
$('div').click(function () { $(this).css('backgroundcolor', 'red') }); $('div').mouseenter(function () { $(this).css('backgroundcolor', 'black') })
事件处理
on 绑定事件
因为普通注册事件方法的不足,jquery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是: on()
- 可以绑定1个或者多个事件
$('div').on({ click: function () { pass}, mouseenter: function () { pass } })
- 如果处理的事件是相同的
$('div').on("mouseenter mouseleave", function () { $(this).toggleclass('current') })
- on 实现事件委托(委派)
$('ul').on('click', 'li', function () { alert('111') })
- on 可以动态给未来创建的元素添加事件
$('ol').on('click', 'li', function () { alert(222) }) var li = $('<li>lo的li</li>') $('ol').prepend(li)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <style> div { width: 100px; height: 100px; background-color: pink; } .current { background-color: purple; } </style> <script src="jquery.min.js"></script> </head> <body> <div></div> <ul> <li>我们都是好孩子</li> <li>我们都是好孩子</li> <li>我们都是好孩子</li> <li>我们都是好孩子</li> <li>我们都是好孩子</li> </ul> <ol> </ol> <script> $(function () { // 1. 单个事件 $('div').click(function () { $(this).css('backgroundcolor', 'red') }); $('div').mouseenter(function () { $(this).css('backgroundcolor', 'black') }) $('div').on({ click: function () { pass }, mouseenter: function () { pass } }) // 2. 事件处理, 可以绑定1个或者多个 $('div').on({ click: function () { $(this).css('backgroundcolor', 'red') }, mouseenter: function () { $(this).css('backgroundcolor', 'blue') }, mouseleave: function () { $(this).css('width', '300px') } }) // 2.1 如果处理程序相同 $('div').on("mouseenter mouseleave", function () { $(this).toggleclass('current') }) // 2.2 on可以实现事件委托(委派) $('ul').on('click', 'li', function () { alert('111') }) // 2.3 on 可以给为来动态创建的的元素绑定事件 $('ol').on('click', 'li', function () { alert(222) }) var li = $('<li>lo的li</li>') $('ol').prepend(li) }) </script> </body> </html>
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none } .box { width: 600px; margin: 100px auto; border: 1px solid #000; padding: 20px; } textarea { width: 450px; height: 160px; outline: none; resize: none; } ul { width: 450px; padding-left: 80px; } ul li { line-height: 25px; border-bottom: 1px dashed #cccccc; display: none; } input { float: right; } ul li a { float: right; } </style> <script src="jquery.min.js"></script> <script> $(function () { $('.btn').on('click', function () { var li = $('<li></li>') li.html($('.txt').val() + "<a href='javascript:;'> 删除</a>") $("ul").prepend(li); li.slidedown(); // 下滑 $('.txt').val('') }) $('ul').on('click', 'a', function () { $(this).parent().slideup(function () { // 上滑 $(this).remove(); }); }) }) </script> </head> <body> <div class="box" id="weibo"> <span>微博发布</span> <textarea name="" class="txt" cols="30" rows="10"></textarea> <button class="btn">发布</button> <ul> </ul> </div> </body> </html>
上一篇: 如何实现一个parseInt