jQuery学习心得-白红宇

jQuery学习心得

阅读量：5037 次

发布时间：2019-06-12

本文共 2318 字，大约阅读时间需要 7 分钟。

表示在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 === retvar 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 firstChildeg: ul>lifirst 得到的是一个ulfirstChild 得到的是一组li

2、精确找到对象

Category: Traversingvar tabs = $('#tab').children('li');var contents = $('#contents').children('div');//最优解是什么？ 2ltabs.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();

});

```