jquery--事件委托/jquery元素节点操作/实例-todolist

事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

一般绑定事件的写法

$(function(){
    $ali = $('#list li');
    $ali.click(function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

事件委托的写法

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

取消事件委托

// ev.delegateTarge 委托对象
$(ev.delegateTarge).undelegate();

// 上面的例子可使用 $list.undelegate();

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>事件委托</title>    <!--事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。-->
 9 
10     <style type="text/css">
11         .list{
12             list-style:none;
13         }
14 
15         .list li{
16             height:30px;
17             background-color:green;
18             margin-bottom:10px;
19             color:#fff;
20         }
21 
22     </style>
23 
24     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
25     <script type="text/javascript">
26         $(function(){
27             /*
28             $('.list li').click(function(){
29                 alert($(this).html())
30             })
31             */
32 
33             //事件委托的写法
34             $('.list').delegate('li','click',function(){
35                 alert($(this).html());
36 
37                 //取消委托
38                 $('.list').undelegate();
39             })
40         })
41     </script>
42 </head>
43 <body>
44 
45     <ul class="list">
46         <li>1</li>
47         <li>2</li>
48         <li>3</li>
49         <li>4</li>
50         <li>5</li>
51         <li>6</li>
52         <li>7</li>
53         <li>8</li>
54     </ul>
55 
56 </body>
57 </html>

jquery元素节点操作

创建节点

var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');

插入节点
1、append()和appendTo()：在现存元素的内部，从后面插入元素

var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>

2、prepend()和prependTo()：在现存元素的内部，从前面插入元素

3、after()和insertAfter()：在现存元素的外部，从后面插入元素

4、before()和insertBefore()：在现存元素的外部，从前面插入元素

删除节点

$('#div1').remove();

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>节点操作</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript">
12         $(function(){
13             var $span=$('<span>这是一个span</span>')
14             var $p=$('<p>这是一个p元素</p>')
15             var $h=$('<h1>页面标题</h1>')
16             var $div2=$('<div>这是一个div2</div>')
17 
18             /*  append()和appendTo()：在现存元素的内部，从后面插入元素
19             $('#div1').append($span);
20             $('#div1').append($p);
21             */
22 
23             $span.appendTo('#div1');
24             $p.appendTo('#div1')
25 
26             //before()和insertBefore()：在现存元素的外部，从前面插入元素
27             //$('#div1').before($h);
28             $h.insertBefore('#div1');
29 
30             //after()和insertAfter()：在现存元素的外部，从后面插入元素
31             //$('#div1').after($div2);
32             $div2.insertAfter('#div1');
33 
34             //删除节点
35             $p.remove()
36 
37         })
38     </script>
39 </head>
40 <body>
41     <div id="div1"></div>
42 </body>
43 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>节点操作和html函数的区别</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript">
12         $(function(){
13 
14             // html 操作比节点操作的性能高，建议能用html的地方就用html方法
15             //$('#div1').html('<a href="">链接</a>')  //会将原来的p标签覆盖掉
16             $('#div1').append('<a href="">链接</a>')  //在原来的p标签后面追加了a
17         })
18     </script>
19 </head>
20 <body>
21 
22     <div id="div1">
23         <p>这是一个p元素</p>
24     </div>
25 
26 </body>
27 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>已有元素的移动</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript">
12         $(function(){
13 
14             $('.p1').insertBefore('.div1');
15 
16             $('<h3>h3标题</h3>').insertBefore('.p1');
17 
18         });
19     </script>
20 </head>
21 <body>
22 
23     <div class="div1">这是一个div元素</div>
24     <p class="p1">这是一个p元素</p>
25 
26 </body>
27 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>判读jquery选择器是否选择成功</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript">
12         $(function(){
13 
14             // 用length（>0）属性来判断是否选中了元素
15             alert($('#div1').length);
16             alert($('#span').length);
17 
18         });
19     </script>
20 </head>
21 <body>
22 
23     <div id="div1">这是一个div元素</div>
24 
25 </body>
26 </html>

事件委托--todolist

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>事件委托--todolist</title>
  6     <style type="text/css">
  7         .list_con{
  8             width:400px;
  9             margin:50px auto 0;
 10         }
 11 
 12         .inputtxt{
 13             width:350px;
 14             height:30px;
 15             border:1px solid #ccc;
 16             padding:0px;
 17             text-indent:10px;
 18 
 19         }
 20 
 21         .inputbtn{
 22             width:40px;
 23             height:32px;
 24             padding:0px;
 25             border:1px solid #ccc;
 26         }
 27 
 28         .list{
 29             margin:0;
 30             padding:0;
 31             list-style:none;
 32             margin-top:20px;
 33         }
 34 
 35         .list li{
 36             height:30px;
 37             line-height:30px;
 38             border-bottom:1px solid #ccc;
 39         }
 40 
 41         .list li span{
 42             float:left;
 43         }
 44 
 45         .list li a{
 46             float:right;
 47             text-decoration:none;
 48             margin:0 10px;
 49         }
 50     </style>
 51     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
 52     <script type="text/javascript">
 53         $(function(){
 54             $('#btn1').click(function(){
 55                 var txt=$('#txt1').val();   //获取#txt1输入框的值
 56                 $('#txt1').val('');
 57 
 58                 if(txt==''){
 59                     alert('请输入内容');
 60                     return;     //停止该函数继续
 61                 }
 62 
 63                 $li=$('<li><span>'+txt+'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>')
 64                 $li.appendTo('#list')
 65             })
 66 
 67             /*
 68             $('.del').click(function(){
 69                 $(this).parent().remove();
 70             })
 71             */
 72 
 73             $('#list').delegate('a','click',function(){
 74                 var handler=$(this).attr('class');  //获取点击该元素的class
 75 
 76                 if(handler=='del'){
 77                     $(this).parent().remove();
 78                 }
 79                 if(handler=='up'){
 80                     if($(this).parent().prev().length==0){   //用length方法判断当前点击元素的父元素，即li前面还有没有li标签
 81                         alert('到顶了！');
 82                         return;
 83                     }
 84                     $(this).parent().insertBefore($(this).parent().prev());    //将li挪到上一个li的前面
 85                 }
 86 
 87                 if(handler=='down'){
 88                     if($(this).parent().next().length==0){
 89                         alert('到底了！');
 90                     }
 91                     $(this).parent().insertAfter($(this).parent().next())   //将li挪到下一个li的后面
 92                 }
 93             })
 94         })
 95 
 96     </script>
 97 </head>
 98 <body>
 99 
100     <div class="list_con">
101     <h2>To do list</h2>
102         <input type="text" name="" id="txt1" class="inputtxt">
103         <input type="button" name="" value="增加" id="btn1" class="inputbtn">
104 
105         <ul id="list" class="list">
106 
107             <li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
108             <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
109             <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
110 
111         </ul>
112 
113     </div>
114 </body>
115 </html>

posted on 2019-12-25 23:20 cherry_ning 阅读(153) 评论(0) 收藏举报

刷新页面返回顶部

cherry_ning

jquery--事件委托/jquery元素节点操作/实例-todolist

事件委托

jquery元素节点操作

导航

公告