jQuery (二)

asoren 发布于2019-08-23 11:28 / 1083人阅读

摘要：文件命名需要使用的库该库已经两年未更新了，不过依旧在回复中，对于库的检查，已经完全测试通过一个栗子，日期选择将为中的元素统统替换为日期选择组件

使用jQuery处理事件 事件处理

一个栗子，单击p时背景变成灰色

由于es6的箭头函数不支持this的绑定，所以无法使用箭头函数，只能使用匿名函数

html

hello world

// 单击任意p时，使其背景变成灰色
$("p").click(function () { $(this).css("background-color", "gray"); });

效果

或者使用第二个参数，添加相关的属性，完成事件的相关触发

// 单击任意p时，使其背景变成灰色
$(""));
        });
        // 返回这个未加修改过的jQuery对象，方便链式调用
        return this;
    }

ps 这个灰常简单，原型链那一套内容，需要注意的是要进行返回该对象，否则无法进行链式调用

使用一下下

$("#debug").println("x =", "x", "y");

即完成了一个jquery的插件的封装
使用jQuery.fx.speeds完成对缓动函数的封装
扩展css选择，使用jQuery.expr[";"]完成对css选择的封装

jQuery.expr[":"].draggable = function(e) {
    return e.draggable === true;
}

使用

$("img:draggable");

等价于

$("img[draggable=true]")

上方封装的一个选择器为可拖动的元素

当draggable为true的时候，可以对元素进行拖动，这是h5的内容

一些注意事项

不要依赖$
插件要返回this
插件有两个或者两个以上的选项，使用对象直接传入
不能污染命名空间，请在jquery上定义一个方法即可，如果有多个方法，请直接使用前缀
如果有事件需要绑定，使用插件名作为命名空间，然后放在插件名中，即，不能使用全局的
如果插件需要使用data()方法关联数据数据值要在一个对象中。
文件命名需要使用jquery.plugin.js

jQuery的UI库

https://jqueryui.com/

ps 该库已经两年未更新了，不过lssues 依旧在回复中，对于库的检查 https://travis-ci.org/jquery/...，已经完全测试通过

一个栗子，日期选择

$("input.date").datepicker();

将class为data中的input元素统统替换为日期选择组件

云服务器 GPU云服务器双十二优惠双十二促销第二域名双十二万网

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97002.html

细说 jQuery 事件篇（二） - 处理简单事件

摘要：我们可以利用可以对用户发起的事件进行处理，这里以样式转换为例来说明。其他类似的操作事件都可以通过这个方法，将处理事件的程序绑定到同名事件上面。我们可以利用 jQuery 可以对用户发起的事件进行处理，这里以样式转换为例来说明。增添样式基于用户的事件，对特定的 DOM 元素样式进行转换是 jQuery 处理事件中比较常见的情形，举例说明，当用户点击输入框后，会增添 highli...

ckllj 2019-08-19 14:51 评论0 收藏0
jQuery基础（二）DOM篇

摘要：将匹配元素集合的父级元素删除，保留自身和兄弟元素，如果存在在原来的位置。方法查找指定元素集合中每一个元素的同辈元素。每次回调函数执行时，会传递当前循环次数作为参数从开始计数。 DOM节点的创建先介绍下需要用到的浏览器提供的一些原生的方法（这里不处理低版本的IE兼容问题）创建流程比较简单，大体如下：创建节点(常见的：元素、属性和文本) 添加节点的一些属性加入到文档中流程中涉及的一...

Harpsichord1207 2019-08-22 10:42 评论0 收藏0
JQuery DOM 常用操作汇总

摘要：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。请求完成后回调函数请求成功或失败时均调用。一、JQuery对象的基本方法： (1) get(); 取得所有匹配的元素 (2) get(index); 取得其中一个匹配的元素 $(this).get(0) 等同于 $(this)[0] (3) Number index(jqueryObj); 搜索子对象 (...

airborne007 2019-08-21 10:24 评论0 收藏0
W3School 教程整理

摘要：离线版大部分整理自，少部分整理自，由本人整理。感谢站长的无私奉献。由于本人精力有限，此处的列表不一定能够及时更新，最新版本请到本人博客查看。离线版大部分整理自 w3cschool ，少部分整理自 w3school ，由本人整理。感谢 w3cschool 站长的无私奉献。由于本人精力有限，此处的列表不一定能够及时更新，最新版本请到本人博客查看。 AngularJS教程最后更...

douzifly 2019-08-21 10:22 评论0 收藏0
W3School 教程整理

摘要：离线版大部分整理自，少部分整理自，由本人整理。感谢站长的无私奉献。由于本人精力有限，此处的列表不一定能够及时更新，最新版本请到本人博客查看。离线版大部分整理自 w3cschool ，少部分整理自 w3school ，由本人整理。感谢 w3cschool 站长的无私奉献。由于本人精力有限，此处的列表不一定能够及时更新，最新版本请到本人博客查看。 AngularJS教程最后更...

CoffeX 2019-08-01 14:43 评论0 收藏0
W3School 教程整理

摘要：离线版大部分整理自，少部分整理自，由本人整理。感谢站长的无私奉献。由于本人精力有限，此处的列表不一定能够及时更新，最新版本请到本人博客查看。离线版大部分整理自 w3cschool ，少部分整理自 w3school ，由本人整理。感谢 w3cschool 站长的无私奉献。由于本人精力有限，此处的列表不一定能够及时更新，最新版本请到本人博客查看。 AngularJS教程最后更...

Dionysus_go 2019-07-01 14:12 评论0 收藏0