Jquery插件开发教程

最新推荐文章于 2017-07-13 20:21:01 发布

g200407331

最新推荐文章于 2017-07-13 20:21:01 发布

阅读量499

点赞数

分类专栏：网络技术

网络技术专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Jquery插件开发教程

分类： JavaScript 2012-02-23 11:18 617人阅读评论(0) 收藏举报

jquery插件 jquery function xhtml html

1、首先要将插件代码包裹在

 
    1. 
    (function($){
  
    2. 
    /*代码从这里开始*/ 
   
    3. 
    
 })(jQuery);

代码解释：(function(){})()，这句代码指的是创建一个匿名函数function(){}并立即执行，并在参数中传入了jQuery对象，所以在代码中你就可以“$”使用jQuery对象，将代码放入匿名函数中的目的：在函数中定义的变量是局部变量，不会与全局变量冲突。

2、添加插件

添加插件通过

 
    1. 
    $.fn.changeColor = function(){ 
   
    2. 
    /*插件操作代码从这里开始 
   
    3. 
    this指当前jquery对象 
   
    4. 
    */ this.css('color','red'); 
   
    5. 
    }

通过这句我们就添加了一个名叫changeColor的插件，这时任何jquery对象都可以使用这个插件了，使用方法例如，$('#test').changeColor()，这个插件实现的功能是将当前jquery对象的文本颜色改为red。

[javascript] view plain copy print ?

/*插件代码*/
(function($){
$.fn.changeColor = function(){
this.css('color','red');
}
})(jQuery);

/*插件代码*/
(function($){
	$.fn.changeColor = function(){
			this.css('color','red');
		}
})(jQuery);

实例：

[html] view plain copy print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
/*插件代码*/
(function($){
$.fn.changeColor = function(){
this.css('color','red');
}
})(jQuery);
</script>
</head>
<body>
<span id="test">jquery插件开发教程</span>
<button onclick="$('#test').changeColor()">变颜色</button>
</body>
</html>

g200407331

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery插件开发教程

Jquery插件开发教程分类： JavaScript 2012-02-23 11:18 617人阅读评论(0)收藏举报jquery插件jqueryfunctionxhtmlhtml 1、首先要将插件代码包裹在1.(function($){2./*代码从这里开始*/3.})(jQuery);
复制链接

扫一扫