1.静态方法,不需要实体
$.extend({
add:function(a,b){return a+b;}
});
为实体添加方法
$.fn.extend({:});
2.闭包的基本写法:
(function(){do someting})();
//这个你就理解为定义一个匿名函数并立即执行
带参数的话就这样:
(function(形参){do someting})(实参);
另外
(function(){var upc="i am upc"})();
alert(upc);
会提示undefined。
因为闭包后,里面的变量就相当于局部了。
闭包的好处:
不增加额外的全局变量,
执行过程中所有变量都是在匿名函数内部。
寓尔看过几眼jQuery插件的代码,发现这样的代码很是希奇:
(function($){
js code...
})(jQuery);
从未深究,今天突然想明白了。
实际上,上边的代码就是一个js函数调用。
以下这部份
(function($){
js code...
})
相当于是函数;
(jQuery) 则是函数调用时的参数列表。
以上代码等价于如下代码:
function test($){
js code...
}
test(jQuery);
3.jQuery对象转换dom对象,因为jQuery对象本身是一个集合 所以要取出一个
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
4.如何获取jQuery集合的某一项
$("div").eq(2).html(); //调用jquery对象的方法 eq取得的是jQuery对象
$("div").get(2).innerHTML; //调用dom的方法属性 get取得的是dom对象
5.集合处理功能:
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f']})
//为索引分别为0,1,2的p元素分别设定不同的字体颜色。
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果
$("p").click(function(){.html())})
//为每个p元素增加了click事件,单击某个p元素则弹出其内容
6.扩展我们需要的功能
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //为jquery扩展了min,max两个方法
使用扩展的方法(通过“$.方法名”调用):
+",min="+$.min(10,20));
7、支持方法的连写
所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
例如:
$("p").click(function(){.html())})
.mouseover(function(){})
.each(function(i){this.style.color=['#f00','#0f0','#00f']});
8、操作元素的样式
主要包括以下几种方式:
$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select"); //为元素增加名称为select的class
$("#msg").removeClass("select"); //删除元素名称为select的class
$("#msg").toggleClass("select"); //如果存在(不存在)就删除(添加)名称为select的class
9、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
1.直接取id 是通过原生态的 getElementById() 比较快 var tt = $("#abc");
从最近的id继承也比较快 var tt = $("#abc input");
2.class前紧挨着加标签名
<input class="on" />
var act = $("input.on");
3.将jquery对象缓存起来
新手
$("#traffic_light input.on").bind("click", function(){ });
$("#traffic_light input.on").css("border", "1px dashed yellow");
$("#traffic_light input.on").css("background-color", "orange");
$("#traffic_light input.on").fadeIn("slow");
应该写成
var $active_light = $("#traffic_light input.on");
$active_light.bind("click", function(){ });
$active_light.css("border", "1px dashed yellow");
$active_light.css("background-color", "orange");
$active_light.fadeIn("slow");
可以进行链式操作
var $active_light = $("#traffic_light input.on");
$active_light.bind("click", function(){ })
.css("border", "1px dashed yellow")
.css("background-color", "orange")
.fadeIn("slow");
4,对直接的DOM操作进行限制
var top_100_list = [],$mylist = $("#mylist"), top_100_li = ""; // 这个变量将用来存储我们的列表元素
for (var i=0, l=top_100_list.length; i<l; i++){
top_100_li += "<li>" + top_100_list[i] + "</li>";
}
$mylist.html(top_100_li);
先缓存到变量里 集合在一起去放入dom节点
5 . 冒泡
$("#entryform").bind("focus", function(e){
var $cell = $(e.target); // e.target 捕捉到触发的目标元素
$cell.addClass("selected");
}).bind("blur", function(e){
var $cell = $(e.target);
$cell.removeClass("selected");
});
6,推迟到 $(window).load
一些特效的功能,例如拖放, 视觉特效和动画, 预载入隐藏图像等等,都是适合这种技术的场合。
7,压缩JavaScript
8,给选择器一个上下文
1. 尽量使用最新版本的jQuery类库
2.过滤 $('a.button').filter(':animated'); // Uses it 只能用来显示filter方法是用来缩小collection。
3.如果性能是你关注的,那么使用简单for或者while循环来处理,而不是$.each(),这样能使你的代码更快。
检查长度也是一个检查你的collection是否含有元素的方式。
4. 创建一个空的jQuery对象
创建一个新的jQuery空间能极大的减小开销。有时候,你可能需要创建一个空的对象,然后使用add()方法添加对象。
var container = $([]);
container.add(another_element);
5. 选择一个随机元素
(function($){
var random = 0;
$.expr[':'].random = function(a, i, m, r) {
if (i == 0) {
random = Math.floor(Math.random() * r.length);
}
return i == random;
};
})(jQuery);
// This is how you use it:
$('li:random').addClass('glow');
6. 将你的代码转化成jQuery插件
如果你要花一定得时间去开发一段jQuery代码,那么你可以考虑将代码变成插件。这将能够帮助你重用代码,并且能够有效的帮助你组织代码。创建一个插件代码如下:
(function($){
$.fn.yourPluginName = function(){
// Your code goes here
return this;
};
})(jQuery);
7. 设置全局AJAX为缺省
如果你开发ajax程序的话,你肯定需要有”加载中“之类的显示告知用户,ajax正在进行,我们可以使用如下代码统一管理,如下:
// ajaxSetup is useful for setting general defaults:
$.ajaxSetup({
url : '/ajax/',
dataType : 'json'
});
$.ajaxStart(function(){
showIndicator();
disableButtons();
});
$.ajaxComplete(function(){
hideIndicator();
enableButtons();
});
/*
// Additional methods you can use:
$.ajaxStop();
$.ajaxError();
$.ajaxSuccess();
$.ajaxSend();
*/
8. 在动画中使用delay()方法
$.extend({
add:function(a,b){return a+b;}
});
为实体添加方法
$.fn.extend({:});
2.闭包的基本写法:
(function(){do someting})();
//这个你就理解为定义一个匿名函数并立即执行
带参数的话就这样:
(function(形参){do someting})(实参);
另外
(function(){var upc="i am upc"})();
alert(upc);
会提示undefined。
因为闭包后,里面的变量就相当于局部了。
闭包的好处:
不增加额外的全局变量,
执行过程中所有变量都是在匿名函数内部。
寓尔看过几眼jQuery插件的代码,发现这样的代码很是希奇:
(function($){
js code...
})(jQuery);
从未深究,今天突然想明白了。
实际上,上边的代码就是一个js函数调用。
以下这部份
(function($){
js code...
})
相当于是函数;
(jQuery) 则是函数调用时的参数列表。
以上代码等价于如下代码:
function test($){
js code...
}
test(jQuery);
3.jQuery对象转换dom对象,因为jQuery对象本身是一个集合 所以要取出一个
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
4.如何获取jQuery集合的某一项
$("div").eq(2).html(); //调用jquery对象的方法 eq取得的是jQuery对象
$("div").get(2).innerHTML; //调用dom的方法属性 get取得的是dom对象
5.集合处理功能:
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f']})
//为索引分别为0,1,2的p元素分别设定不同的字体颜色。
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果
$("p").click(function(){.html())})
//为每个p元素增加了click事件,单击某个p元素则弹出其内容
6.扩展我们需要的功能
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //为jquery扩展了min,max两个方法
使用扩展的方法(通过“$.方法名”调用):
+",min="+$.min(10,20));
7、支持方法的连写
所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
例如:
$("p").click(function(){.html())})
.mouseover(function(){})
.each(function(i){this.style.color=['#f00','#0f0','#00f']});
8、操作元素的样式
主要包括以下几种方式:
$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select"); //为元素增加名称为select的class
$("#msg").removeClass("select"); //删除元素名称为select的class
$("#msg").toggleClass("select"); //如果存在(不存在)就删除(添加)名称为select的class
9、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
1.直接取id 是通过原生态的 getElementById() 比较快 var tt = $("#abc");
从最近的id继承也比较快 var tt = $("#abc input");
2.class前紧挨着加标签名
<input class="on" />
var act = $("input.on");
3.将jquery对象缓存起来
新手
$("#traffic_light input.on").bind("click", function(){ });
$("#traffic_light input.on").css("border", "1px dashed yellow");
$("#traffic_light input.on").css("background-color", "orange");
$("#traffic_light input.on").fadeIn("slow");
应该写成
var $active_light = $("#traffic_light input.on");
$active_light.bind("click", function(){ });
$active_light.css("border", "1px dashed yellow");
$active_light.css("background-color", "orange");
$active_light.fadeIn("slow");
可以进行链式操作
var $active_light = $("#traffic_light input.on");
$active_light.bind("click", function(){ })
.css("border", "1px dashed yellow")
.css("background-color", "orange")
.fadeIn("slow");
4,对直接的DOM操作进行限制
var top_100_list = [],$mylist = $("#mylist"), top_100_li = ""; // 这个变量将用来存储我们的列表元素
for (var i=0, l=top_100_list.length; i<l; i++){
top_100_li += "<li>" + top_100_list[i] + "</li>";
}
$mylist.html(top_100_li);
先缓存到变量里 集合在一起去放入dom节点
5 . 冒泡
$("#entryform").bind("focus", function(e){
var $cell = $(e.target); // e.target 捕捉到触发的目标元素
$cell.addClass("selected");
}).bind("blur", function(e){
var $cell = $(e.target);
$cell.removeClass("selected");
});
6,推迟到 $(window).load
一些特效的功能,例如拖放, 视觉特效和动画, 预载入隐藏图像等等,都是适合这种技术的场合。
7,压缩JavaScript
8,给选择器一个上下文
1. 尽量使用最新版本的jQuery类库
2.过滤 $('a.button').filter(':animated'); // Uses it 只能用来显示filter方法是用来缩小collection。
3.如果性能是你关注的,那么使用简单for或者while循环来处理,而不是$.each(),这样能使你的代码更快。
检查长度也是一个检查你的collection是否含有元素的方式。
4. 创建一个空的jQuery对象
创建一个新的jQuery空间能极大的减小开销。有时候,你可能需要创建一个空的对象,然后使用add()方法添加对象。
var container = $([]);
container.add(another_element);
5. 选择一个随机元素
(function($){
var random = 0;
$.expr[':'].random = function(a, i, m, r) {
if (i == 0) {
random = Math.floor(Math.random() * r.length);
}
return i == random;
};
})(jQuery);
// This is how you use it:
$('li:random').addClass('glow');
6. 将你的代码转化成jQuery插件
如果你要花一定得时间去开发一段jQuery代码,那么你可以考虑将代码变成插件。这将能够帮助你重用代码,并且能够有效的帮助你组织代码。创建一个插件代码如下:
(function($){
$.fn.yourPluginName = function(){
// Your code goes here
return this;
};
})(jQuery);
7. 设置全局AJAX为缺省
如果你开发ajax程序的话,你肯定需要有”加载中“之类的显示告知用户,ajax正在进行,我们可以使用如下代码统一管理,如下:
// ajaxSetup is useful for setting general defaults:
$.ajaxSetup({
url : '/ajax/',
dataType : 'json'
});
$.ajaxStart(function(){
showIndicator();
disableButtons();
});
$.ajaxComplete(function(){
hideIndicator();
enableButtons();
});
/*
// Additional methods you can use:
$.ajaxStop();
$.ajaxError();
$.ajaxSuccess();
$.ajaxSend();
*/
8. 在动画中使用delay()方法