插件的种类

  1. 封装对象方法的插件

将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作。

//注意,为了更好的兼容性开始前有个分号
;(function($){ //此处将$作为匿名函数的形参
/*这里放置代码,可以使用$作为jQuery的缩写别名*/
})(jQuery);//这里就将jQuery作为实参传递给匿名函数了
  1. 封装全局函数的插件

可以将独立的函数加到jQuery命名空间之下。

  1. 选择器插件

扩充自己的选择器

插件示例

设置颜色插件

(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插件示例笔记的更多相关文章

  1. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

  2. jquery插件 - 学习笔记 (插件参数及函数的调用)

    今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...

  3. 基于 Webpack 引入 jquery 插件的笔记

    如果都是基于 webpack(npm 上有包),那就非常顺利: import $ from 'jquery' import 'jquery-modal/jquery.modal.min.css' im ...

  4. jQuery插件学习笔记

    近期在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其它地方反复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外 ...

  5. jQuery插件编写笔记

    插件的种类: 1.封装对象方法的插件. 2.封装全局函数的插件. 3.选择器插件. *所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上. *在插件 ...

  6. day 57 jQuery插件

    在jQuery的console里面 '321'+8  输出结果是"3218"  直接作为字符串给拼接上了 如果是"321"-8 输出结果就是313 直接转换成数 ...

  7. 简易jQuery插件

    之前写过jQuery插件的笔记 如何用jQuery封装插件 我一直觉得前面讲了一大堆闭包和三种插件封装模式有点冗余,那篇笔记我直到记录到后面才发现这事情很简单,想来想去还是觉得网上的一些文章把事情搞复 ...

  8. DOM笔记(七):开发JQuery插件

    在上一篇笔记本中,讲解了如何利用jQuery扩展全局函数和对象:DOM笔记(六):怎么进行JQuery扩展? 在这篇笔记本中,将开发一个简单的动画插件,名称是example-plugin,用其实现一个 ...

  9. 教你开发jQuery插件(转)

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

随机推荐

  1. sicily 1059. Exocenter of a Trian

    Description Given a triangle ABC, the Extriangles of ABC are constructed as follows: On each side of ...

  2. C C++ 常被人问的问题分析

    正文  -  开始了, 直接扯淡 以下都是自己面试中遇到的常见的问题.如有不妥的地方就当见笑了. 哈哈 1. 谈谈你们服务器的架构吧. 分析: 假如这是第一个问题, 你可以走了. 可能各方面原因他不想 ...

  3. 获取file中字段,写入到TXT文件中

    一下代码省略了很多,哈哈哈 a.txt文件 uid,type,pointx,pointy,name1,9,911233763,543857286,区间测速起点3,9,906371086,5453354 ...

  4. 10 个打造 React.js App 的最佳 UI 框架

    10 个打造 React.js App 的最佳 UI 框架 在本文中,我们将分享一些助你打造 React.js App 最佳的 UI 框架.它们具备你所需要的基本 React 组件,以及易用的 API ...

  5. 数字签名(以ActiveXDemo为例)

    1.创建Install.inf文件和run.bat Install.inf: [version] signature="$CHICAGO$" AdvancedINF=2.0 [Se ...

  6. MYSQL表中向SET类型的字段插入值时值之间不能有空格

    MYSQL 中有一种数据类型是 SET,首先我们查看一个包含 SET 类型字段的表结构: 接下来我们向表中插入数据: 按照上面的语句插入数据发现报错了,于是去掉了插入值之间的空格,然后插入成功:

  7. leetcode 136 137 Single Number

    题目描述(面试常考题) 借助了异或的思想 class Solution { public: int singleNumber(vector<int>& nums) { ; ; i ...

  8. leetcode 之Single Number(13)

    看见这题我的第一反应是用哈希来做,不过更简洁的做法是用异或来处理,只要是偶数个都为0(0和任意数异或仍为数本身). int singleNumber(int A[], int n) { ; ; i & ...

  9. Tomcat手动指定jdk路径

    Windows系统: 修改bin下的setclasspath.bat,在开头处添加: rem set specific jdkset JAVA_HOME=%CATALINA_HOME%\jdk1.8. ...

  10. 百度之星资格赛--IP聚合

    IP聚合 Accepts: 1901 Submissions: 4979 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/6553 ...