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选择器) > 精确查找的速度 > 复杂选择器的速度**
jQuery学习心得的更多相关文章
- jQuery学习心得一
1.闭包 每次看到jQuery的时候,首先想到的就是闭包.这是个老生常谈的问题了.今天重新回忆了一下闭包. 什么是闭包? 当有一个函数想要访问另一个函数内部的变量,这个是访问不了的.所有我们要用闭包来 ...
- jquery学习心得:一个很好的css和js函数调用的例子
统一目录下的资源结构图: <html><head> <link rel="stylesheet" href="gallery.css&quo ...
- jquery validate学习心得
据说,javascript最初的由来就是为了解决表单的验证问题,当然现在的js已经能够用来做各种各样炫酷的效果,不过表单验证一直以来都是js很重要的一个用途(在博客园第一篇博客,不知道说些什么开头~~ ...
- JavaScript 秘密花园 学习心得
目的 记录一下学习心得,便于以后复习,内容是比较基础的...但是很多内容我还是不知道... 对象 对象使用和属性 1.JavaScript 中所有变量都可以当作对象使用,除了两个例外 null和dun ...
- fullpage 插件学习心得
fullpage.js 是一个基于jquery 的插件,它能够轻松的制作出高大上的全屏网站,主要功能有; 1.支持鼠标滚动 2.支持前进后退和键盘控制 3.多个回调函数 4.支持 CSS3 动画 5. ...
- 我的MYSQL学习心得(一) 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- jQuery学习之路(1)-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- jquery学习(一)
简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...
- 我的MYSQL学习心得(二) 数据类型宽度
我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
随机推荐
- js 值传递,引用传递
参考:http://www.cnblogs.com/lcngu/p/5876273.html JS的基本类型,是按值传递的. 对象类型按共享传递的(call by sharing,也叫按对象传递.按对 ...
- linux文件字符集转换(utf8-gb2312)
一,命令行 在LINUX上进行编码转换时,可以利用iconv命令实现,这是针对文件的,即将指定文件从一种编码转换为另一种编码. iconv命令用法如下:iconv [选项...] [文件...] 1. ...
- 将Winform程序及dll打包成可执行的exe
使用场景 通常开发的Winform程序,引用了其他类库后,在输出目录下都会产生很多DLL文件,exe执行时必须依赖这些DLL.想要Winform程序只有一个可执行exe文件,又不想打包成安装包,就可以 ...
- dubbo异步调用原理 (1)
此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 一.使用方式 服务提供方不变,调用方代码如下: 1 <dubbo:reference id=& ...
- Python3中开发目录的引用
Python3中开发目录的引用 import os,sys BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) ...
- 洛谷 P1028 数的计算
嗯... 首先这道题想到的就是递推.... 但是递推失败 (不知道自己是怎么想的 然后又想打一个暴力,但是数的最高位太难存储了,所以又放弃了(并且好像这个暴力大约500就会炸... 然后看了题解,才发 ...
- json遍历,List<Map<String,Object>>遍历
js怎样给input对象追加属性,如disabled $(":textbox").attr({"disabled":true}); List<Map< ...
- ubuntu下vnstat监控网卡流量
vnstat使用 vnstat 是另一个可以用来监视带宽使用量的程序.它比ipac-ng更简单易用. vnstat的一个优点是它不是一个运行的守护程序,所以它几乎不占用内存.它由 cron 任务创建, ...
- 【学习笔记】jQuery的基础学习
[学习笔记]jQuery的基础学习 新建 模板 小书匠 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...
- UESTC 1437
LCA模板题 随便找的倍增模板... #include<bits/stdc++.h> using namespace std; const int maxn = 1e5+11; int t ...