您的位置：首页 > Web前端 > JQuery

JQuery插件定义

2015-12-15 15:07 155 查看

jQuery插件是基于jQuery开发的js脚本库，是对jQuery的有效扩展。正因为有很多人把自己的开发成果以插件的形式共享，所以jQuery就好像一个取之不竭的宝藏。只要你用心寻找，总会找到需要的插件。也许有时候你正准备自己编码实现一个功能，却意外地发现有人已经把它做成插件共享，你只需下载并引用插件就可以了。
JQuery插件可以分为以下三种类型：

（1）封装jQuery对象方法：把一些常用功能定义为函数，绑定到jQuery对象上，从而扩展了jQuery对象。
（2）全局函数：把自定义函数附加到jQuery命名空间下，从而作为一个公共的全局函数使用。
（3）自定义选择器：编写一个自定义函数，返回满足指定条件的HTML元素对应的jQuery对象。

<1>开发封装JQuery对象方法的插件:

(function( $ ) {
$.fn.showhtml = function() {
alert(this.html());
};
})( jQuery );

设立时定义了一个JQuery插件showhtml.

如果需要在插件中定义多个方法，可以使用$.extend()方法定义插件的方法.

$.fn.extend({
showhtml : function() {
alert(this.html());
},
showtext : function() {
alert(this.text());
}
});

开发封对象方法的得到插件

<2>开发定义全局函数的JQuery插件：
jQuery全局函数是附加在jQuery命名空间下的自定义函数。全局函数没有被绑定到jQuery对象上因此不能通过任何jQuery对象来调用它。可以使用jQuery.extend()方法定义全局函数

定义一个jQuery插件，其中包含2个全局函数add()和multi()，分别用于计算2个数相加和相乘的结果，代码如下：

jQuery.extend({
add:function(a,b){
returna+b;
},
multi:function(a,b){
returna*b;
}
});

<3>开发自定义选择器的JQuery插件

可以使用jQuery.
expr定义自定义选择器，基本方法如下：

 $.expr[':'].withjQuery = function(obj){
// 自定义选择器的代码
return 匹配HTML元素的条件，;

};

jQu
定义一个jQuery插件，其中包含一个自定义选择器withjQuery，用于匹配内容包含“jQuery”的HTML元素，代码如下

$.expr[':'].withjQuery = function(obj){
var $this = $(obj);
return ($this.html().indexOf('jQuery') >-1);
};

shiyonuery插件

使用3种型
使用JQuery插件的方法:

在jQuery程序中使用jQuery插件的方法很简单，首先需要引用jQuery脚本和插件脚本

<1>使用封装JQuery对象方法的使用：

jQuery对象.封装的jQuery对象方法

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.showhtml.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#p1").click(function(){
$("#p1").showhtml();
});
});
</script>
</head>
<body>
<p id="p1">单击我</button>
</body>
</html>

<2>使用定义全局函数JQuery插件的方法

调用jQuery全局函数的方法如下：

jQuery.全局函数名();

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.myFunc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#p1").click(function(){
$("#p1").html("1+2="+jQuery.add(1,2));
});
});
</script>
</head>
<body>
<p id="p1">单击我</button>
</body>
</html>

<3>使用定义自定义选择器的JQuery插件方法:

调用jQuery全局函数的方法如下：

$('HTML标签:withjQuery')

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.customselector.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('p:withjQuery').css('background-color', 'yellow');
});
</script>
</head>
<body>
<p >jQuery属于Java家族，它是一种快捷、小巧、功能丰富的JavaScript库。jQuery提供很多支持各种浏览器平台的API，使用这些API可以使Web前端开发变得更加轻松。</button><br>
<p>HTML5是最新的HTML标准。之前的版本HTML4.01于1999年发布。10多年过去了，互联网已经发生了翻天覆地地变化。</button>
</body>
</html>

以分为下面3种类型
jQuery插件可以分为下面3种类型

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航