jQuery事件对象

2022-04-17 07:45:54 浏览数 (1)

jQuery事件对象其实就是js事件对象的一个封装,处理了兼容性。

代码语言:javascript复制

    //screenX和screenY    对应屏幕最左上角的值
    //clientX和clientY    距离页面左上角的位置(忽视滚动条)
    //pageX和pageY    距离页面最顶部的左上角的位置(会计算滚动条的距离)
    
    //event.keyCode    按下的键盘代码
    //event.data    存储绑定事件时传递的附加数据
    
    //event.stopPropagation()    阻止事件冒泡行为
    //event.preventDefault()    阻止浏览器默认行为
    //return false:既能阻止事件冒泡,又能阻止浏览器默认行为。

jQuery补充知识点

链式编程

通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 jQuery对象。

代码语言:javascript复制
    end(); // 筛选选择器会改变jQuery对象的DOM对象,想要回复到上一次的状态,并且返回匹配元素之前的状态。

【案例:五角星评分案例.html】

each方法

jQuery的隐式迭代会对所有的DOM对象设置相同的值,但是如果我们需要给每一个对象设置不同的值的时候,就需要自己进行迭代了。

作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数

代码语言:javascript复制

    // 参数一表示当前元素在所有匹配元素中的索引号
    // 参数二表示当前元素(DOM对象)
    $(selector).each(function(index,element){});

【案例:不同的透明度.html】

多库共存

jQuery使用作 为 标 示 符 , 但 是 如 果 与 其 他 框 架 中 的 作为标示符,但是如果与其他框架中的作为标示符,但是如果与其他框架中的冲突时,jQuery可以释放$符的控制权.

代码语言:javascript复制
    var c = $.noConflict();//释放$的控制权,并且把$的能力给了c

插件

常用插件

插件:jquery不可能包含所有的功能,我们可以通过插件扩展jquery的功能。

jQuery有着丰富的插件,使用这些插件能给jQuery提供一些额外的功能。

jquery.color.js

animate不支持颜色的渐变,但是使用了jquery.color.js后,就可以支持颜色的渐变了。

使用插件的步骤

代码语言:javascript复制

    //1. 引入jQuery文件
    //2. 引入插件(如果有用到css的话,需要引入css)
    //3. 使用插件

jquery.lazyload.js

懒加载插件

jquery.ui.js插件

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API:http://api.jqueryui.com/category/all/

其他教程:jQueryUI教程

基本使用:

代码语言:javascript复制
    //1.    引入jQueryUI的样式文件
    //2.    引入jQuery
    //3.    引入jQueryUI的js文件
    //4.    使用jQueryUI功能

使用jquery.ui.js手风琴菜单

制作jquery插件

原理:jquery插件其实说白了就是给jquery对象增加一个新的方法,让jquery对象拥有某一个功能。

代码语言:javascript复制
//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};

0 人点赞