码迷,mamicode.com
首页 > Web开发 > 详细

jQuery(四)

时间:2019-09-27 21:15:00      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:false   class   tst   jquer   事件绑定   事件委托   javascrip   自动   服务   

1、jQuery事件

  • 事件注册
    • 元素.事件(function(){})

2、事件处理 on() 绑定事件

  • 语法: element.on(events, [selector], fn)

    • events:一个或多个用空格分隔的事件类型,如"click","keydown"
    • selector:元素的子元素选择器
    • fn:回调函数 即绑定在元素身上的侦听函数
  • on() 方法优势

    • 1、可以绑定多个事件、多个处理事件处理程序

       $(“div”).on({
        mouseover: function(){},
        mouseout: function(){},
        click: function(){} 
      
      }); 
    • 2、事件委派

      • 把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。

        $('ul').on('click', 'li', function() {
           alert('hello world!');
        }); 
    • 3、动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件

       $(“div").on("click",”p”, function(){
         alert("给动态生成的元素绑定事件")
       });

3、解除事件绑定

  • off()

    $("p").off() // 解绑p元素所有事件处理程序
    
    $("p").off( "click")  // 解绑p元素上面的点击事件 
    
    $("ul").off("click", "li");   // 解绑事件委托
  • 如果有的事件只想触发一次, 可以使用 one() 来绑定事件

4、自动触发事件

  • 简写

  • 对象调方法

  • trigger() 会触发元素默认效果

    $("p").on("click", function () {
    
      alert("hi~");
    
    }); 
    
    $("p").trigger("click"); // 此时自动触发点击事件,不需要鼠标点击
  • triggerHandler() 不会触发元素的默认行为

5、jQuery事件对象

  • 事件被触发,就会有事件对象的产生
  • 阻止默认行为
    • e.preventDefault() 或者 return false
    • 阻止事件冒泡
      • e.stopPropagation();

6、瀑布流

7、图片懒加载

  • 看到哪里加载到哪里

8、BootStrap插件

  • 图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载

jQuery(四)

标签:false   class   tst   jquer   事件绑定   事件委托   javascrip   自动   服务   

原文地址:https://www.cnblogs.com/itxcr/p/11600069.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!