目录
壹、jQuery概述
1、为什么使用jquery
在原生JS中实现的时候，会出现很多问题：
(1) 书写麻烦，我们必须重复书写getElementsBy等方法来得到元素；
(2) 操作不是批量的，我们必须书写for()循环语句来批量控制元素。
(3) 存在兼容性问题。
(4)运动非常复杂，需要使用setInterval()使元素动起来。
(5)操作类名、属性也不方便。
而jQuery就彻底解决了上面所有的问题！
2、jquery简介
官网： http://jquery.com/
口号： write less , do more. 写更少的代码，做更多的事情。
简介： jQuery is a fast, small, and feature-rich JavaScript library.
It makes things like HTML document traversal and manipulation,event handling, animation, and Ajax much simpler with aneasy-to-use API that works across a multitude of browsers.
本质： jQuery是一个快速、简洁的JavaScript框架，
是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）
jQuery有三条产品线：
jQuery1.x.x : 兼容IE6、7、8，花了很大的气力让IE6、7、8等低级浏览器都兼容。
jQuery2.x.x : 不兼容IE6、7、8，从1代中剔除了所有兼容代码。
jQuery3.x.x : 全面支持HTML5和CSS3。
3 整体感知
首先我们使用jQuery的时候，必须要先引包（和我们之前自己封装的xxx.js一样）：
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
//自己的代码
</script>
当然，我们也可以把jQuery的声明语句写在head标签当中。
另外，jQuery的引入我们还可以采用CDN的方式来进行引入。(引用网上的资源jquery资源文件) 在网上可以搜索 CDN加载服务器
ps：以上引入jQuery的方式作用都是相同的，都是为了将库文件添加至我们的工程当中。
而jQuery的行文习惯，也颠覆了我们之前对于js中DOM开发的认知。jQuery有非常便利的选择元素的能力，用一个$()函数就能够搜寻页面上的元素。所以它十分擅长查找元素，连名字都叫做jQuery（query：查询）。
那么jQuery的操作过程是什么样的呢？
(1) jQuery操作页面元素一定是从一个$()开始的！
(2) $()函数里面有引号，引号里面写CSS选择器。
(3) 然后加上jQuery自己的方法（不能使用js原生的方法。）
我们先学习下面这条语句：
$("#box").css("background-color","red");
这行语句的作用是：将页面上的id为box的盒子的背景颜色变为红色。
贰、$()函数
1 size()方法和length属性
前面提到过$()在选择元素的时候是批量的，因此jq提供了一个机制来访问获得元素的数量。
2 jQuery全面支持css2.1的选择器
前面提到过$()在选择元素的时候括号中先写引号，在引号中写css选择器。
而这里提到的选择器可以是id选择器、类选择器、标签选择器、包含选择器等css2.1中提到的任意的选择器组合。
例如：
$("div .box #span1").animate({"font-size":400},1000);
我们在函数参数里传入了一个字符串，而$()函数在内部会采用正则表达式来解析我们的字符串。最终在页面中寻找符合条件的所有的元素。
3 jQuery全面支持css3的选择器
对于css3选择器的支持，简单来说就是对像属性选择器、关系选择器等在css3中被提出的选择器的支持。可以直接在$()函数中使用他们。
例如：
$("span[frank=123]").css("background-color","red");
ps：css3选择器最大的问题实际上是浏览器的兼容性问题，但是使用jq则没有兼容性问题。
4 jQuery自己发明的【伪类】
其实这里我个人觉得更精准的说法应该是jq自己发明的【筛选器】。因为他们的作用是能够从指定元素集合中【筛选】出想要的元素。
jq中自创的筛选器有七种：
- 选择器:first 选中指定元素集合中的第一个元素
- 选择器:last 选中指定元素集合中的最后一个元素
- 选择器:eq(n) 选中指定元素集合中从0开始，第n个元素
- 选择器:lt(n) 选中指定元素集合中从0开始，第n个元素之前的所有元素
- 选择器:gt(n) 选中指定元素集合中从0开始，第n个元素之后的所有元素
- 选择器:odd 选中指定元素集合中从0开始，所有奇数序号的元素
- 选择器:even 选中指定元素集合中从0开始，所有偶数序号的元素
特别的对于筛选器:eq(n)来说，还可以将这个筛选器提炼为一个方法来使用。
例如：
$("p").eq(2).css("background-color","red");
完全等价于：
$("p:eq(2)").css("background-color","red");
5 $()函数和jQuery()函数等价
事实上在jq中做出了一个声明，这个声明就是$ == jQuery。
也就是说
$() 和 jQuery() 这两种写法是等价的。
ps：$()函数并不是jq所独有的一个函数，在很多其他框架例如prototype框架中也对$()函数做出了声明。根据js语法，同名函数后声明的会覆盖前面的。 因此在工程中如果引入了多个框架，那么使用jQuery()这种写法是最保险的。但是如果仅对于jq框架来说，这两种写法就是等价的。
6 $()函数得到的是jQuery对象
js中规定函数都会有一个执行结果，或者说是返回值。
jq是使用js封装的一个框架，因此$()函数也不例外。
jq中规定$()函数返回的是一个jq对象
例如：
var $p = $("p")；//此处$p就是一个jq对象(集合)
对于jq对象来说我们需要知道的内容有：
(1)jq对象仅能够调用jq中设定的属性和方法，对于原生js的属性和方法都无法调用
(2)jq对象可以在必要的时候转换为js原生对象。
a) jq对象可以通过【jq对象[n]】方式转换为js原生对象
var p = $("p")[0];
b) jq对象可以通过【.get(n)】方式转换为js原生对象
var p = $("p").get(0);
7 关于引号
前面提到过$()在选择元素的时候括号中先写引号，但是存在获取某些对象的时候不需要加引号的特例：
$(window)
$(document)
$(this)
叁.jQuery添加事件监听
1 基本写法
正如我们刚才所说，jQuery对象采用打点调用方法。所以在jQuery中给元素添加监听的语法是：
$("选择器").click(function(){});
ps：jq方法可以直接被jq对象使用，而jq对象在调用jq方法的时候是批量处理！
2 事件名
jQuery中事件的名字，一律没有on。
- 单击： click()
- 双击： dblclick()
- 鼠标进入： mouseenter()
- 鼠标离开： mouseleave()
- 文本框得到焦点： focus()
- 失去焦点： blur()
注意：jq中对于事件的绑定还允许链式声明，不必重复获取jq对象。
且链式声明时除最后一个绑定函数末尾加分号表示绑定结束外，其余函数后均不必写任何内容。
$("div").mouseenter(function(){$(this).css("background-color","red");})
.mouseleave(function(){$(this).css("background-color","orange");});
3 jQuery事件监听的特点
刚才我们在代码中缩写的绑定事件，和JS中原生的dom0绑定事件模式很像。那么我们来看下面一段代码：
$("div").click(function(){alert("我是1");})
.click(function(){alert("我是3");});
$("div").click(function(){alert("我是2");});
很显然，我们通过jq对象$("div")为页面中所有的div添加了三个同名的事件。那么按照JS事件的执行逻辑来看一定会发生事件覆盖。但是和我们所预期的却并不相同，三个事件全部都执行了。这是因为：
jq中规定事件绑定不存在覆盖问题，事件的实际执行顺序会按照事件绑定的顺序逐个执行。
4 其他添加事件监听的方法
为jq对象添加事件监听除了本身的方法之外，jq还提供了很多添加事件监听的方法。
(1)通过on方法来为jq对象添加事件监听、通过off方法来为jq对象取消事件监听。
$("div").on("click",function(){
$(this).css("background-color","red");
});
$("div").off("click"); //去掉div的click事件监听
(2)通过bind方法来给jq对象添加事件监听。
bind方法的好处的就是能够给一个jq对象添加多个事件监听。事件名用空格隔开。
$("div").bind("mouseenter mouseleave",function(){
num++;
//让h1里面显示这个num数字
$("h1").html(num);
});
bind还可以采用JSON形式的参数来给jq对象添加事件监听。
$("div").bind(
{
click : function(){$(this).css("background-color","red");},
mouseenter : function(){$(this).css("background-color","pink");}
}
);
(3)通过one方法来给jq对象添加事件监听。
但是需要注意通过one方法添加的事件监听是'一次性的'，只能执行一次。
$("div").one("click",function(){
alert("哈哈");
});
肆、基本方法
1 css()方法
css()方法用于更改jq对象的css样式，本方法可读可写。相当于js中的.style属性。
语法：
$().css("key","value");
css方法第二个参数是可选参数。
如果只有一个参数就是读样式，
如果有两个参数或JSON样式参数就是设置样式。
设置样式实例：
需要注意的是，书写css属性名字可以用驼峰也可以用短横。
$("div").css("background-color","red");
等价于：
$("div").css("backgroundColor","red");
当我们的CSS的值是px为单位的时候，那么此时可以不加px单位：
$("div").css("width",500);
等价于：
$("div").css("width","500px");
如果我们要设置多个css属性，可以重复写很多css命令，当然也可以用json格式：
$("div").css("background-color","pink");
$("div").css("width",500);
等价于：
$("div").css({
"background-color" : "yellowgreen" ,
"width" : 500
});
更特殊的，我们可以在直接在原值上累加：
$("div").css("width","+=400px");
2 show()和hide()方法
元素的显示和隐藏。也就是说，原来我们的
div.style.display = "block";
div.style.display = "none";
现在简化为了：
$("div").show();
$("div").hide();
特别的在jq中，我们可以给show()和hide()里面加上参数，表示动画的时间。此时整个变化过程将是一个宽高发生改变，同时透明度也发生变化的动画。
$("div").show(500); 单位：毫秒
3、slideDown()和slideUp()方法
下拉显示和上滑隐藏。
$("div").slideUp();
$("div").slideDown();
注意，一个元素如果原本是显示的，才能够调用slideUp()方法。
如果这个元素是display:none的，才能调用slideDown()方法。
同样的，这两个方法里面可以写数字，表示动画的时间
$("div").slideDown(3000);
3000就表示动画是3000毫秒。
4 fadeIn()和fadeOut()方法
淡入、淡出。
$("div").fadeIn();
$("div").fadeOut();
需要注意的是：
fadeIn()的起点是display:none; 而不是opacity:0;
fadeOut()的终点是display:none;也不是opacity:0;
也就是说一个元素如果想淡入，一定要给这个元素加上display:none;属性，而不要给他加上opacity:0;的属性。
同样的fadeIn()和fadeOut()的函数括号里面可以加数字，表示动画的时间。
5 addClass()和removeClass()方法
追加类和移除类。add就是添加，remove就是移除。
一个div元素
<div id="box" class="box1"></div>
现在施加命令：
$("#box").addClass("box2");//参数是box2，没有点!!!!!!!!!!!
那么div将变为：
<div id="box" class="box1 box2"></div>
也就是说addClass是追加类，而不是改变类。不影响原有的类名。同样的removeClass表示移除类，不影响不移除的类名。
<div id="box" class="box1 box2"></div>
$("#box").removeClass("box2");
最终结果为
<div id="box" class="box1"></div>
6 attr()方法
attr是英语attribute属性的简写，用来更改HTML元素的属性。之前我们在原生JS中学习过，一个元素可以"有什么属性就点什么"。例如：
document.getElementById("tutu").src = "2.jpg";
实际上就是更改这个HTML元素的属性。
现在在jQuery中就是用attr()方法,来更改HTML元素的属性。
语法：$("div").attr("key","value");
例如：
$("img").mouseenter(function(){
$(this).attr("src","images/longlong.jpg");
});
//鼠标进入的时候，换图，就是换图的src属性
attr()也可以读属性，当只有一个参数的时候，表示读取这个东西的属性。例如：
var s = $("img").attr("src");
7 html()方法
用来读取和更改元素内部的内容，作用和原生的innerHTML属性是一样婶的。
例如：
$("h1").html("我是frank，我喂自己袋盐！");
这样的话，<h1></h1>标签对儿之间就是"我是frank，我喂自己袋盐！"了。
同样的如果在html()方法中不写任何参数，则表示读取元素的内容。
8.交叉淡入淡出轮播图
交叉淡入淡出轮播图，也叫作呼吸轮播。
是指所有图片摞在一起，只有一张能够显示。当点击按钮的时候，显示的这张图片淡出，另一张图片淡入。形成缓缓变图的感觉。
伍.animate()方法
1 最简单的形态
animate()系列方法中最最简单的就是animate函数。
它有两个参数：
第一个参数是一个JSON，表示动画的终点（就是这个元素要变成什么样子）
第二个参数，是动画执行完毕所需的时间。（单位是毫秒 ）
例如：
$("div").animate({"left":800,"top":300, "width":300 },2000);
ps:需要注意的是，即使只有一个属性发生动画，也要写JSON，而不能写k,v形式。
2 不能够变化的属性
jq中animate动画固然强大，能够很容易写出各种各样的动画。但是实际上来说动画的本质是属性在一定时间内发生的改变。那么jq能够像我们之前写css动画一样对任意属性都能做出不同样式的修改和设计么？
看下面一个例子：
$("div").animate({"background-color":"cyan"},2000);
执行结果发现div的背景颜色并没有在2s钟内发生一个动画变化。所以很显然jq对于相当一部分的属性是不能够进行动画的。至少我们现在不行。而我们今天并不关心什么属性能动画，我们关心的是不能变化的属性：background-color、background-position不能参与动画！
ps：jq能够改变的属性都是数值型的，比如width、height、font-size、opacity等
3 动画顺序
jq中动画的执行遵循两大原则：
同步原则：同一个元素如果存在多个animate命令，则按照添加顺序执行。
异步原则：不同元素如果存在多个animate命令，则他们同时执行。
同步原则实例：
$("div").animate({"left" : 600} , 2000);
$("div").animate({"top" : 400} , 2000);
此时div元素，将向右边移动到600px，花费2000毫秒；
完事儿之后，再向下面移动到400px，花费2000毫秒。一共4000毫秒。
ps：同步原则中说的很明确，如果存在多个命令！多个命令！多个命令！
jq存在链式调用，因此我们对于同一个元素发出的不同命令可以采用下面的写法:
$("div").animate({"left" : 600} , 600) ← 没有;
.animate({"top" : 400} , 600)
.animate({"left" : 100} , 600)
.animate({"top" : 100} , 600)
.slideUp()
.fadeIn();
ps : 像fadeIn()、slideDown()也属于动画命令。
4 回调函数
animate语句，是一个经典的"异步"(Asynchronous)语句。
所谓的异步就指的是在动画执行过程中，程序继续执行后面的语句，而不是死等这个动画完毕！
举个栗子：
比如你做饭，用微波炉把肉化冻需要5分钟时间。
但是是个正常人类就绝对不会死等这5分钟，而是肯定会先去把菜切好。
这样一会儿肉化好了，菜也好了。
这就是异步操作。
我们来看下面这个语句：
$("#box1").animate({"left":1000},5000);
console.log("哈哈");
盒子运动需要5000毫秒才能执行完毕。
但是由于它是异步语句，所以JS不会死等他执行完毕，而是直接做后面的语句。
而任何异步语句都会提供回调函数，用来表示这个"花费时间"的事儿，做完之后要干嘛。
看下面的例子：
$("#box1").animate({"left":1000},2000,function(){
$(this).animate({"width":500},500);
});
我们可以给animate增加第三个参数，而第三个参数就是一个回调函数。它表示这个动画做完之后要做的事情。在回调函数中,$(this)指的是运动的对象。
5 匀速运动
jQuery的运动不是匀速的，而是先加速然后到终点钱缓慢减速。
那么我们如果想进行匀速运动，就需要加一个参数叫做"linear"(线性的)。
例如：
$("#box2").animate({"left":1000},4000,"linear");
6 stop()方法
stop()方法表示停止元素动画。
语法:
stop(clearAllAnimation,goToEnd)
该方法中接收两个参数：
第一个参数表示是否清除所有动画，默认为false表示不清除所有动画。
第二个参数表示是否瞬间完成当前动画，默认为false表示不立即完成当前动画。
ps：两个参数都可以不写，不写相当于采用默认值。
7 动画积累的防止
动画积累就是用户不恰当操作引起的逻辑混乱：
上一个动画还没有结束，用户又发出了下一个运动的指令。
举例来说就是：
(1)小妹纸约你出去吃麻辣烫，然后一起出去嗨皮到天明。
(2)你正在赴约的路上，老婆在家给你打电话，要你马上回家。
此时，有两种策略：
(1)立刻无条件掉头回家。老婆最大！
(2)家里爷是老大，只要我在路上呢就不接电话。等我和妹纸嗨完在回家。
其实将上述逻辑转换成我们jq的代码，那么animate()方法中的防止动画积累的策略就是如下的实现方式。
策略1：立即结束当前动画，执行新的命令：
$().stop(true).animate();
策略2：如果当前正在运动，那么不接收新的命令：
if($("div").is(":animated")){
return;
}
新的动画命令
陆、结点
一.节点关系
1 children()方法
本属性选中某一个元素的所有直接儿子元素。
语法：$('selector').children()
注意：children()里面可以加参数，参数需要是选择器。 表示既是这个元素的子元素，又满足参数选择器的元素。
2 find()方法
由于children()只能查找子元素，如果是孙子元素是找不到的。
所以jQuery提供了find()"寻找"的方法。
作用：在某个节点中查找符合选择器要求的后代节点
3 parent()方法
作用：表示查找当前节点的直属父节点
4 parents()方法
作用：表示查找当前节点的所有祖先节点，知道html节点为止。
5 siblings()方法
作用：访问当前节点的所有兄弟节点（除本身之外）
6 next()、prev()、nextAll()和prevAll()方法
next() 后一个亲兄弟
prev() 前一个亲兄弟
nextAll() 后所有亲兄弟
prevAll() 前所有亲兄弟
7 节点关系综合查找
现在我们已经知道，在jQuery中可以通过连续打点来调用节点的关系方法。
但是这个操作必须存在一个前提，那就是：
一定要知道当前正在操作的元素是谁
实例：点击一个p节点
令这个节点的父元素中所有的p元素显示"我开心"。
而其他父元素中所有的p都显示"呜呜呜"
代码：
$("p").click(function(){
//自己开心，自己的兄弟们开心。
//自己的父亲的兄弟（是另外两个div）的儿子们呜呜呜
$(this).html("开心").siblings().html("开心")
.parent().siblings().children().html("呜呜呜");});
注意：监听是批量的，但是你操作的元素是唯一的，是跟你触碰到的元素有关系这个元素。
二.节点顺序和遍历
1 index()方法
index()方法用来获取当前元素在其兄弟节点中的排名，从0开始。
语法：$('selector').index()
例如：
$(".teshu").click(function(){
alert($(this).index());
});
//获得点击节点在其兄弟节点中的排名。
2 对应
jquery中的对应实际上指的是eq()函数，他的作用是获取集合中指定序号的节点
需要说明的一点就是序号是从0开始。
语法：$('selector').eq(index)
例如：$('p').eq(2)//表示获取这个p集合中的第三个p
扩展：而之所以在这里称eq为对应，是因为eq能够实现下面的小效果
点击box1中的p的时候，我们想让box2中对应的p颜色变红
$(".box1 p").click(function(){
$(".box2 p").eq($(this).index()).css("background-color","red");
});
ps:另外使用对应，我们还可以开发选项卡效果
3 each()方法
作用：遍历每个节点，然后执行里面的回调函数。
注意：回调函数中如果存在$(this)，那么它指的是【遍历中当前这一次的这个节点】。
语法：$('selector').each(func)
实例：
$("div").each(function(){
$(this).children().eq(2).css("background-color","red");
});
解释：
$("div")选择了一堆div。然后让每个div依次成为$(this)，然后执行后面的语句。
所以上述代码的作用是让每一个div中第三个子元素背景色变红。
4 delay()函数表示延迟：
$().delay(600).animate();
$().delay(600).fadeOut();
$().delay(600).show(400); //均表示动画延迟600ms执行
三.节点操作
.1 内部插入append()、appendTo()、prepend()、prependTo()方法
作用：这四个方法都用来在某个节点内部插入新内容
语法：
A.append(B); //向【A节点内部现有内容之后】追加【B节点】
B.appendTo(A); //将【B节点】追加到【A节点内部现有内容之后】
A.prepend(B); //向【A节点内部现有内容之前】追加【B节点】
B.prependTo(A); //将【B节点】追加到【A节点内部的现有内容之前】
说明：四个方法所表达的含义大致相同，只不过在语法上略有出入。其中AB均为节点
2 外部插入after()、before()、insertAfter()、insertBefore()
作用：相比于前面的四个方法的作用，这四个方法可以认为是给当前节点添加兄弟
语法：
A.after(B); //在【A节点之后】添加【同级节点B】
A.before(B); //在【A节点之前】添加【同级节点B】
A.insertAfter(B); //把【A节点】添加到【B节点之后】
A.insertBefore(B); //将【A节点】添加到【B节点之前】
说明：四个方法所表达的含义大致相同，只不过在语法上略有出入。其中AB均为节点
补充：
A.after(B)等价于B.insertAfter(A) 最终B在A的后面
A.before(B)等价于B.insertBefore(A) 最终B在A的前面
3 改变节点位置
对于jq来说操作的实际上要么是节点，要么是节点组。那么有一条原则在操作节点的时候我们就必须遵守：
通过搜索获得的节点在页面中只能同一时刻出现在一个位置。
这就是frank总结的‘节点守恒定律’。
简单举个例子来说明一下这个定律：
假设存在HTML结构：
<div id="box1">
<p class="xiaoming">我是小明</p>
</div>
<div id="box2">
</div>
现在执行命令：
$("#box2").append($(".xiaoming"));则HTML页面将变为：
<div id="box1">
</div>
<div id="box2">
<p class="xiaoming">我是小明</p>
</div>特别需要说明的是，在jq中并没有提供所谓的change之类的方法。
因此改变节点的位置还是需要通过append这种方法来实现。
4 wrap()包裹
作用：给自己增加一个父类(开发中基本没啥用)
语法：A.warp(B)
5 删除节点empty()、remove()
作用：empty()表示删除指定节点中的内容，而remove()则表示移除自己
语法：
A.empty() 等价于 A.html(‘’);
A.remove();
6 克隆节点clone()
作用：相当于js中的cloneNode操作，即克隆的节点在页面中没有自己的位置。
需要通过append等操作才能够追加到页面当中。
语法：
A.append(B.clone()）)
柒、其他
1.jQuery尺寸
$("div").width(); //计算后的内容宽度
$("div").innerWidth(); //计算后的算上padding的宽度
$("div").outerWidth(); //算上padding和border
$("div").outerWidth(true);//算上padding和border和margin
2.jQuery对象获取
window.onscroll = function () { var height = document.documentElement.scrollTop; console.log(height); }
$(window).scroll(function () { console.log($(window).scrollTop()); })
回到顶部
$('button').click(function () {
$('html').animate({'scrollTop':0},5000);
})
915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
