jQuery 事件委托&节点操作

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

一般绑定事件的写法

$(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();


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();

todolist(计划列表)实例

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • jquery介绍 jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有...
    1263536889阅读 2,761评论 0 1
  • jquery介绍 jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有...
    LiWei_9e4b阅读 3,315评论 0 0
  • 绑定事件的其他方式 $(function(){ $('#div1').bind('mouseover clic...
    爱你如阅读 3,130评论 0 0
  • 绑定事件的其他方式 $(function(){ $('#div1').bind('mouseover clic...
    一直特立独行的猫_4ba4阅读 832评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,964评论 1 45