jQuery插件示例笔记
插件的种类
- 封装对象方法的插件
将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作。
//注意,为了更好的兼容性开始前有个分号
;(function($){ //此处将$作为匿名函数的形参
/*这里放置代码,可以使用$作为jQuery的缩写别名*/
})(jQuery);//这里就将jQuery作为实参传递给匿名函数了
- 封装全局函数的插件
可以将独立的函数加到jQuery命名空间之下。
- 选择器插件
扩充自己的选择器
插件示例
设置颜色插件
(function ($) {
$.fn.extend({
"color": function (value) {
//if (value == undefined) {
// return this.css("color");
//} else {
// return this.css("color", value);
//}
//css()方法内部已经有了判断value是否为undefined的机制,所以可以采用下面的写法
return this.css("color", value);
},
"border": function (value) { },
"background": function (value) {
return this.css('background', value);
}
});
})(jQuery);
设置表格插件,奇偶行,选中状态
(function ($) {
$.fn.extend({
"alterBgColor": function (options) {
options = $.extend({
odd: "odd", //偶数行样式
even: "even", //奇数行样式
selected:"selected" //选中行样式
},options);
return this.each(function () {
$("tbody>tr:odd", this).addClass(options.odd);
$("tbody>tr:even", this).addClass(options.even);
$("tbody>tr", this).click(function () {
//判断当前行是否选中
var hasSelected = $(this).hasClass(options.selected);
//如果选中,则移除selected类,否则就加上selected类
$(this)[hasSelected ? "removeClass" : "addClass"](options.selected)
//查找内部的checkbox,设置对应的属性
.find(':checkbox').attr('checked', !hasSelected);
});
//如果单选框默认情况下是选择的,则高亮
$("tbody>tr:has(:checked)", this).addClass(options.selected);
});
}
});
})(jQuery);
去除头部空格,尾部空格插件
(function ($) {
$.extend({
trimStart: function (text) {
return (text || "").replace(/^\s+/g, "");
},
trimEnd: function (text) {
return (text || "").replace(/\s+$/g, "");
}
});
})(jQuery);
选择器插件,选择范围。
jQuery1.3版本能用,1.8及以后版本不能使用
(function ($) {
$.fn.extend(jQuery.expr[':'], {
between2: function (a, i, m,arr) {
var tmp = m[3].split(',');
var ret = tmp[0] - 0 < i && i < tmp[1] - 0;
return ret;
},
ge: function (a, i, m) {
return i >= m[3] - 0;
},
le: function (a, i, m) {
return i <= m[3] - 0;
}
});
})(jQuery);
jQuery插件示例笔记的更多相关文章
- 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuer ...
- jquery插件 - 学习笔记 (插件参数及函数的调用)
今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...
- 基于 Webpack 引入 jquery 插件的笔记
如果都是基于 webpack(npm 上有包),那就非常顺利: import $ from 'jquery' import 'jquery-modal/jquery.modal.min.css' im ...
- jQuery插件学习笔记
近期在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其它地方反复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外 ...
- jQuery插件编写笔记
插件的种类: 1.封装对象方法的插件. 2.封装全局函数的插件. 3.选择器插件. *所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上. *在插件 ...
- day 57 jQuery插件
在jQuery的console里面 '321'+8 输出结果是"3218" 直接作为字符串给拼接上了 如果是"321"-8 输出结果就是313 直接转换成数 ...
- 简易jQuery插件
之前写过jQuery插件的笔记 如何用jQuery封装插件 我一直觉得前面讲了一大堆闭包和三种插件封装模式有点冗余,那篇笔记我直到记录到后面才发现这事情很简单,想来想去还是觉得网上的一些文章把事情搞复 ...
- DOM笔记(七):开发JQuery插件
在上一篇笔记本中,讲解了如何利用jQuery扩展全局函数和对象:DOM笔记(六):怎么进行JQuery扩展? 在这篇笔记本中,将开发一个简单的动画插件,名称是example-plugin,用其实现一个 ...
- 教你开发jQuery插件(转)
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...
随机推荐
- sicily 1059. Exocenter of a Trian
Description Given a triangle ABC, the Extriangles of ABC are constructed as follows: On each side of ...
- C C++ 常被人问的问题分析
正文 - 开始了, 直接扯淡 以下都是自己面试中遇到的常见的问题.如有不妥的地方就当见笑了. 哈哈 1. 谈谈你们服务器的架构吧. 分析: 假如这是第一个问题, 你可以走了. 可能各方面原因他不想 ...
- 获取file中字段,写入到TXT文件中
一下代码省略了很多,哈哈哈 a.txt文件 uid,type,pointx,pointy,name1,9,911233763,543857286,区间测速起点3,9,906371086,5453354 ...
- 10 个打造 React.js App 的最佳 UI 框架
10 个打造 React.js App 的最佳 UI 框架 在本文中,我们将分享一些助你打造 React.js App 最佳的 UI 框架.它们具备你所需要的基本 React 组件,以及易用的 API ...
- 数字签名(以ActiveXDemo为例)
1.创建Install.inf文件和run.bat Install.inf: [version] signature="$CHICAGO$" AdvancedINF=2.0 [Se ...
- MYSQL表中向SET类型的字段插入值时值之间不能有空格
MYSQL 中有一种数据类型是 SET,首先我们查看一个包含 SET 类型字段的表结构: 接下来我们向表中插入数据: 按照上面的语句插入数据发现报错了,于是去掉了插入值之间的空格,然后插入成功:
- leetcode 136 137 Single Number
题目描述(面试常考题) 借助了异或的思想 class Solution { public: int singleNumber(vector<int>& nums) { ; ; i ...
- leetcode 之Single Number(13)
看见这题我的第一反应是用哈希来做,不过更简洁的做法是用异或来处理,只要是偶数个都为0(0和任意数异或仍为数本身). int singleNumber(int A[], int n) { ; ; i & ...
- Tomcat手动指定jdk路径
Windows系统: 修改bin下的setclasspath.bat,在开头处添加: rem set specific jdkset JAVA_HOME=%CATALINA_HOME%\jdk1.8. ...
- 百度之星资格赛--IP聚合
IP聚合 Accepts: 1901 Submissions: 4979 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/6553 ...