小色帝
- 浏览: 67823 次
-
文章分类
最新评论
-
小色帝：
我是天才是打发
Jquery实现的Tabs页 -
小色帝：
小色帝 写道1111而温热
Jquery实现的Tabs页 -
小色帝：
1111而温热
Jquery实现的Tabs页
jQuery插件原来如此简单 jQuery插件的机制及实战
作者： 字体：[增加 减小] 类型：转载 时间：2012-02-07 我要评论
这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件
jQuery插件的种类
1、封装对象方法
这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势，有相当一部分的jQuery的方法，都是在jQuery脚本库内部通过这种形式“插”在内核上的，例如parent()方法，appendTo()方法等。
2、封装全局函数
可以将独立的函数加到jQuery命名空间下。如常用的jQuery.ajax()方法、去首尾空格的jQuery.trim()方法，都是jQuery内部作为全局函数的插件附加到内核上去的。
3、选择器插件
虽然jQuery的选择器十分强大，但在少数情况下，还是会需要用到选择器插件来扩充一些自己喜欢的选择器。
jQuery插件的机制
jQuery插件的机制很简单，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，扩展jQuery的功能。
jQuery.fn.extend()多用于扩展上面提到的3种类型中的第一种，jQuery.extend()用于扩展后两种插件。这两个方法都接受一个参数，类型为Object。Object对象的“名/值对”分别代表“函数或方法名/函数主体”。
编写jQuery插件的一些Tips
1、jQuery插件的文件名推荐命名为jquery.[插件名].js，以免和其他JS库插件混淆。
2、所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身。
3、在插件头部加上一个分号，以免他人的不规范代码给插件带来影响。
4、所有的方法或函数插件，都应当以分号结尾，以免压缩时出现问题
5、除非插件需要返回的是一些需要获取的变量，插件应该返回一个jQuery对象，以保证插件的可链式操作。
6、利于jQuery.extend()方法设置插件方法的默认参数，增加插件的可用性。
jQuery插件结构
jQuery插件结构如下：
复制代码 代码如下:
;(function($){
/*这里放插件代码，可以将$作为jQuery的别名*/
})(jQuery);
封装jQuery对象方法插件实战
功能：设置选择的元素的颜色，获取选择的首个元素的颜色
命名：jquery.color.js
结构：
复制代码 代码如下:
;(function($){
$.fn.extend({
//这里写插件代码
});
})(jQuery);
思路：设置一个参数value，如果调用时传递了value这个参数，就是设置颜色，否则为获取颜色。获取和设置颜色可以用jQuery提供的css方法即可
完整代码：
复制代码 代码如下:
;(function($){
$.fn.extend({
"color":function(value){
if(value==undefined){
return this.css("color");
}
else{
return this.css("color",value);
}
}
});
})(jQuery);
由于css()方法在获取颜色时已有取第一个元素的判断，所以这里直接用this.css("color")即可。
如果是一组插件，可以用如下写法：
复制代码 代码如下:
;(function($){
$.fn.extend({
"color":function(value){
//插件代码
}，
"border":function(value){
//插件代码
}，
"background":function(value){
//插件代码
}
});
})(jQuery);
插件测试： http://demo.jb51.net/js/2012/jquery_demo/封装jQuery对象方法插件Demo.html
封装全局函数插件实战
功能：单独去除左侧或单独去除右侧的空格
命名：jquery.lrtrim.js
结构：
复制代码 代码如下:
;(function($){
$.extend({
ltrim:function(text){
//插件代码
}，
rtrim:function(text){
//插件代码
}
});
})(jQuery);
思路：这类插件是在jQuery命名空间内部添加一个函数，直接用正则表达式即可。
完整代码：
复制代码 代码如下:
;(function($){
$.extend({
ltrim:function(text){
return (text||"").replace(/^\s+/g,"");
},
rtrim:function(text){
return (text||"").replace(/\s+$/g,"");
}
});
})(jQuery);
插件测试： http://demo.jb51.net/js/2012/jquery_demo/封装全局函数jQuery插件Demo.html
自定义选择器插件实战
jQuery以其强大的选择器著称，那么jQuery的选择器的工作原理是什么呢？
jQuery的选择解析器首先会使用一组正则表达式来解析选择器，然后针对解析出的每一个选择符执行一个函数，称为选择函数。最后根据这个选择函数的返回值为true还是false来决定是否保留这个元素，这样就可以找到匹配的元素节点。
如$("div:gl(1)")，该选择器首先会获取所有的<div>元素，然后隐式地遍历这些<div>元素，并逐个将这些<div>元素作为参数，连同括号里的“1”等一些参数一起传递给gt对应的选择器函数进行判断。如果返回true则保留，否则不保留，这样得到的结果就是一个符合要求的<div>元素的集合。
选择器的函数一共接受3个参数，形式如下：
复制代码 代码如下:
function (a,i,m){
//...
}
第一个参数为a，指的是当前遍历到的DOM元素。
第二个参数为i，指的是当前遍历到的DOM元素的索引值，从0开始。
第三个参数是m，它是由jQuery正则解析引擎进一步解析后的产物，是一个数组：其中最重要的一个是m[3]，在$("div:gl(1)")中即为括号里的数字“1”。
在jQuery中已经有lt,gt和eq选择器，因此这里写一个介于两者之间(between)的选择器。
功能：选择索引值为a到b之间(a<b，a、b为正整数)的元素
命名：jquery.between.js
结构：
复制代码 代码如下:
;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
//插件代码
}
});
})(jQuery);
思路：在上面的三个参数中，m[3]为"a,b"的形式，因此把m[3]用","分隔，然后跟索引值i进行对比，如果i在m[3]表示的范围之间就返回true，否则为false
完整代码：
复制代码 代码如下:
;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
var temp=m[3].split(",");
return +temp[0]<i&&i<+temp[1];
}
});
})(jQuery);
注：这里用+temp[0]、+temp[1]把字符串形式的数字转换成了数字
插件测试： http://demo.jb51.net/js/2012/jquery_demo/jQuery自定义选择器插件DEMO.html
小结
本文主要介绍了jQuery插件的种类，机制，并针对每种类型进行了实战，希望能对大家有所帮助。本人也是jQuery的初学者，欢迎大家拍砖。
参考书籍：《锋利的jQuery》(人民邮电出版社)
前台实例代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>封装全局函数jQuery插件Demo</title>
<script src="/jslib/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
;(function($){
$.extend({
ltrim:function(text){
return (text||"").replace(/^\s+/g,"");
},
rtrim:function(text){
return (text||"").replace(/\s+$/g,"");
}
});
})(jQuery);
function trimTest(){
alert("a"+jQuery.trim(" test ")+"b");
}
function ltrim(){
alert("a"+jQuery.ltrim(" test ")+"b");
}
function rtrim(){
alert("a"+jQuery.rtrim(" test ")+"b");
}
</script>
</head>
<body>
<input type="button" onclick="trimTest()" value="trim"/>
<input type="button" onclick="ltrim()" value="ltrim"/>
<input type="button" onclick="rtrim()" value="rtrim"/>
</body>
</html>
作者： 字体：[增加 减小] 类型：转载 时间：2012-02-07 我要评论
这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件
jQuery插件的种类
1、封装对象方法
这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势，有相当一部分的jQuery的方法，都是在jQuery脚本库内部通过这种形式“插”在内核上的，例如parent()方法，appendTo()方法等。
2、封装全局函数
可以将独立的函数加到jQuery命名空间下。如常用的jQuery.ajax()方法、去首尾空格的jQuery.trim()方法，都是jQuery内部作为全局函数的插件附加到内核上去的。
3、选择器插件
虽然jQuery的选择器十分强大，但在少数情况下，还是会需要用到选择器插件来扩充一些自己喜欢的选择器。
jQuery插件的机制
jQuery插件的机制很简单，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，扩展jQuery的功能。
jQuery.fn.extend()多用于扩展上面提到的3种类型中的第一种，jQuery.extend()用于扩展后两种插件。这两个方法都接受一个参数，类型为Object。Object对象的“名/值对”分别代表“函数或方法名/函数主体”。
编写jQuery插件的一些Tips
1、jQuery插件的文件名推荐命名为jquery.[插件名].js，以免和其他JS库插件混淆。
2、所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身。
3、在插件头部加上一个分号，以免他人的不规范代码给插件带来影响。
4、所有的方法或函数插件，都应当以分号结尾，以免压缩时出现问题
5、除非插件需要返回的是一些需要获取的变量，插件应该返回一个jQuery对象，以保证插件的可链式操作。
6、利于jQuery.extend()方法设置插件方法的默认参数，增加插件的可用性。
jQuery插件结构
jQuery插件结构如下：
复制代码 代码如下:
;(function($){
/*这里放插件代码，可以将$作为jQuery的别名*/
})(jQuery);
封装jQuery对象方法插件实战
功能：设置选择的元素的颜色，获取选择的首个元素的颜色
命名：jquery.color.js
结构：
复制代码 代码如下:
;(function($){
$.fn.extend({
//这里写插件代码
});
})(jQuery);
思路：设置一个参数value，如果调用时传递了value这个参数，就是设置颜色，否则为获取颜色。获取和设置颜色可以用jQuery提供的css方法即可
完整代码：
复制代码 代码如下:
;(function($){
$.fn.extend({
"color":function(value){
if(value==undefined){
return this.css("color");
}
else{
return this.css("color",value);
}
}
});
})(jQuery);
由于css()方法在获取颜色时已有取第一个元素的判断，所以这里直接用this.css("color")即可。
如果是一组插件，可以用如下写法：
复制代码 代码如下:
;(function($){
$.fn.extend({
"color":function(value){
//插件代码
}，
"border":function(value){
//插件代码
}，
"background":function(value){
//插件代码
}
});
})(jQuery);
插件测试： http://demo.jb51.net/js/2012/jquery_demo/封装jQuery对象方法插件Demo.html
封装全局函数插件实战
功能：单独去除左侧或单独去除右侧的空格
命名：jquery.lrtrim.js
结构：
复制代码 代码如下:
;(function($){
$.extend({
ltrim:function(text){
//插件代码
}，
rtrim:function(text){
//插件代码
}
});
})(jQuery);
思路：这类插件是在jQuery命名空间内部添加一个函数，直接用正则表达式即可。
完整代码：
复制代码 代码如下:
;(function($){
$.extend({
ltrim:function(text){
return (text||"").replace(/^\s+/g,"");
},
rtrim:function(text){
return (text||"").replace(/\s+$/g,"");
}
});
})(jQuery);
插件测试： http://demo.jb51.net/js/2012/jquery_demo/封装全局函数jQuery插件Demo.html
自定义选择器插件实战
jQuery以其强大的选择器著称，那么jQuery的选择器的工作原理是什么呢？
jQuery的选择解析器首先会使用一组正则表达式来解析选择器，然后针对解析出的每一个选择符执行一个函数，称为选择函数。最后根据这个选择函数的返回值为true还是false来决定是否保留这个元素，这样就可以找到匹配的元素节点。
如$("div:gl(1)")，该选择器首先会获取所有的<div>元素，然后隐式地遍历这些<div>元素，并逐个将这些<div>元素作为参数，连同括号里的“1”等一些参数一起传递给gt对应的选择器函数进行判断。如果返回true则保留，否则不保留，这样得到的结果就是一个符合要求的<div>元素的集合。
选择器的函数一共接受3个参数，形式如下：
复制代码 代码如下:
function (a,i,m){
//...
}
第一个参数为a，指的是当前遍历到的DOM元素。
第二个参数为i，指的是当前遍历到的DOM元素的索引值，从0开始。
第三个参数是m，它是由jQuery正则解析引擎进一步解析后的产物，是一个数组：其中最重要的一个是m[3]，在$("div:gl(1)")中即为括号里的数字“1”。
在jQuery中已经有lt,gt和eq选择器，因此这里写一个介于两者之间(between)的选择器。
功能：选择索引值为a到b之间(a<b，a、b为正整数)的元素
命名：jquery.between.js
结构：
复制代码 代码如下:
;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
//插件代码
}
});
})(jQuery);
思路：在上面的三个参数中，m[3]为"a,b"的形式，因此把m[3]用","分隔，然后跟索引值i进行对比，如果i在m[3]表示的范围之间就返回true，否则为false
完整代码：
复制代码 代码如下:
;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
var temp=m[3].split(",");
return +temp[0]<i&&i<+temp[1];
}
});
})(jQuery);
注：这里用+temp[0]、+temp[1]把字符串形式的数字转换成了数字
插件测试： http://demo.jb51.net/js/2012/jquery_demo/jQuery自定义选择器插件DEMO.html
小结
本文主要介绍了jQuery插件的种类，机制，并针对每种类型进行了实战，希望能对大家有所帮助。本人也是jQuery的初学者，欢迎大家拍砖。
参考书籍：《锋利的jQuery》(人民邮电出版社)
前台实例代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>封装全局函数jQuery插件Demo</title>
<script src="/jslib/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
;(function($){
$.extend({
ltrim:function(text){
return (text||"").replace(/^\s+/g,"");
},
rtrim:function(text){
return (text||"").replace(/\s+$/g,"");
}
});
})(jQuery);
function trimTest(){
alert("a"+jQuery.trim(" test ")+"b");
}
function ltrim(){
alert("a"+jQuery.ltrim(" test ")+"b");
}
function rtrim(){
alert("a"+jQuery.rtrim(" test ")+"b");
}
</script>
</head>
<body>
<input type="button" onclick="trimTest()" value="trim"/>
<input type="button" onclick="ltrim()" value="ltrim"/>
<input type="button" onclick="rtrim()" value="rtrim"/>
</body>
</html>
分享到：
发表评论
-
项目里 Jquery 日期空间,vilidation,highchars控件
2017-03-06 11:24 0项目中用到了一个Jquery 日期控件，挺好用的，特意总结下 ... -
jquery常用事件（整理）
2017-02-13 17:47 269Jquery事件 (一)、事件 ... -
开源轻量级移动端友好的JS地图库——leaflet学习教程
2017-01-05 18:57 1187开源轻量级移动端友好的JS地图库——leaflet学习教程 ... -
$("parent > child")、$("A B")、$("div#test")、$("div,#test")、$(".test","div")
2016-12-15 10:38 334这个标题似乎有些奇怪，但这些都是合法有效的jQuery选择器。 ... -
type=＂button＂ ,＂submit＂ 的区别（转）
2016-07-22 11:16 488type=＂button＂ ,＂submit＂ 的区别 ... -
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2016-07-21 14:10 415Jquery中$.get(),$.post(),$.a ... -
Ztree用法事例
2016-05-17 01:11 533【简介】 zTree 是利用 jQuery 的核心代码，实现一 ... -
jQuery 数据缓存data(name, value)详解及实现
2016-05-16 10:35 423本文要讨论的是最流行的JavaScript框架jQuery的数 ... -
jQuery数据缓存$.data 的使用以及源码解析
2016-05-16 00:49 432jQuery数据缓存$.data 的使用以及源码解析 实现原 ... -
jQuery.data()
2016-05-16 00:48 330jQuery.data() 所属分类：数据操作 | 工具类 E ... -
jQuery之AJAX
2016-05-16 00:16 402jQuery之AJAX 一、load() 加载页面数据 ... -
JQuery OrgChart
2016-05-15 12:36 568Query OrgChart 是一个jQuery插件能够让帮你 ... -
JS横向树（组织结构）
2016-05-15 11:19 2920最近看到不少人有类似的需求，实现组织架构的横向展开，显示，无聊 ... -
我也来说说怎么封装jQuery插件
2016-05-14 19:32 400http://www.w3cfuns.com/notes/17 ... -
echarts 各个属性意义注释
2016-05-14 18:27 1079<!DOCTYPE html PUBLIC " ... -
Echarts 仪表盘实例
2016-05-14 00:51 5279HTML 首先引入Echarts，然后在需要放置图表的地方加上 ... -
Jquery封装对象实例
2016-05-14 00:48 573jQuery自定义类封装 jQuery自定义类封装： ( ... -
Jquery 选择器总结
2015-04-15 19:21 517jQuery 的选择器可谓之强 ... -
关于SS框架后台代码开发规范实例
2013-02-01 17:20 1009工作半年了，接触的第一个项目就是SS为后台的框架的开发。 ... -
jquery 里面的.find() .each() .parent() .value(parseInt())
2013-02-01 09:33 20331.find() 方法获得当前元素集合中每个元素的后代，通过选 ...
相关推荐
2. **jQuery插件机制**：深入理解jQuery插件的编写方式，包括如何封装代码、设置选项、处理事件和扩展jQuery对象。 3. **常见插件应用**：学习诸如Bootstrap、jQuery UI等流行框架中的插件，例如，如何使用...
- 创建可重用的jQuery插件。 5. **综合案例分析**： - 复杂项目中的jQuery应用示例。 - 性能优化策略。 #### 三、jQuery的核心优势 - **简洁性**：jQuery通过简洁的语法使得原本复杂的JavaScript代码变得更加...
6. 插件生态系统：jQuery拥有丰富的插件库，如jQuery UI，提供更高级的功能，如日期选择器、拖放等。 在实战中，学习如何将JavaScript和jQuery结合，可以创建出高效、用户友好的Web应用。例如，通过JavaScript进行...
《JavaScript和jQuery实战手册》是一本深入探讨JavaScript和jQuery编程技术的专业书籍，旨在帮助读者掌握这两门重要技术，提升Web开发能力。JavaScript是互联网上最广泛使用的脚本语言，而jQuery则是JavaScript的一...
- **插件扩展**：jQuery提供了丰富的插件机制，可以方便地扩展其功能。 #### 三、jQuery实战应用 - **基础用法**： - 加载jQuery库； - 使用`$(document).ready()`确保文档加载完成后执行脚本。 - **示例代码**：...
5. 插件机制（Plugins）：由于jQuery的开放性，它有一个庞大的插件社区，这些插件可以扩展jQuery的功能，实现如表单验证、轮播图、图片懒加载等多种复杂功能。 6. 跨浏览器兼容性（Cross-Browser Compatibility）：...
14. **常见jQuery插件**：如jQuery UI、Bootstrap jQuery插件等，它们提供了丰富的界面组件和交互效果。 **六、实战应用** 15. **网页布局**：使用jQuery实现响应式布局，适应不同设备屏幕。 16. **表单处理**：...
总的来说，`jquery.event.drag`插件以其简洁、高效的特点，为jQuery开发者提供了强大的拖放功能支持，无论是简单的元素拖动还是复杂的交互设计，都能得心应手。通过深入理解和实践，我们可以更好地利用它来提升网页...
这些代码包括但不限于DOM元素的增删改查、事件绑定和触发、CSS样式操作、动画效果的实现、Ajax异步通信以及自定义jQuery插件的编写。通过实际运行和调试这些代码，你可以更直观地看到jQuery功能的实际应用，并学会...
书中紧紧地围绕“用实际的示例来解释每一个新概念”这一宗旨，生动描述了jQuery如何与其他工具和框架交互以及如何生成jQuery插件。jQuery是目前最受欢迎的JavaScript/Ajax库之一，能用最少的代码实现最多的功能。...
《jQuery实战中文版》这本书是面向开发者的一本深入学习jQuery的实用指南，旨在帮助读者熟练掌握这个广泛使用的JavaScript库，从而提升网页开发的效率和效果。jQuery是一个轻量级、高性能的JavaScript框架，它简化了...
`jquery插件库.url`是一个书签，指向jQuery插件库网站，可能是获取更多jQuery插件的入口；`css`和`img`目录分别存放了样式表和图片资源；`js`目录则包含JavaScript文件，其中应该有Strip插件的核心脚本。 通过分析...
书中紧紧地围绕“用实际的示例来解释每一个新概念”这一宗旨，生动描述了jQuery如何与其他工具和框架交互以及如何生成jQuery插件。jQuery 是目前最受欢迎的javascript/Ajax库之一，能用最少的代码实现最多的功能。 ...
"Notifyjs是一个jQuery插件提供了简单但是完全可定制的消息通知" 这个标题告诉我们，Notifyjs是一个基于jQuery的库，它的主要功能是实现用户界面中的消息通知功能。这个插件的设计目标是既简洁易用，又允许开发者...
- 学会利用jQuery插件，快速实现复杂功能。 - 自定义插件，扩展jQuery的功能。 5. **调试技巧**： - 使用`console.log()`输出变量值，便于调试。 - 利用浏览器的开发者工具查看和修改DOM结构。 #### 四、案例...
新闻图片JQUERY插件是一种基于JavaScript库jQuery的交互式组件，用于增强网站中新闻或文章的图片展示效果。jQuery是一个广泛使用的开源JavaScript库，它简化了HTML文档遍历、事件处理、动画设计以及Ajax交互。在本...