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

jQuery学习心得的更多相关文章

  1. jQuery学习心得一

    1.闭包 每次看到jQuery的时候,首先想到的就是闭包.这是个老生常谈的问题了.今天重新回忆了一下闭包. 什么是闭包? 当有一个函数想要访问另一个函数内部的变量,这个是访问不了的.所有我们要用闭包来 ...

  2. jquery学习心得:一个很好的css和js函数调用的例子

    统一目录下的资源结构图: <html><head> <link rel="stylesheet" href="gallery.css&quo ...

  3. jquery validate学习心得

    据说,javascript最初的由来就是为了解决表单的验证问题,当然现在的js已经能够用来做各种各样炫酷的效果,不过表单验证一直以来都是js很重要的一个用途(在博客园第一篇博客,不知道说些什么开头~~ ...

  4. JavaScript 秘密花园 学习心得

    目的 记录一下学习心得,便于以后复习,内容是比较基础的...但是很多内容我还是不知道... 对象 对象使用和属性 1.JavaScript 中所有变量都可以当作对象使用,除了两个例外 null和dun ...

  5. fullpage 插件学习心得

    fullpage.js 是一个基于jquery 的插件,它能够轻松的制作出高大上的全屏网站,主要功能有; 1.支持鼠标滚动 2.支持前进后退和键盘控制 3.多个回调函数 4.支持 CSS3 动画 5. ...

  6. 我的MYSQL学习心得(一) 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  7. jQuery学习之路(1)-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  8. jquery学习(一)

    简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...

  9. 我的MYSQL学习心得(二) 数据类型宽度

    我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

随机推荐

  1. js 值传递,引用传递

    参考:http://www.cnblogs.com/lcngu/p/5876273.html JS的基本类型,是按值传递的. 对象类型按共享传递的(call by sharing,也叫按对象传递.按对 ...

  2. linux文件字符集转换(utf8-gb2312)

    一,命令行 在LINUX上进行编码转换时,可以利用iconv命令实现,这是针对文件的,即将指定文件从一种编码转换为另一种编码. iconv命令用法如下:iconv [选项...] [文件...] 1. ...

  3. 将Winform程序及dll打包成可执行的exe

    使用场景 通常开发的Winform程序,引用了其他类库后,在输出目录下都会产生很多DLL文件,exe执行时必须依赖这些DLL.想要Winform程序只有一个可执行exe文件,又不想打包成安装包,就可以 ...

  4. dubbo异步调用原理 (1)

    此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 一.使用方式 服务提供方不变,调用方代码如下: 1     <dubbo:reference id=& ...

  5. Python3中开发目录的引用

    Python3中开发目录的引用 import os,sys BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) ...

  6. 洛谷 P1028 数的计算

    嗯... 首先这道题想到的就是递推.... 但是递推失败 (不知道自己是怎么想的 然后又想打一个暴力,但是数的最高位太难存储了,所以又放弃了(并且好像这个暴力大约500就会炸... 然后看了题解,才发 ...

  7. json遍历,List<Map<String,Object>>遍历

    js怎样给input对象追加属性,如disabled $(":textbox").attr({"disabled":true}); List<Map< ...

  8. ubuntu下vnstat监控网卡流量

    vnstat使用 vnstat 是另一个可以用来监视带宽使用量的程序.它比ipac-ng更简单易用. vnstat的一个优点是它不是一个运行的守护程序,所以它几乎不占用内存.它由 cron 任务创建, ...

  9. 【学习笔记】jQuery的基础学习

    [学习笔记]jQuery的基础学习 新建 模板 小书匠  什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...

  10. UESTC 1437

    LCA模板题 随便找的倍增模板... #include<bits/stdc++.h> using namespace std; const int maxn = 1e5+11; int t ...