您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 1010cc时时彩经典版:jQuery如何获取动态添加的元

1010cc时时彩经典版:jQuery如何获取动态添加的元

发布时间:2019-08-18 07:49编辑:1010cc时时彩客户端浏览(181)

    背景

      接到了领导给的一个New Feature,为系统的菜单导航栏进行一些个性化的操作(鼠标移到导航菜单时下方出现子菜单,移到其他的菜单选项时显示该选项的子菜单,隐藏其他子菜单。其次就是当使用鼠标点击一个菜单选项时就把该菜单及其子菜单固定,当鼠标移出所有菜单选项的范围是依然让其显示子菜单,再次点击取消固定)。

      原来的导航栏是使用ASP.NET Ajax的 HoverMenuExtender服务端控件实现的。我们知道,服务端控件的优点在于快速开发,但是缺点是不能够进行个性化定制,且效率也是一个问题。最开始本来计划在原有基础上修改,但是发现该控件无法满足我们的个性化需求,所有决定使用jQuery来实现,并停止使用该控件。这样的好处是不需要修改后台的代码,只需要在前端增加JS脚本就可以了。导航栏是在母版页中实现的,所以我使用的方案是在页面HTML生成后,在前台使用jQuery动态绑定jQuery提供的mouseenter和mouseleave事件。

      我们知道通过jQuery绑定事件的方式有很多种(one、tigger、on、delegate、live、bind等以及其对应的卸载事件方法),常用的有下面三种,其他的不外乎是它们的扩展和衍生,如下:

     target.eventType( 
     target.bind(eventType, 
     parentTarget.delegate(target, eventType, (){} );
    

     

    第一种和第二种类似,在这刚开始的时候,我使用的是第二种方式来绑定事件,很快就实现的相应的效果。但是在测试的时候QA发现了一个bug:即当使用该导航栏页面的表单提交,页面进行了局部刷新(使用updatepanel)之后,事件就失效了。当时还以为是页面脚本的加载问题,后来发现不是,因为脚本已经被正确加载了。真正的原因是因为使用 .bind() ,选择器匹配的元素会被附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。

     

    1. jQuery 能做什么?

    jQuery 是一个轻量级的 JavaScript 库,它强调的理念是写得少,做得多(write less, do more),利用 jQuery 强大的选择器、链式操作、事件处理机制和完善的 Ajax ,我们可以更快捷的完成 JavaScript 任务

    • 方便快捷的获取DOM元素
    • 动态修改页面样式
    • 动态改变DOM内容
    • 响应用户的交互操作
    • 为页面添加动态效果
    • 统一Ajax操作
    • 简化常见的 JavaScript 任务。

    之前项目中动态创建的标签元素  在绑定事件的时候  都是无效  无论如何都不能触发

    1. 使用 on()方法   

    第一种方式:

    bind和delegate绑定事件的区别

      如果页面有局部刷新想要对新生成的元素也能够正确的绑定事件jQuery为我们提供了更多的选择:1.3版本提供的live函数,1.4版本后提供了delegate函数,不过在1.7之后以即不再推荐使用live函数了,对于低版本jQuery可以使用delegate函数替代live,如果是1.7版本以上应该使用推荐的on函数。由于在项目中使用的是jQuery 1.4.1所有我只能使用delegate来实现了。

       那么使用bind和delegate来绑定事件二者有什么区别的?使用 .bind() 时,选择器匹配的元素会被附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。而delegate方法通过事件委托来实现的:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。只有在真的触发该事件的时候delegate方法才会通过DOM树去寻找对应的target元素,所有即使是后来添加(局部刷新)的元素也依然能进行事件的绑定。由于现有项目使用的ASP.NET使用了大量的服务端控件,所有我选择绑定的容器是所有HTML元素的父元素"Body",核心代码如下:

     $("body").delegate(menuSelector, 'mouseleave',            
             });
    

     

    2. jQuery 对象和 DOM 原生对象有什么区别?如何转化?

    • 区别
      • DOM 对象可以使用 JavaScript 中的方法,不能使用 jQuery 里的方法
      • jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象,jQuery 无法使用 DOM 对象的任何方法,只能使用 jQuery 里的方法
    • 相互转换

      • jQuery 对象转 DOM 对象:[index] 和 get(index),示例如下:
      //[index]
      var $ct = $('#ct');
      var ct = $ct[0];
      
      //get(index)
      var $ct = $('#ct');
      var ct = $ct.get(0);
      
      • DOM 对象转 jQuery 对象:用 $() 把 DOM 对象包裹住可以了
      var ct = document.getElementById('ct');
      var $ct = $(ct);
      

    eg:在页面加载完成之后   再由脚本动态创建的<div>元素  在绑定事件的时候 例如click事件 

        本质上使用了事件委派,将事件委派在父元素身上

    $(document).ready(function(){
     $("#clickme").click(function(){
     alert("hello world click")
     })
    })
    

    参考资料&进一步阅读

    jQuery 1.9 API Documentation

    作者:晴天猪

    出处: 

    本文版权归作者和博客园共有,欢迎转载,但请注明出处。

    接到了领导给的一个New Feature,为系统的菜单导航栏进行一些个性化的操作(鼠标移到导航菜单时下方出现子菜单,移到其他的菜单选项...

    3. jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?

    • jQuery 中有4种绑定事件的方式 bind、delegate、live、on,对应的解除绑定的方式为 unbind、undelegate、live、off。
    • bind() 可以用来给元素绑定一个或多个事件,bind() 的调用方式为 bind(type, data, fn)

      • 第一个参数 type 为事件类型(blur, focus, load, click等)
      • 第二个参数 data 为可选参数,通过event.data 属性值作为传入监听函数的参数
      • 第三个参数 fn 是用来监听的处理函数
      //简单用法
      $('#ct .btn').bind('click.myClick',function () {
        $('#ct').prepend('<p>hello world</p>')
      })
      //解除绑定
      $('#ct .btn').unbind('click.myClick')
      
    • delegate() 用于事件代理,为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数;适用于当前或未来的元素(比如由脚本创建的新元素)。

    $('ul').delegate('li', 'click', function() {
      var text = $(this).text();
      console.log(text);
    })
    
    • live():这种方法是将页面的document元素作为事件代理元素,太消耗资源,已经过时。在新版本中推荐用 on() 方法,即时在旧版本中,也推荐使用 delegate() 方法来取代 live() 方法。
    • on():在选定的元素上绑定一个或多个事件处理函数,提供绑定事件处理的所有功能。注意:on() 的事件代理和 delegate 的事件代理,写法不一样,子元素和触发事件的位置不同
      //简单用法
      $('#ct .btn').on('click.myClick',function () {
        $('#ct').prepend('<p>hello world</p>')
      })
    
      //绑定事件代理
      $('ul').on('click', 'li', function() {
      var text = $(this).text();
      console.log(text);
      })
    
      //解除绑定
      $('#ct .btn').off('click.myClick')
    
    • 推荐使用:on()方法,因为既能绑定普通事件,也能绑定事件代理。
      //绑定事件代理
      $('ul').on('click', 'li', function() {
      var text = $(this).text();
      console.log(text);
      })
    
    $("div").click(function(alert("aaa")){});
    

        自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品,但是由于on()方法必须有事件,没有事件时可选择delegate();**

    第二种方式(简写方式为第一种):

    4. jQuery 如何展示/隐藏元素?

    • show()方法和 hide() 方法(宽高同时延伸)
    $('#ct').hide();
    //可以添加一个时间参数,单位是毫秒
    $('#ct').show(1000);
    
    • fadeIn() 和 fadeOut() 方法,淡入淡出效果
    $('#ct').fadeIn();
    //可以添加一个时间参数,单位是毫秒
    $('#ct').fadeOut(3000);
    
    • slideUp() 和 sildeDown() 方法,由上到下延伸(宽度不变)
    $('#ct').slideUp();
    //可以添加一个时间参数,单位是毫秒
    $('#ct').slideDown(3000);
    

    那么动态创建的元素是触发不了这个事件的

        下例为选项卡:

    $('#clickmebind').bind("click", function(){
     alert("Hello World bind");
    });
    

    5. jQuery 动画如何使用?

    • animate() 自定义动画方法,用法为animate(params, speed, callback)
      • paras:一个包含样式属性及值的映射如{left: '500px', top: '300px'}
      • speed:速度参数,可选
      • callback:在动画完成时执行的函数,可选
    $('#ct').on('click', function () {
      $(this).animate({left: '200px', top: '100px'}, 3000);
    
    • 4个专门用于交互的动画方法

      • toggle() :切换元素的可见状态
      $('#ct').on('click', function () {
       $(this).toggle();
      });
      
      • slideToggle():通过高度变化来切换元素的可见性
      $('#ct').on('click', function () {
       $(this).slideToggle(3000);
      });
      
      • fadeTo():把元素的不透明度以渐进方式调整到指定的值
      $('#ct').on('click', function () {
       $(this).fadeTo(1000, 0.2);
      });
      
      • fadeToggle():通过不透明度的变化来切换元素的可见性
      $('#ct').on('click', function () {
       $(this).fadeToggle(1000);
      });
      

    这是就要用到on来绑定事件了。

     父元素: .main .left 
    
     子元素:  li
    
    $("父元素").on("click","子元素",function(){
        var index=$(this).index();
        $(".main .right").find('li').css({"background":"#F4F4F4","color":"#333"});
        $(this).css({"background":"#fff","color":"#46c6ff"});
        $(".main .left").find('li').hide();
        $(".main .left").find('li').eq(index).show();
    });
    

    第三种方式:

    6. 如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?

    • html():设置和获取元素内部 HTML 内容
    //获取
    var ctHtml = $('#ct').html();
    //设置
    $('#ct').html('<p>hello world</p>');
    
    • text():设置和获取元素内部文本
    //获取
    var pText = $('p').text();
    //设置
    $('p').text('hello world');
    

    但是在W3C中并没有on事件  只有live,delegate 这是由于这里的更新很不及时  ,建议去 菜鸟上的小错误比较多。

    2. on()**可以获取动态元素,必须有事件**

    $('#clickmeon').on("click",function(){
     alert("hello world on")
    }) 
    

    7. 如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?

    • val():设置和获取表单用户输入或者选择的内容
    <input type="text" id="address" value="请输入地址">
    //获取输入框的值
    $('#address').val();
    //设置输入框的值
    $('#address').val('广州市xx区xx街道');
    
    • attr():设置和获取元素属性
    //获取
    var ctId = $('.ct').attr('id');
    //设置
    $('.ct').attr('id', 'container');
    $('.ct').attr('id' : 'container', 'name' : 'container');
    //移除
    $('.ct').removeAttr('id', 'name');
    

    on的定义和用法:

    **   delegate() 可以获取动态元素,可以没事件**

    注意:第三种方式只适用于jquery 1.7以上的版本

    8. 二级导航栏

    • 二级导航栏

    on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

    **   live() 可以获取动态元素,jQuery 1.9已弃用,必须有事件**

    第四种方式:

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:1010cc时时彩经典版:jQuery如何获取动态添加的元

    关键词:

上一篇:【1010cc时时彩经典版】能动态合并嘛

下一篇:没有了