< 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 > < 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 > </ body > </ html >