zccst转载
首先了解两个概念
1,jquery(function(){})与(function(){}(jQuery)的区别
意义为在DOM加载完毕后执行ready()方法
总结:
jQuery(funtion(){});用于存放DOM对象的代码,执行其中代码时DOM对象已经存在。
不可用于存放开发插件代码。因为jQuery对象没有得到传递,外部通过jQuery.methodye
调用不来其中方法。
(funtion(){
}(jQuery);用于存放开发插件的代码,执行其中代码DOM不一定存在,直接自动执行DOM操作代码请小心使用
2,对于$.extend和$.fn.extend的区别
$.extend(object);为扩展jQuery类本身.为类添加新的方法。
$.fn.extend(object);给jQuery对象添加方法。
必须清楚这二者的区别:一个为类扩展,一个为类的实例做扩展!
在放一个便于理解的东西:
明白了?哦~原来如此!
我们先来个测试:为jquery类扩展一个方法
调用:$.hialert(‘hello alert’);
如果为类的实例做扩展,那么您需要这么写:
调用:$(节点).hialert();===>必须实例化一个类!
下面介绍一个实例:为一个标签可以叫做元素节点设置样式
写插件之前必须导入jquery库!
插件
body体内容
调用
我就模拟一个jquery插件的写法,不推荐使用这个做一个元素节点的设置,用内置的$(节点对象).css({})这个方法会更好!
到这 一个基本的jquery插件开发就结束了~~
共同学习!共同进步!
首先了解两个概念
1,jquery(function(){})与(function(){}(jQuery)的区别
- jQuery(function(){});
- //全写为
- jQuery(docunemt).ready(function(){
- });
意义为在DOM加载完毕后执行ready()方法
- (funtion(){
- }(jQuery);
- //实际执行()(para)匿名方法,只不过传递了jQuery对象。
总结:
jQuery(funtion(){});用于存放DOM对象的代码,执行其中代码时DOM对象已经存在。
不可用于存放开发插件代码。因为jQuery对象没有得到传递,外部通过jQuery.methodye
调用不来其中方法。
(funtion(){
}(jQuery);用于存放开发插件的代码,执行其中代码DOM不一定存在,直接自动执行DOM操作代码请小心使用
2,对于$.extend和$.fn.extend的区别
$.extend(object);为扩展jQuery类本身.为类添加新的方法。
$.fn.extend(object);给jQuery对象添加方法。
必须清楚这二者的区别:一个为类扩展,一个为类的实例做扩展!
在放一个便于理解的东西:
- jQuery.fn= jQuery.prototype = {
- init: function( selector, context ) {//....
- //......
- };
明白了?哦~原来如此!
我们先来个测试:为jquery类扩展一个方法
- $.extend({
- hialert:function(e){alert(e);}
- })
调用:$.hialert(‘hello alert’);
如果为类的实例做扩展,那么您需要这么写:
- $.fn.extend({
- hialert:function(e){alert(e);}
- });
调用:$(节点).hialert();===>必须实例化一个类!
下面介绍一个实例:为一个标签可以叫做元素节点设置样式
写插件之前必须导入jquery库!
插件
- (function($){
- $.fn.setFont= function(options){
- var data = {
- color:"red",
- fontSize:"15px",
- fontWeight:"normal",
- fontFamiay:"微软雅黑"
- }
- var ds = $.extend(data,options);
- $(this).css(ds);
- }
- })(jQuery);
body体内容
- <dividdivid="show">
- sssss
- </div>
- <button id="btn">点击</button>
调用
- $("#btn").click(function(){
- $("#show").setFont({color:"blue",fontSize:'30px'});
- });
我就模拟一个jquery插件的写法,不推荐使用这个做一个元素节点的设置,用内置的$(节点对象).css({})这个方法会更好!
到这 一个基本的jquery插件开发就结束了~~
共同学习!共同进步!