! DOCTYPE html html lang ="en" head meta charset ="UTF-8" title delegate_代表 / title script type ="text/javascript" src ="js/jquery-1.12.4.min.js" / script script type ="text/javascript" $( function (){ // $(‘.list li‘).click(functio
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>delegate_代表</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ // $(‘.list li‘).click(function(){ // $(this).css({‘backgroundColor‘:‘plum‘},) // }) // // 常规写法, 此方法,在执行的时候, 是把当前语句下的八个li依次进行绑定.之后添加新条件的时候就不会再进行绑定. // var $li = $(‘<li>9</li>‘); // // 新建一个变量, 赋值给li变量. // $(‘.list‘).append($li); // // 把变量liappend到ul标签里面,完成增加新元素的操作. // // 使用之前写法的话, 一方面需要绑定与元素数量相等的次数, 性能不好. 且, 之后新添加的元素不能使用该式样. $(‘.list‘).delegate(‘li‘,‘click‘,function(){ $(this).css({‘backgroundColor‘:‘red‘,}) }) var $li = $(‘<li>9</li>‘); $(‘.list‘).append($li); // 这里新增元素也可以使用该式样. // 一方面是性能提升, 一方面是添加新子元素也可以享受式样, 减少代码量. // 所以, 式样操作的时候, 多使用 事件代理(委托) }) </script> <style type="text/css"> .list{ width: 100%; background: tan; list-style: none; padding: 5px; } .list li{ height: 30px; background: lime; margin: 10px; } </style> </head> <body> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html>