jquery插件开发

深入理解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("<br>") + "<br><br>" );
};

 

 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方法传递一个以上的参数时，它会将所有参数对象合并到第一个里。同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。