博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery插件开发
阅读量:5925 次
发布时间:2019-06-19

本文共 3857 字,大约阅读时间需要 12 分钟。

深入理解JavaScript系列

http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html

// 扩展jQuery对象,添加showTagInfo()方法// 用于将jQuery对象所有匹配元素的标识信息追加到body元素内// 每个元素的标识信息形如:"tagName"或"tagName#id"jQuery.fn.showTagInfo = function(){    var tags = this.map( function(){    return this.tagName + ( this.id ? "#" + this.id : "" );   } ).get();  $("body").append( tags.join("
") + "
" );};

 css常见跨浏览器问题

就是一些CSS的问题啊 双边距 浮动错位这些

http://www.jb51.net/article/55193.htm

jquery自定义插件的写法

http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html

http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html

 

jq插件定义 两种方式

第一种,静态方法

$.名字 = function(){}

$.extends{

名字 : function (){}

}

第二种,使用到jq对象定义方式,这种方法可以使用到jQuery强大的选择器

 一个一个定义
$.fn.名字=function (){};
批量定义
$.fn.extend({
名字 : function (){}
}) 
(function($){    $.extend({        sayHello:function(name){            console.log("Hello,"+(name?name:"Dude")+"|")        },        log:function (message) {            var now = new Date();            y = now.getFullYear(),            m = now.getMonth()+1,            d = now.getDate(),            h = now.getHours(),            min = now.getMinutes(),            s = now.getSeconds(),            time = y+"/"+m+"/"+d+" "+h+":"+min+":"+s;            console.log(time+' My app: '+message);        }    })    $.fn.myPlugin = function(options){        var defaults = {            'color':'red',            'fontSize':'18px'        };        var settings = $.extend(defaults,options);        debugger;        return this.css({'color':settings.color,'fontSize':settings.fontSize});        //this指代的是我们在调用该插件时,用jQuery选择器选中的元素,一般是一个jQuery类型的集合        this.css('color','red')        //要让插件不打破这种链式调用,只需return一下即可。        return this.each(function(){            //对每个元素进行操作            $(this).append(' '+$(this).attr('href'));        })    }})(jQuery)

上面的debugger可以在chrome里直接断点到那里,使用起来很方便

在处理插件参数的接收上,通常使用jQuery的extend方法,上面也提到过,但那是给extend方法传递单个对象的情况下,这个对象会合并到jQuery身上,所以我们就可以在jQuery身上调用新合并对象里包含的方法了,像上面的例子。当给extend方法传递一个以上的参数时,它会将所有参数对象合并到第一个里。同时,如果对象中有同名属性时,合并的时候后面的会覆盖前面的。

 

首先jquery开发自定义的控件分两大类(我自己这么分的),第一就是不带参数的插件,还有一类就是带参数的jquery插件了。

先从简单的开始。首先我们要了解一下什么叫jquery,jquery是对js的一系列的分装,说白了他就是js的分装以后的产物。但是我们用jquery来实现会更加的方便。使用jquery的插件也很简单。只需要jquery的官网下载最新版本的jquery,然后再我们的网页的head下面引用一下就好了。例如:

jquery引用放的位子

这里有一点需要确定,就是jquery的引用的地方一定在你自己插件的地方前面,因为浏览器在解析你的html的时候,是从上到下的,也就是说如果你先写插件后引用jquery,那么浏览器根本就不认识你的插件中的标示符。

无参jquery插件的模板:

不带参数的jquery插件开发

无参的格式为:

(function($){     $.fn.extend({         myPlugName:function(){
//dosomethings }); } }); })(jQuery);

这里大概的解释一下,$.fn.extend是一个实例的扩展,但是$.extend是类的扩展,如果不明白多看一下解释,或者是去api.jquery.com看一下jquery的官方手册。jQuery和$是等价的,你可以认为是别名。myPlugName这个是插件的名字,根据自己的情况来命名自己的拆建吧!接着就是写一些你想要做的事情了!很简单吧!哈哈

带参数的jquery插件

首先看一下代码:

无标题文档
This is a Params JQuery!

这里和不带参数的jquery插件差不多,但是还有略微的不同,最后$("#myDiv").hilight({foreground:'blue'});来给jquery传递参数!如果不写的话,那就用jquery自带的默认的值。jquery插件其中的一个标准模板为:

(function($){            $.fn.hilight=function(options){                var defaults={                    foreground:'red',                    background:'yellow'                    };                var opts = $.extend(defaults,options);                //dosomethings            };        })(jQuery);

这里需要注意一句话,var opts = $.extend(defaults,options);这句话的意思是吧defaults的属性和options的属性合并并保存到opts中。不懂的话参考:

这里当然标准的模板不是单单上面这么一种还有很多种,我只是整理了一种为初学者学习!

最后请允许我拷贝一段话,希望对你有用:

jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JS库插件混淆。所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身。可以通过this.each 来遍历所有的元素在插件头部加上一个分号,以免他人的不规范代码给插件带来影响。所有的方法或函数插件,都应当以分号结尾,以免压缩时出现问题除非插件需要返回的是一些需要获取的变量,插件应该返回一个jQuery对象,以保证插件的可链式操作。利于jQuery.extend()方法设置插件方法的默认参数,增加插件的可用性。在插件内部,this指向的是当前通过选择器获取的JQuery对象,而不像一般方法那样,内部的this指向的是DOM元素。

Stallman 先生认为最大的快乐是让自己发展的软件让大家来使用了!

转载于:https://www.cnblogs.com/as3lib/p/5101553.html

你可能感兴趣的文章
github Android-Universal-Image-Loader
查看>>
第二章--第四节:运算符(二)
查看>>
HTML5移动开发即学即用(双色) 王志刚 pdf扫描版
查看>>
POJ 3261 可重叠k次最长重复子串
查看>>
虚拟内存原理
查看>>
常用上传图片生成缩略图
查看>>
晚11点
查看>>
leetcode Same Tree
查看>>
@Transactional noRollbackFor
查看>>
js 编码解码
查看>>
C# 操作 access 数据库
查看>>
MAC OSX 中,删除右键菜单中的多余重复项。
查看>>
Linux服务-http
查看>>
模板方法模式---考题抄错会做也白搭
查看>>
WebService系列一:WebService简介
查看>>
log4net的相关使用笔记
查看>>
import ... from和import {} from 的区别
查看>>
Mysql数据库
查看>>
HDU 1010 Tempter of the Bone
查看>>
Exception in thread "main" java.lang.NoClassDefFoundError错误总结
查看>>