深入理解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方法传递一个以上的参数时，它会将所有参数对象合并到第一个里。同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。
首先jquery开发自定义的控件分两大类（我自己这么分的），第一就是不带参数的插件，还有一类就是带参数的jquery插件了。
先从简单的开始。首先我们要了解一下什么叫jquery，jquery是对js的一系列的分装，说白了他就是js的分装以后的产物。但是我们用jquery来实现会更加的方便。使用jquery的插件也很简单。只需要jquery的官网下载最新版本的jquery，然后再我们的网页的head下面引用一下就好了。例如：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery引用放的位子</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
<!--这里写自己插件的地方-->
</script>
</head>
这里有一点需要确定，就是jquery的引用的地方一定在你自己插件的地方前面，因为浏览器在解析你的html的时候，是从上到下的，也就是说如果你先写插件后引用jquery，那么浏览器根本就不认识你的插件中的标示符。
无参jquery插件的模板：
<!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" />
<title>不带参数的jquery插件开发</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($){
$.fn.extend({
myPlugName:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
})(jQuery);
</script>
</head>
<body>
<input type="button" value="点击我" id="btn" />
</body>
<script type="text/javascript">
$("#btn").myPlugName();
</script>
</html
无参的格式为：
(function($){
$.fn.extend({
myPlugName:function(){<!--myPlugName你的插件的名字，根据自己的情况来命名-->
//dosomethings
});
}
});
})(jQuery);
这里大概的解释一下，$.fn.extend是一个实例的扩展，但是$.extend是类的扩展，如果不明白多看一下解释，或者是去api.jquery.com看一下jquery的官方手册。jQuery和$是等价的，你可以认为是别名。myPlugName这个是插件的名字，根据自己的情况来命名自己的拆建吧！接着就是写一些你想要做的事情了！很简单吧！哈哈
带参数的jquery插件
首先看一下代码：
<!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" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($){
$.fn.hilight=function(options){
var defaults={
foreground:'red',
background:'yellow'
};
var opts = $.extend(defaults,options);
$(this).css("background-color",opts.background);
$(this).css("color",opts.foreground);
};
})(jQuery);
</script>
</head>
<body>
<div id="myDiv">This is a Params JQuery!</div>
</body>
<script type="text/javascript">
$("#myDiv").hilight({foreground:'blue'});
</script>
</html>
这里和不带参数的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中。不懂的话参考：http://api.jquery.com/jQuery.extend/
这里当然标准的模板不是单单上面这么一种还有很多种，我只是整理了一种为初学者学习！
最后请允许我拷贝一段话，希望对你有用：
jQuery插件的文件名推荐命名为jquery.[插件名].js，以免和其他JS库插件混淆。 所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身。可以通过this.each 来遍历所有的元素在插件头部加上一个分号，以免他人的不规范代码给插件带来影响。 所有的方法或函数插件，都应当以分号结尾，以免压缩时出现问题除非插件需要返回的是一些需要获取的变量，插件应该返回一个jQuery对象，以保证插件的可链式操作。 利于jQuery.extend()方法设置插件方法的默认参数，增加插件的可用性。在插件内部,this指向的是当前通过选择器获取的JQuery对象，而不像一般方法那样,内部的this指向的是DOM元素。
Stallman 先生认为最大的快乐是让自己发展的软件让大家来使用了！