jQuery事件


  • 能够说出四种常见的注册事件
  • 能够说出on绑定事件的优势
  • 能够说出jQuery事件委派的优点及方式
  • 能够说出绑定事件与解绑事件
  • 能够说出jQuery对象的拷贝
  • 能够说出jQuery多库共存的两种方法
  • 能够使用jQuery插件

jQuery事件注册

单个事件注册

element.事件(function(){ })

事件类型和DOM 类似

jQuery事件处理

on()绑定事件

  1. 可以绑定多个事件,多个事件处理程序

    $("div").on({
        mouseover: function(){},
        mouseout: function(){},
        click:function(){}
    });

    ​ 如果时间处理程序相同

    $("div").on("mouseover mouseout",function(){
        $(this).toggleClass("current");
    });
  2. 可以事件委派操作。把原来加给子元素身上的事件绑定在父元素身上

    //  click 是绑定在ul身上的,但是触发的对象是ul里面的li
    $("ol").on("click", "li", function(){
        xxx;
    })
  3. 可以给未来动态创建的元素绑定事件

    $("ol").on("click", "li", function() {
        xxx;
    })
    var li = $("<li>我是后来创建的</li>");
    $("ol").append(li);

    案例:发布微博

案例效果:GO

off解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

自动触发事件

有些事件希望被==自动触发==

  • element.click( )

jQuery事件对象

事件被触发,就会有事件对象的产生。

element.on(events,[selector],function(event){ })

阻止默认行为:event.preventDefault()

阻止冒泡: event.stopPropagation()

jQuery拷贝对象

语法:$extend([deep],target,object1,[objectN])

  1. deep:如果为true则为==深拷贝==,默认为false,浅拷贝
  2. target:要拷贝的随想
  3. object:待拷贝的对象

jQuery多库共存

jQuery使用$作为标识符,随着jQuery的流行,其他js库也会使用$作为标识符,这样一起使用会引起冲突

解决方案:

  1. 把里面的$符号统一改为jQuery。// jQuery(“div”)
  2. 将jQuery变量定义成新的名称, // $.noConflict() var xxx = $.noConflict();

jQuery插件

插件常用网站

https://www.jq22.com/

http://www.htmleaf.com/

jQuery插件使用步骤

  1. 引入jQuery文件和插件文件
  2. 复制相关html、css和js文件

jQuery插件-瀑布流

jQuery插件-懒加载

图片使用延迟加载可以提高网页下载速度,帮助减轻服务器负载。当使用jQuery插件库easylazyload时,js引入文件和调用必须写到DOM后面

jQuery插件-全屏滚动

fullpage.js

Bootstrap

​ Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架,他依靠jQuery实现,且支持响应式布局,使得 Web 开发更加方便快捷。

​ Bootstrap组件使用非常方便: 1.引入bootstrap相关css和js 2.去官网复制html

综合案例:toDolist

案例效果:GO

jQuery尺寸位置操作

尺寸

  • 以上参数为空,则是获取相应值;如果参数为数字,则是修改相应值

位置

位置主要有三个:offset()、position()、scrollTop()/scrollLeft()

  • offset()设置或获取元素偏移,该方法有两个属性left、top
  • position()用于获取带有定位的父级偏移,如果没有带定位的父级,则以文档为主

案例:品优购电梯导航

案例效果:GO


文章作者: linxueya
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 linxueya !
评论
  目录
喜迎
春节