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学习心得(五) 运 ...
随机推荐
- 解密QQ号
啊哈~ ---------------------------------------------------------- http://bbs.ahalei.com/thread-4489-1-1 ...
- loj #2021. 「AHOI / HNOI2017」大佬
#2021. 「AHOI / HNOI2017」大佬 题目描述 人们总是难免会碰到大佬.他们趾高气昂地谈论凡人不能理解的算法和数据结构,走到任何一个地方,大佬的气场就能让周围的人吓得瑟瑟发抖,不敢 ...
- 洛谷 P3806 【模板】点分治1
P3806 [模板]点分治1 题目背景 感谢hzwer的点分治互测. 题目描述 给定一棵有n个点的树 询问树上距离为k的点对是否存在. 输入输出格式 输入格式: n,m 接下来n-1条边a,b,c描述 ...
- 【BZOJ 2120】【国家集训队 2011】【数颜色】(莫队)
题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会向你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画笔. 2 ...
- Java内存区域与内存溢出异常---运行时数据区域
运行时数据区域 Java虚拟机所管理的内存将会包括以下几个运行时数据区域 线程私有区域 1.程序计数器 程序计数器记录的是当前正在执行的虚拟机字节码指令所在的地址.在虚拟机的概念模型中,字节码解释 ...
- kuangbin专题十六 KMP&&扩展KMP HDU3294 Girls' research
One day, sailormoon girls are so delighted that they intend to research about palindromic strings. O ...
- POJ1058 The Gourmet Club
题目来源:http://poj.org/problem?id=1058 题目大意:ACM城的美食俱乐部有16位成员.他们连续了当地的法国餐厅Chatrau Java来安排连续5天的晚餐.晚餐时他们每4 ...
- Redis学习笔记(4)—— Jedis入门
一.Jedis介绍 Redis不仅是使用命令来操作,现在基本上主流的语言都有客户端支持,比如Java.C.C#.C++.php.Node.js.Go等. 在官方网站里列的一些Java客户端,有jedi ...
- CodeForces-Zuhair and Strings(思维+枚举)
Given a string ss of length nn and integer kk (1≤k≤n1≤k≤n). The string ss has a level xx, if xx is l ...
- CF D Bicolorings
题意 给一个2行n列的矩阵填上黑色和白色,求连通块个数为k个的填色方案数量(mod 998244353) 因为只有两行,为n-1列的矩阵增加1列的情况数只有很少,容易想到用 (i,k) 表示 i ...