表示在document.ready时执行代码
$(function(){
//1、取得要操作的对象(尽量只限制范围),如果对象多次使用要记得缓存
var $selector = $('selector');
var $target = $selector.find();
或者 var $target = $selector.children();
//2、通过find children parent closest filter等,进一步确定要操作的元素,有可能没有第二步
//eg1:要找id为abc的ul下的所有li
var $li = $("#abc").find("li");//better than $('#abc li')
});
1、粗略定位对象(选择器)$(str)
2、精确找到对象 .find .parent
3、基本属性或者样式操作 .attr .css 等
4、迭代.each
$lis = $('li');
$lis.each(function(i,item){
$(item).xxxxxxx
});
5、绑定事件 .on .off .delegate .click....
var $li = $('#abc').children('li');
$li.css('color','black').click(function () {
$li.css('color','black');
$(this).css('color','red');
});
有一组ul#abc的孩子li,点击一个把这个奇数个变红,偶数个变蓝其它的是黑色
var $lis = $('#abc').children('li');
$lis.each(function (i) {
var $li = $(this);
$li.click(function (argument) {
$lis.css('color','black');
if(i % 2 === 0){
$li.css('color','red');
} else{
$li.css('color','blue');
}
});
});
1、迭代方法
1-1、.each
1-2、.map
q1:map与each的区别
each是自迭代,对自己进行遍历,然后返回自己
map是对每一个元素执行函数,然后返回函数结果的数组
var arr = [1,2,3];
var ret = $.each(arr,function(i){
arr[i] = arr[i] + 1;
});
//arr = [2,3,4] ret = [2,3,4] arr === ret
var ret = $.map(arr,function(i){
return arr[i] + 1;
});
//arr = [1,2,3] ret = [2,3,4] arr !== ret
1-3、first 和 last 还有eq(n) slice分别是返回对象中的第一个,最后一个和第n个精确找到对象是对DOM元素的相关元素进行查找而first等是对对象本身进行查找
first firstChild
eg: ul>li
first 得到的是一个ul
firstChild 得到的是一组li
2、精确找到对象
Category: Traversing
var tabs = $('#tab').children('li');
var contents = $('#contents').children('div');
//最优解是什么? 2l
tabs.each(function(i){
var tab = $(this);
var target = contents.eq(i);
tab.click(function(){
tabs.removeClass('active');
tab.addClass('active');
contents.hide();
target.show();
});
});
// 1 + l(tab的数量)个 + N个 = N+ l
tabs.each(function(i){
var tab = $(this);
tab.click(function(){
tabs.removeClass('active');
tab.addClass('active');
contents.hide().eq(i).show();
});
});
**//不要这么写N(用户点击的次数) * 2 + 1 + N = 3N **
tabs.click(function(){
$(this).addClass('active').siblings().removeClass('active');
contents.hide().eq(tabs.indexOf(this)).show();
});
###性能
**其中属性和样式的方法没办法进行优化,其它方法是可以的,优先是这样的:**
**迭代的速度 > 简单选择器的速度(id选择器) > 精确查找的速度 > 复杂选择器的速度**