jQuery学习心得

表示在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选择器） > 精确查找的速度 > 复杂选择器的速度**