jQuery
- 获取jQuery
- 补充知识点
- 基础
- jQuery的基本原理
- jQuery的DOM操作
- jQuery事件
- jQuery动画效果
- jQuery的位置坐标及图形大小
- jQuery的each(callback)方法
- jQuery的index(para)方法
- jQuery的工具方法
获取jQuery
CDN：http://www.jq22.com/cdn/#a2
下载地址：http://www.jq22.com/jquery-info122
常用CDN：
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
补充知识点
注：所有需要特别注意的都提升到这里记录
1、$(“div”)的搜索顺序是：由DOM树自上而下（自html至底），层层递进，先搜索完子标签再向下搜索同级的标签。
2、当给一个标签样式的时候，尽量不要给行间样式，原因：
1）、使代码不易读。写成行间样式的形式会增加维护难度；
2）、复用率低。每次更改某个标签的样式都要写一遍行间样式；
3）、运行效率低。浏览器可以将css缓存到本地，但是js不缓存。所以将样式更多的放在css中，会提升网页运行的效率；
3、jQuery.fx.off = true 关闭jQuery的运动效果（主要用于animate），直接到达目标点
基础
1、全局变量$、jQuery相同，存储着相同的函数引用。即var $ = var jQuery = function(){}
2、 $ () 用于选择元素，传入的参数要符合css selector的标准，如 $(‘div’);相当于document.getElementsByTagName(‘div’); 返回的结果是被选择出来的元素的类数组。
3、如果使用$()选择除了元素，再通过 [] 的方式去获取其中某个元素，获取的是DOM元素而非jQuery元素，即其中是没有.css的方法的。
3、使用jQuery选择元素并给其添加css样式。
单个div的情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var oDiv = $('div').css({width:500,height:500,backgroundColor:'red'});
console.log(oDiv);
</script>
</body>
</html>
多个div的情况
<body>
<div class="demo1"></div>
<div class="demo2"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var oDiv = $('div').css({width:500,height:500,backgroundColor:'red',borderStyle:'solid',borderWidth:3,borderColor:'black',marginTop:100});
console.log(oDiv);
</script>
</body>
$(para)中可以传入的参数
1、参数规则：
- css selector
- jquery unique selector
- null
- undefined
- dom
- $(function(){})
- $(document).ready()
css selector
通过css选择器的方式选择要素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div[uni]{
width: 300px;
height: 300px;
background-color: orange;
border: solid black 1px;
margin-top: 100px;
position: absolute;
/* float: left; */
/* display: inline-block; */
}
</style>
</head>
<body>
<div class="demo1"></div>
<div class="demo2" id="id2"></div>
<div class="demo3" id="id3" uni="no3"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// var oDiv = $('div').css({width:500,height:500,backgroundColor:'red',borderStyle:'solid',borderWidth:3,borderColor:'black',marginTop:100});
var oDiv = $('.demo1').css({width:500,height:500,backgroundColor:'red',borderStyle:'solid',borderWidth:3,borderColor:'black',marginTop:100});
var oDiv = $('#id2').css({width:300,height:300,backgroundColor:'blue',borderStyle:'solid',borderWidth:3,borderColor:'green',marginTop:100});
var oDiv = $('[uni]').css({width:300,height:300,backgroundColor:'blue',borderStyle:'solid',borderWidth:3,borderColor:'green',marginTop:100});
console.log(oDiv);
</script>
</body>
</html>
css选择器的主要选择方式：
jquery unique selector
jquery容错机制
向jquery中传入null、undefined、""（空串）均不会报错，以保证程序的正常运行。
如：$ (null) 、 $ (undefined)、$("")
按顺序选择
jquert unique selector的用法在css selector的基础上（后面）添加":xxx"来选择某一个或者某一类元素
:xxx可以是：
- :first — 第一个
$('.demo1 ul li:first').css({width:100,height:100,backgroundColor:'red'});
- :last — 最后一个
$('.demo1 ul li:last').css({width:100,height:100,backgroundColor:'red'});
- :odd — 第奇数个（从0开始，数学意义上的奇数）
$('.demo1 ul li:odd').css({width:100,height:100,backgroundColor:'red'});
- even — 第偶数个
$('.demo1 ul li:even').css({width:100,height:100,backgroundColor:'red'});
- eq(n) — 第n个，从0开始，负数代表倒叙（-1最后一个）
$('.demo1 ul li:eq(3)').css({width:100,height:100,backgroundColor:'red'});
例：
<!-- jquery unique selector用法如下： -->
<div class="demo1">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<script>
// 选择div --- ul --- 第一个li
$('.demo1 ul li:first').css({width:100,height:100,backgroundColor:'red',listStyle:'none'});
</script>
按属性选择
直接按照标签的某个属性进行选择，可以是 $(’[attrName=attrValue]’)的形式也可以是 $(‘tagName[attrName]=“attrValue”’)这样的加上标签名的形式。
注：并且可以在属性名后加 "$、^、！"来表示，具有该属性，且attrName属性以attrValue为 "结尾、开头、非该值"的形式进行选择
<!-- jquery unique selector用法如下： -->
<div class="demo1">
<ul>
<li>1</li>
<li>2</li>
<li qwer="rewq">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<script>
// 属性选择
$('[qwer="rewq"]').css({width:100,height:100,backgroundColor:'red'});
// 标签+属性选择
$('li[qwer="rewq"]').css({width:100,height:100,backgroundColor:'red'});
// 该属性以该值为开头
$('li[qwer^="rewq"]').css({width:100,height:100,backgroundColor:'red'});
// 该属性以该值为结尾
$('li[qwer$="rewq"]').css({width:100,height:100,backgroundColor:'red'});
// 该属性非该值
$('li[qwer！="rewq"]').css({width:100,height:100,backgroundColor:'red'});
</script>
传入原生js选择出的dom元素
传入原生js选择出的dom元素，将其转为jQuery的对象，以便使用jQuery的方法
// 传入原生js选择出的元素
var li = document.getElementsByTagName('li')[4];
$(li).css({width:100,height:100,backgroundColor:'orange'});
传入function(){}
$(function(){})相当于 $(document).ready(function(){})的简写
如：$(function(){})
传入的function(){}在DOMContentLoaded事件触发后（DOM解析完成）才会执行其中的func。
window.onload = function(){
console.log("window");
}
document.addEventListener("DOMContentLoaded",function(){
console.log("DOM");
} , false)
// 传入function(){}
$(function(){
console.log('three1')
})
// 和上面的一样的效果，谁在上面谁先执行
$(document).ready(function(){
console.log("three2");
})
注意：jQuery源码中是使用DOMContentLoaded和readyState（为了兼容IE）封装的，所以$ ( function(){})和$(document).ready(function(){})和DOMContentLoaded的优先级是一样的。如果同时使用这两个事件则谁在上面谁先执行，这里的谁指的是引入jQuery的那个标签和DOMContentLoaded这个事件的先后顺序。
传入第二个参数，起限定作用
// 以下三者等效，看情况选择
$('.demo1 ul li').css({width:100,height:100,backgroundColor:'red'});
$('li', '.demo1 ul').css({width:100,height:100,backgroundColor:'blue'});
$('ul li', '.demo1').css({width:100,height:100,backgroundColor:'orange'});
jQuery的基本方法
.get(num) — 获取原生DOM元素
$(‘xxx’).get(num) — 从jQuery选择出的元素类数组中，选择出某个元素，选择出来的是原生的DOM元素
num可以填写的情况：
- 不填 — 返回原生DOM元素的数组（就是JS的数组，非类数组）
- 正数 — 数字所对应的索引值获取值
- 负数 — 倒着拿（-1 最后一个 ）
$('div').get(0)
get()编写的一个逻辑
// 仿写一个jQuery的get()方法
myJquery.prototype.get = function(num){
// 不传值的情况，返回数组
if(num == null){
return Array.prototype.slice.call(this, 0);
}else{
// num传入正值
if(num >= 0){
return this[num];
}else{
// num传入负值
return this[num + this.length];
}
}
}
// 三目运算符的写法
myJquery.prototype.get = function(){
return num != null ? (num >= 0 ? this[num]: this[num + this.length]): Array.prototype.slice.call(this, 0);
}
.eq(num) — 获取jQuery对象
注：.eq()获取出来的是jQuery对象非原生DOM元素
$(‘div’).eq(n) 类似于 $(‘div:eq(n)’)，均为取出第n个div元素，但更灵活。如
可以分别的进行css的渲染
$('div').css(xxx).eq(0).css(yyy)
仿写jQuery的eq()— 不完整版（思路版）
// 仿写jQuery的eq()方法
myJquery.prototype.eq = function(num){
// 现在获取到的是原生的dom元素
var dom = num >= 0? this[num] :this[num + this.length];
// 将原生的dom元素转为jQuery对象，此步写在上面的代码中
return myJquery(dom);
}
回到myJquery.prototype中补充传入null、undefined、dom元素的情况
下面是原来的
// 回到myJquery.prototype中
// 将其中的内容通过闭包的形式返回到全局以供使用
function myJquery(selector){
return new myJquery.prototype.init(selector);
}
// jQuery返回的都是类数组，此处也返回类数组
myJquery.prototype.init = function(selector){
this.length = 0;
// selector仅支持class和id的情况
// 判断输入的selector是class还是id
if(selector.indexOf(".") != -1){
var dom = document.getElementsByClassName(selector.slice(1));
}else if(selector.indexOf("#") != -1){
var dom = document.getElementById(selector.slice(1));
}
// 最后会通过此函数构造对象，此处将对象补充完整
// 是通过id选择出来的dom，没有length属性
if(dom.length == undefined){
this[0] = dom;
this.length++;
}else{
for(var i = 0; i < dom.length; i++){
this[i] = dom[i];
this.length++;
}
}
}
下面是补充后的
// 通过立即执行函数在引入此js文件的时候即将$$和myJquery注册到全局，以供使用
(function(){
// 将其中的内容通过闭包的形式返回到全局以供使用
function myJquery(selector){
return new myJquery.prototype.init(selector);
}
// jQuery返回的都是类数组，此处也返回类数组
myJquery.prototype.init = function(selector){
this.length = 0;
// selector仅支持class和id的情况
// 判断输入的selector是class还是id
// eq引出---现在补充传入的是null、undefined和dom的情况
// eq引出---传入的selector是null的情况
if(selector == null){
return this
}
//
// eq引出---如果传入的selector不是null，但也要保证其为字符串才能有 .indexOf()方法
if(typeof(selector) == "string" && selector.indexOf(".") != -1){
var dom = document.getElementsByClassName(selector.slice(1));
}else if(typeof(selector) == "string" && selector.indexOf("#") != -1){
var dom = document.getElementById(selector.slice(1));
}
// // eq引出---添加判断传入的selector是否为dom元素
// if(selector instanceof Element){
// this[0] = selector;
// this.length++;
// // 将此判断归纳入下面的判断中
// }
// 最后会通过此函数构造对象，此处将对象补充完整
// 是通过id选择出来的dom，没有length属性
// eq引出--- 先判断selector的原型链上有没有Element，如果有则说明传入的是dom元素，则上面的var dom是undefined(没有执行上面的代码)
if(selector instanceof Element || dom.length == undefined){
this[0] = dom || selector; // 此处添加若传入dom元素则 var dom未执行，dom为undefined，则将selector传给this[0]
this.length++;
}else{
for(var i = 0; i < dom.length; i++){
this[i] = dom[i];
this.length++;
}
}
// 仿写jQuery的eq()方法
myJquery.prototype.eq = function(num){
// 现在获取到的是原生的dom元素
var dom = num >= 0? this[num] :this[num + this.length];
// 将原生的dom元素转为jQuery对象，此步写在上面的代码中
return myJquery(dom);
}
myJquery.prototype.init.prototype = myJquery.prototype;
window.$$ = window.myJquery = myJquery;
}());
.find(selector)
返回 jQuery 对象
.find(selector) — 用于在父级标签的内部（子标签）中搜索某个子标签或者某组子标签。
与多次调用$()的优势在于，效率更高。每次查找均是在父级标签内进行查找，不用每次都搜索父级再到子级。
var a = $('.demo1').find('li');
console.log(a);
此处需要特别注意
find()返回的 jQuery 对象有一个属性 “prevObject” ，这个属性并非指该对象的父级标签，而是指查询该对象前的那个 jQuery对象。
例如：
<script>
<div class="demo1">
<ul>
<li>1</li>
<li>2</li>
<li qwer="rewq">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</script>
var a = $('.demo1').find('ul').find('li');
var b = $('.demo1').find('li');
则a的prevObject是jQuery对象 ul
b的prevObject是jQuery对象 div.demo1
.filter(limiter)
.filter() 只能起到过滤作用，即只能在前面已经选择出来的jQuery上按照某种属性或者 ":odd"之类的jQuery unique selector进行选择，而不能向find()那样去扩展搜索它的子集。
limiter只能填写限制条件，不能添加标签之类的选择器。
如下两种写法中，filter1可以成功过滤出所要的li，而filter2和filter3则不行。
// filter1
$('.wrapper ul')
.find('li')
.filter('.demo')
.css({width:100, height:100, backgroundColor:'red'});
// filter2
$('.wrapper ul')
.filter('li.demo')
.css({width:100, height:100, backgroundColor:'red'});
// filter3
$('.wrapper')
.find('ul')
.filter('li')
.css({width:100, height:100, backgroundColor:'red'});
应用实例，如下代码中的两种写法：
// filter
$('.wrapper ul')
.find('li')
.filter('.demo')
.css({width:100, height:100, backgroundColor:'red'});
和
// 效果与上面的相同
$('.wrapper ul')
.find('li[class="demo"]')
.css({width:100, height:100, backgroundColor:'red'});
效果是相同的，但是为了更好的利用jQuery的链式特点，所以此处使用filter会更加的灵活
<div class="wrapper">
<ul>
<li>1</li>
<li class="demo">2</li>
<li>3</li>
<li>4</li>
<li class="demo">5</li>
</ul>
</div>
<ul>
<li>1</li>
<li class="demo">2</li>
<li>3</li>
<li>4</li>
<li class="demo">5</li>
</ul>
<script>
// filter
$('.wrapper ul')
.find('li')
.filter('.demo')
.css({width:100, height:100, backgroundColor:'red'});
// 效果与上面的相同
// $('.wrapper ul')
// .find('li[class="demo"]')
// .css({width:100, height:100, backgroundColor:'red'});
</script>
传入函数的情况
只要在参数中传入函数，那么函数的两个参数一个是index — 元素索引值（key）和ele — key对应的原生DOM元素
// filter4
$('.wrapper ul')
.find('li')
.filter(function(index, ele){
// index为jQuery对象中的索引值（key），ele为所对应的原生DOM元素
console.log(index, ele);
})
通过true和false控制
此处return出去的并不是true或者false，而是jQuery的对象（true时返回该ele，并添加到jQuery对象中。false不返回该ele）。直接在filter()中填写true和false是不起效果的
// filter5
$('.wrapper ul')
.find('li')
.filter(function(index, ele){
return index % 2 == 0;
})
.css({width:100, height:100, backgroundColor:'red'});
.not(limiter) — 是filter()的反选，使用方法完全一样
.has() — 与filter() 互补的选择方法
.filter()中只能填写过滤条件，不能对其子标签进行选择或者以是否具有子标签来进行限制
.has()中可以添加父标签中的子标签，从而达到选择某个标签的功能
如：
<div class="wrapper">
<ul>
<li>1</li>
<li class="demo">2</li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>4</li>
<li class="demo">5</li>
</ul>
</div>
<ul>
<li>1</li>
<li class="demo">2</li>
<li>3</li>
<li>4</li>
<li class="demo">5</li>
</ul>
<script>
// has
$('li').has('ul').css({width:100, height:100, backgroundColor:'red'});
</script>
.is()
.is() — 判断是否有相交，返回true和false
$(条件1).is(条件2)，通过对比“条件1”筛选出来的元素和“条件2”筛选出来的元素来查看二者是否有交集，有则返回true 反之 false
.add()
.add(selector) — 向已经选出的元素中添加新元素，都是jQuery元素
传入的selector和$(selector)中的相同，可以是css selector、jQuery unique selector、dom元素等
如：$(‘div’).add(‘ul’)
.add()原理的实现
// 仿写jQuery的add()方法
myJquery.prototype.add = function(selector){
// 使用已有的myJquery方法对selector进行选择
var curObj = myJquery(selector);
// 原有数组
var baseObj = this;
// 创建一个新myJquery对象用于返回
var newObj = myJquery();
for(var i = 0; i < curObj.length; i++){
newObj[newObj.length++] = curObj[i];
}
for(var i = 0; i < baseObj.length; i++){
newObj[newObj.length++] = baseObj[i];
}
this.pushStack(newObj)
return newObj;
}
// 给每个myJquery方法中均自动添加 prevObject属性
myJquery.prototype.pushStack = function(dom){
// 先判断传入的dom是否为jQuery对象，若为jQuery对象则添加prevObject属性，若为原生DOM则包装为jQuery对象后再添加此属性
if(dom.constructor != myJquery){
dom = myJquery(dom);
}
dom.prevObject = this;
return dom;
}
.end()
.end() — 在当前选中的jQuery元素中，回退到prevObject
// 仿写end()方法
myJquery.prototype.end = function(){
return this.prevObject;
}
jQuery的基本原理
jQuery进行封闭的方法
// 通过立即执行函数在引入此js文件的时候即将$$和myJquery注册到全局，以供使用
(function(){
// 将其中的内容通过闭包的形式返回到全局以供使用
function myJquery(){
}
window.$$ = window.myJquery = myJquery;
}());
jQuery进行class和id选择的方法
// 通过立即执行函数在引入此js文件的时候即将$$和myJquery注册到全局，以供使用
(function(){
// 将其中的内容通过闭包的形式返回到全局以供使用
function myJquery(selector){
return new myJquery.prototype.init(selector);
}
// jQuery返回的都是类数组，此处也返回类数组
myJquery.prototype.init = function(selector){
this.length = 0;
// selector仅支持class和id的情况
// 判断输入的selector是class还是id
if(selector.indexOf(".") != -1){
var dom = document.getElementsByClassName(selector.slice(1));
}else if(selector.indexOf("#") != -1){
var dom = document.getElementById(selector.slice(1));
}
// 最后会通过此函数构造对象，此处将对象补充完整
// 是通过id选择出来的dom，没有length属性
if(dom.length == undefined){
this[0] = dom;
this.length++;
}else{
for(var i = 0; i < dom.length; i++){
this[i] = dom[i];
this.length++;
}
}
}
window.$$ = window.myJquery = myJquery;
}());
jQuery的css方法的实现
// css方法的实现
myJquery.prototype.css = function(config){
// 对每一个dom元素遍历设置其css
for(var i = 0; i < this.length; i++){
for(var attr in config){
// 设置行间样式
this[i].style[attr] = config[attr];
}
}
// 将this再返回出去，从而实现jQuery的链式操作
return this;
}
// 设置myJquery.prototype.init.prototype以便实例化后的对象可以找到此方法
myJquery.prototype.init.prototype = myJquery.prototype;
jQuery通过.on()来绑定自定义事件的原理
// 仿写jQuery的.on()的自定义事件的绑定功能
myJquery.prototype.myOn = function(type, handle){
// 想法：将所有的事件绑定在dom身上，且绑定在cacheEvent属性里
// 循环获得jQuery对象中所有的dom元素，并遍历给每个dom都绑定事件
for(var i = 0; i < this.length; i++){
// 判断该dom对象身上是否有cacheEvent属性，若没有则添加该属性
if(!this[i].cacheEvent){
this[i].cacheEvent = {};
}
// 判断该dom对象身上的cacheEvent属性中是否有该type类型的事件，没有则添加该事件并为其绑定相应的事件处理函数handle
if(!this[i].cacheEvent[type]){
// 此处使用cacheEvent[type]是因为type是字符串，而[handle]是因为要允许给该事件绑定多个处理函数
this[i].cacheEvent[type] = [handle];
}else{
// 若该dom对象身上有type类型的处理函数，则直接将handle添加到type属性中
this[i].cacheEvent[type].push(handle);
}
}
}
// 仿写jQuery的.trigger()，并且要求第二个参数不一定非要以数组的形式传进来，允许传多个参数进来
myJquery.prototype.myTrigger = function(type){
// 判断传入的参数是否是两个及以上，并将其赋值
var param = arguments.length > 1 ? [].slice.call(arguments, 1) : [];
// 保存this，此处this指向调用该方法的那个对象
var self = this;
// 循环对所有的myJquery对象获取其dom元素并调用其cacheEvent属性的type事件
for(var i = 0; i < this.length; i++){
// 判断每个dom元素是否具有cacheEvent属性及type事件
if(this[i].cacheEvent[type]){
// 如果有该事件则循环调用其中所有的handle
this[i].cacheEvent[type].forEach(function(ele, index){
// 此处的ele指的就是type数组中的每一个handle，通过apply调用来改变this指向的同时允许传入数组
// 此处若直接传入this而不传入self那么this的指向是window
ele.apply(self, params);
});
}
}
}
jQuery的DOM操作
DOM操作的目录
.html()、.text()、.size()、.addClass()、.removeClass()、.hasClass()、.css()、.attr()、.prop()
原生JS中".html()“和”.text()"的区别：
“.html()” — 代表开始位置到结束位置的所有内容，包含HTML标签
“.text()” — 代表开始位置到结束位置的所有文本，不包含HTML标签
.html()
作用：获取获取的开始位置到结束位置的所有内容，包含HTML标签
读写性：可读可写
当读取时
注意：此方法仅对类数组中的第一个jQuery元素起效果，即使类数组中有多个jQuery元素。即不可以像".css()“方法那样对选择出的类数组中的所有元素同时进行操作，”.html()"仅对一个起效果
如：$(“div”).html() — 则代表被选择出的div的类数组中第一个div内的内容
当写入时
注意：此方法会对所有被搜索出的标签进行操作
如：
html结构为：
.html() 写入操作为：
$("div").html("<div style='color:green;background:rgba(155,230,80,0.5);width:400px;height:400px;'>this is a div</div>");
结果为：
解析：
1、html结构中有6个div，当执行.html()写入操作时，会对选择出来的所有div逐个进行操作。
2、过程：
1）、当操作到第一个div class=“father1” 时，会以.html(xxx)里面的xxx替换到此div中，替换之后便少了div class=“son0”，此时会跳过此div继续对下个div进行操作；
2）、如此操作直到所有类数组中的div全部被替换掉为止；
.html(function(index, ele){})的形式
当给".html()"中传入function(){}时，会自动传入两个参数，第一个是索引值，第二个是值（该类数组中该索引值对应的html内容）
.text()
作用：获取获取的开始位置到结束位置的所有内容，不包含HTML标签
读写性：可读可写
当读取时
注意：此方法会将所有div中的值取出来
如：$(“div”).text() — 则代表被选择出的div的类数组中所有的div内的内容
当写入时
注意：此方法会对所有被搜索出的标签进行操作
如：$(“div”).text(“qwer”) — 则代表被选择出的div的类数组中所有的div内的内容
.text(function(index, ele){})的形式
当给".text()"中传入function(){}时，会自动传入两个参数，第一个是索引值，第二个是值（该类数组中该索引值对应的text内容）
.size()
作用：获取类数组的长度，作用与.length相同，但是.size()更符合jQuery的语义
如：
$(“div”).size()
$(“div”).length
.addClass()
作用：向被选择出来的jQuery元素的class属性中添加一个类名。
注：会对被选择出的所有的jQuery同时进行操作
如：$(‘div’).eq(0).addClass(‘active’)，
会在第一个div的class属性中添加一个active属性
.addClass()中可以同时添加多个属性，以空格分隔，如.addClass(‘active1 active2 active3’)
.addClass(function(index, ele){})的形式
.addClass(function(index, ele){})中使用函数更灵活
.removeClass()
作用：向被选择出的jQuery元素删除其class中的某个类
如：$(‘div’).eq(0).removeClass(‘active’)
会在第一个div的class属性中找到active属性并删除
.addClass()中可以同时添加多个属性，以空格分隔，如.addClass(‘active1 active2 active3’)，顺序没关系，会将每个属性都删除掉 不必按顺序
如果什么都不填，则会将所有的类名全部清除
.removeClass(function(index, ele){})的形式
.removeClass(function(index, ele){})中使用函数更灵活
.hasClass()
作用：用于判断被选择出的jQuery对象的类数组中是否至少有一个jQuery对象的class中含有.hasClass()中的属性。返回boolean值
注：只要有一个有就返回true
如：$(“div”).hasClass(“active”);
.css()
作用：修改标签的行间样式
如： $(".demo").css({width:100, height:100, backgroundColor:“red”});
注：写法很多样如下：
1）、$ (".demo").css({width:100, height:100, backgroundColor:“red”});
2）、$ (".demo").css({width:“100px”, height:“100px”, backgroundColor:“red”});
3）、$ (".demo").css({width:"+=100px", height:"+=100px", backgroundColor:“red”});
取值的时候要加上行间样式的样式名称，如：$(“div”).css(“width”);
.attr()
jQuery认为attribute的checked、selected、disabled就是表示该属性的初始状态的值，property的checked、selected、disabled表示该属性实时状态的值（true和false），即当要判断checked、selected、disabled时，使用.attr()无效，要使用.prop()。
原因：当标签内存在属性checked、selected、disabled的时候，无论其值是什么都会直接生效（即被勾选、被选中、不激活）。
可读可写
.attr() 是基于 .getAttribute()和.setAttribute()编写的
赋值方法：$(“div”).attr(“test”, “qwer”)
优点：可以获取自定义的属性
缺点：对checked、selected、disabled等的判断几乎无用
.prop()
.prop()基于对原生JS的DOM对象的操作，属性会添加到DOM对象中，但是非标准属性（非特性）不会被映射到其对应的标签中。
可读可写
优点：可以对checked、selected、disabled状态实时判断
缺点：无法对非标准的属性进行判断，会返回undefined
.val()
常用于获取form表单（包括input等）中的value属性的值
可读可写
注：读取仅仅可以读第一个值，写入会对所有的遍历写入
读取方法：
$(“option”).val();
写入方法：
$(“option”).val(“qwer”);
当input的type是text和password时，只改变其显示的值，不改变其行间样式。但此时用val取出的值是改变后的。
批量获取使用 “.serialize()“或者”.serializeArray()”
如：$(“form”).serialize(); — 获取form表单中所有标签的value值，并
$(“form”).serializeArray();
精准（单个）获取使用".val()"
如：$(“div”).val();
写入函数的时候.val(function(index, oldValue){})
.val()在写入函数的时候，自动传入的是index和value中的oldValue，而非ele
.children()
作用：获取子元素，返回jQery对象。
.next(para)
获取被选出的元素的下一个兄弟元素节点，仍然是jQuery元素。
如：$(“div”).next()
para可以传入过滤性参数，用于判断下一个兄弟元素节点是否为para输入的元素节点，如果下一个兄弟元素节点与para中传入的过滤条件相同则返回有索引值对应的类数组。若不相同则返回无索引值的类数组。
注：如果被选择出来的jQuery只有一个则为该jQuery对象所对应DOM元素的下一个兄弟元素节点，若选择出来的jQuery元素有多个，则next()会对每一个执行一次next()操作。
如：
html结构如下：
<input type="checkbox">
<select name="alun" id="1" value="select">
<option value="football">足球</option>
<option value="basketball">篮球</option>
<option value="table">桌球</option>
</select>
情况一：
console.log($("input").eq(0).next());
有结果，且结果为
情况二：
console.log($("input").eq(0).next("div"));
.prev(para)
作用：找到选择出的jQuery对象的符合para条件的上一个兄弟元素节点
其他与.next()均相同
.nextAll(para)
作用：找到被选择出的jQuery对象的后面所有符合para条件的兄弟元素节点
其他与.next()均相同
.prevAll(para)
略
.nextUntil(para1，para2)
作用：作用类似于.nextAll()会向下选择兄弟元素节点，直到某个元素节点与para1相同时 就停止
para1：用于限定到达哪个标签时停止
para2：用于限定被选择的标签是哪些
如：
.nextUntil(“h1”, “input[type=‘checkbox’]”) — 代表从该元素节点开始到h1元素节点为止，之间所有type='checkbox’的input标签
如：
1、html结构
<div>
<h1>选项一</h1>
全选<input type="checkbox" class="selectAll">
a<input type="checkbox" class="select">
b<input type="checkbox" class="select">
c<input type="checkbox" class="select">
<h1>选项二</h1>
全选<input type="checkbox" class="selectAll">
aa<input type="checkbox" class="select">
bb<input type="checkbox" class="select">
cc<input type="checkbox" class="select">
</div>
2、分区域全选
$("input").eq(0).click(function(){
if($(this).prop("checked")){
$(this).nextUntil("h1").prop("checked", true);
}else{
$(this).nextUntil("h1").prop("checked", false);
}
});
$("input").eq(4).click(function(){
if($(this).prop("checked")){
$(this).nextUntil("h1").prop("checked", true);
}else{
$(this).nextUntil("h1").prop("checked", false);
}
});
.siblings(para)
作用：选择出所有符合para的兄弟节点
.parent(para)
作用：选择出该元素节点的父元素节点，若与para不符合则选择结果为空（还是类数组，但是类数组中没有DOM元素）
.parents(para)
作用：选择出该元素节点的父元素节点及所有祖先节点（到html结束），若与para不符合则选择结果为空（还是类数组，但是类数组中没有DOM元素）
.closest(para)
作用：选择出与该元素距离最近的父级（要符合para），若para筛选的结果包含自身 那么会将自身选出
如：
html结构
<div>
<ul>
<li>
<ul>
<li></li>
<li>
<button></button>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
选择
var res = $("button").closest("button");
console.log(res);
结果
.slice(start, stop)
对jQuery对象进行截取，截取范围为[start, stop)，start和stop均为索引值
.data()
作用：在jQuery对象中以属性的形式存储一些信息，但是这些信息不会行间显示，可以用$().data(“属性名”)的方式获取其值
存数据：$().data(“属性名”, “属性值”); $().data({json});
如： $(".demo").data({
name: ‘cst’,
age: 18,
sex: true
});
取数据：$().data(“属性名”);
如： $ (".demo").data(“age”);
.data()操作的jQuery对象，然后通过其cache来与js的dom进行映射，即不修改dom使得操作更加高效，更加节省运算性能。
jQuery事件
目录：.on()、.one()、.off()、.trigger()、.hover()、.click()、.keydown()、.mouseenter()
jQuery中取消默认事件的方法，如取消a标签的跳转功能，直接return false即可，如下：
$("a").click(function(){
return false;
});
.on()
作用：用于触发某种事件，类似于原生JS中的.onxxx() 和 .addEventListener()
参数（以下为参数的顺序，可以不传入selector、data）：
- 事件类型
- selector，进行筛选，进一步过滤要绑定的对象（常用于事件委托）
- data（函数执行的参数）
- 事件处理函数
传参时可能会遇到的情况：
一：若同时不传入selector和data那么可以直接写成.on(“事件”，function(){})的形式
二：若仅传事件类型、data、事件处理函数则data不可以是字符串的形式，否则会被识别为selector，要用对象的形式传。 最终会将data传入到事件处理函数的e.data中去。如：
$(".demo").on("click", {name: "xyz"}, function(e){
console.log(e.data);
})
运行结果是
三：需要事件委托的情况。如现在有结构如下，需要在点击li的时候 弹出其中的文本内容
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
若以如下形式编写代码，则不仅会在点击li时弹出信息框，在点击li外侧ul内侧的空白处的时候 会弹出ul中的文本，这个不符合要求。所以此处需要使用参数selector对触发事件的对象加以过滤。
$("ul").on("click", function(e){
alert($(e.target).text());
})
修改后代码如下，通过selector参数来限定事件执行的对象
$("ul").on("click", "li", function(e){
alert($(e.target).text());
})
事件类型可以绑定任意的事件，如click、mouseenter、mouseleave、keydown、keyup等。
注意：原生JS中一个对象身上的同一个事件只能绑定一个处理函数，但是jQuery中可以给同一个对象身上绑定多个相同事件的处理函数，如：
$(".demo").on("click", function(){
alert("abc");
});
$(".demo").on("click", function(){
alert("aaaa");
});
.one()
作用：绑定事件后仅执行一次，类似于setTimeout()与setInterval()的区别，参数与.on()相同
实例：第一次点击跳转淘宝，后面点击跳转a标签中定义好的页面
<body>
<a href="http://www.baidu.com" target="_blank">去百度</a>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$("a").one("click", function(){
window.open("https://www.taobao.com");
return false;
});
</script>
</body>
.off(para)
作用：解除事件绑定，无论是系统事件（如click、enter等）还是自定义事件
para传入情况：
- 不传 —— 解绑该对象上的所有方法
- 传一个（传事件，如"click"） —— 解除该对象的click事件
- 传两个（传事件和事件处理函数） —— 解除该对象该事件上的某个处理函数，此处理函数不能是匿名的形式。
注意：无效的情况如下，需要把函数在.on()的外部进行申明。
$(".demo").on("click", function clickOne(){
alert("click!");
})
$(".demo").off("click", clickOne);
如下形式才有效：
function clickOne(){
alert("click!");
}
$(".demo").on("click", clickOne);
$(".demo").off("click", clickTwo);
.trigger(para)
作用：用于在代码层触发某些需要用户click、keydown等类似的事件。
参数para：
- 事件
- 数组（会自动在事件处理函数的第二位开始依次按数组的顺序传入），如$(“div”).trigger(“click”, [10, 20, 30, 40])则会在div的click的事件处理函数上传递参数 (e, 10, 20, 30, 40)，实际使用的时候要用形参去接收
常用场景：自定义事件的触发，自定义事件是系统没有进行监听的，即无法通过用户交互来实现其功能。所以要使用.trigger()来进行触发。
自定义事件常用.on()来进行绑定，如：$(".demo").on(“pageLoad”, function(){})，如此就给".demo"绑定了一个自定义的事件"pageLoad"，此事件无法通过用户去触发，只能在代码层使用.trigger()来触发。
.hover(para)
作用：鼠标悬浮的状态，相当于.mouseenter()+.mouseleave()
参数para：要输入两个值，两个函数，一个在鼠标移入的时候触发 一个在鼠标移出的时候触发。
如：
$("select").hover(function(){
console.log("a");
},function(){
console.log("b");
})
jQuery动画效果
目录：.hide()、.show()、.toggle()、.fadeIn()、.fadeOut()、.fadeToggle()、.fadeTo()、.slideDown()、.slideUp()、.slideToggle、.animate()、.stop()、.finish()、.delay()
.show(para)和.hide(para)
作用：分别用于控制元素的显示和隐藏
注：.show()和.hide()会改变元素的display、width、height、opacity若有margin、padding等都会从0开始慢慢恢复到设置的值。而.fadeIn()、fadexxx()只会改变display和opacity。
| 方法 | 更改属性 |
|---|---|
| .show() 、.hide()、.toggle() | display、width、height、opacity若有margin、padding |
| .fadeIn() 、.fadeOut()、 .fadeTo()、.fadeToggle() | display、opacity |
| .slideDown()、 .slideUp()、.slideToggle() | display、height、margin&padding-top&bottom |
如：
<body>
<div class="demo">
<p>Rose</p>
<ul>
<li>nba状元秀</li>
<li>最年轻mvp</li>
<li>涅槃重生</li>
</ul>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$("p").on("mouseenter", function(){
$(this).next().show();
});
$(".demo").on("mouseleave", function(){
$("p").next().hide();
});
</script>
</body>
参数para：
- 第一个参数：控制展示及隐藏的整个过程所需要的时间，单位是毫秒
- 第二个参数：控制展示及隐藏的速率变化，传入字符串，与预设好的变化方式想对应
- 第三个参数：callback，回调函数，当完成这个动作的时候 调用此函数
.toggle(para)
作用：判断当前对象的css中display是不是none，若是none则让其显示，若不是则让其隐藏。简言之就是切换当前元素的display状态
参数para与.show()和.hide()完全相同
如：
如果不用.toggle()需要以如下方式进行编写
// 点击时判断p标签之后的ul是否是隐藏状态，隐藏则显示，显示则隐藏
$("p").on("click", function(){
if($(this).next().css("display")=="none"){
$(this).next().show();
}else{
$(this).next().hide();
}
});
用.toggle()则可写为：
$("p").on("click", function(){
$(this).next().toggle();
});
.fadeIn(para1)、.fadeOut(para1)、.fadeTo(para2)、.fadeToggle(para1)
作用：用于控制渐显、渐隐等操作。
- .fadeIn() —— 渐显
- .fadeOut() —— 渐隐
- .fadeTo() —— 逐渐改变透明度至某个值（由参数传入）
- .fadeToggle() —— 切换显隐状态
注：.show()和.hide()会改变元素的display、width、height、opacity若有margin、padding等都会从0开始慢慢恢复到设置的值。而.fadeIn()、fadexxx()只会改变display和opacity。
参数para1（同.show()、.hide()）：
- 第一个参数：过程持续事件
- 第二个参数：渐变速率的模式
- 第三个参数：callback
参数para2（仅.fadeTo()）：
- 第一个参数：过程持续事件
- 第二个参数：透明度变化至此值即结束
- 第三个参数：渐变速率的模式
- 第四个参数：callback
如：.fadeIn()、.fadeOut()
$("p").on("click", function(){
if($(this).next().css("display")=="none"){
$(this).next().fadeIn(1500);
}else{
$(this).next().fadeOut(1500);
}
});
.fadeToggle()
$("p").on("click", function(){
$(this).next().fadeToggle(1500);
});
.fadeTo()
$("p").on("click", function(){
if($(this).next().css("display")=="none"){
$(this).next().fadeTo(1500, 0.6, "swing", function(){
console.log("over0.6");
});
}else{
$(this).next().fadeTo(1500, 0.1, "linear", function(){
console.log("over0.1");
});
}
});
.slideDown(para)、.slideUp(para)、.slideToggle(para)
作用：类似卷帘的上下显隐
主要更改高度
如：
// 点击时判断p标签之后的ul是否是隐藏状态，隐藏则显示，显示则隐藏
$("p").on("click", function(){
if($(this).next().css("display")=="none"){
$(this).next().slideDown();
}else{
$(this).next().slideUp();
}
// $(this).next().toggle(3000);
});
最重要的.animate(para)
作用：
参数para:
- 第一个参数：target，即运动的目标点
- 第二个参数：duration，运动持续的时间
- 第三个参数：easing，运动变化的速率
- 第四个参数：callback，回调函数
如：
$(".demo").animate({width: "+=300", height: "+=300", left: "+=200", top: "+=200"}, 3000, "swing", function(){
console.log("over");
});
.animate()中的队列，用于处理多段运动的动画。
如果不使用队列，那么要写成如下的形式（即在animate()的回调函数中继续添加之后的运动），这种形式一旦嵌套过多有一个出现问题，那么出错位置难以锁定，被称为“回调地狱”。
$(".demo").on("click", function(){
$(".demo").animate({width: "+=300", height: "+=300", left: "+=200", top: "+=200"}, 3000, "swing", function(){
$(".demo").animate({width: "-=300", height: "-=300", left: "-=200", top: "-=200"}, 3000, "swing", function(){
alert("over");
});
});
});
使用.animate()队列很简单，就是链式操作，在.animate()之后继续.animate()即可
$(".demo").on("click", function(){
$(".demo")
.animate({width: "+=300", height: "+=300", left: "+=200", top: "+=200"}, 3000, "swing")
.animate({width: "-=300", height: "-=300", left: "-=200", top: "-=200"}, 3000, "swing", function(){
alert("over");
});
});
.stop(para)
作用：终止当前运动，进行下一个运动（运动队列中的运动）
用法：
$(".demo").stop();
参数para：
- 第一个参数：可以传true，停止队列之后的所有运动
- 第二个参数：可以传true，表示在停止当前运动后，瞬间移动到目标点（当前运动阶段的目标点）
$(".stopBtn").on("click", function(){
$(".demo").stop(true,true);
})
.finish()
作用：停止当前及队列之后的所有运动，并立即到达最后的目标点
.delay(para)
作用：暂停
para：传数字，单位毫秒
jQuery动画过渡扩展插件
引入url：
https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js
简介url：
https://blog.csdn.net/xiaolongtotop/article/details/8309635
.animate()原理
.queue(para) —— 队列的入队方法
作用：创建并命名队列
para参数：
- 第一个参数：传入队列名
- 第二个参数：可以传入一个function(){}
其原理是在一个对象中，添加队列名作为一个属性名，将第二个参数function(){}作为值添加到此属性的数组中
如：
.queue("chain", function(){})
相当于添加{chain:[]}，并向chain中添加function，即{chain:[function(){}]}
可以进行链式调用，向同一个队列中添加多个函数
创建并查看队列，如：
// 创建队列
$(".demo")
.queue("chain", function(){alert(1);})
.queue("chain", function(){alert(2);})
.queue("chain", function(){alert(3);});
// 查看队列
console.log($(".demo").queue("chain"));
.dequeue(para) —— 队列的出队方法
作用：从队列的顶部取出一个函数并执行（队列先进先出），类似pop() + 执行。
注意：此方法一次只会提出一个函数并执行，若要自动进行多个队列中函数的调用，需要在入队的时候给需要调用下一个函数的函数一个形参，并在该函数中执行该形参（jQuery的.dequeue()在执行函数的时候，会向该函数中传递一个参数，此参数是队列中的下一个函数，若在此函数中以形参接收并在函数体中执行，则可达到自动链式运行的效果）。
如：
// 创建队列
$(".demo")
.queue("chain", function(next){
alert(1);
// 此处执行
next()
}).queue("chain", function(next){
alert(2);
next()
}).queue("chain", function(next){
alert(3);
next()
});
// 执行队列
$(".demo").dequeue("chain");
para：
- 传入队列名
.clearQueue() —— 队列的清空方法
略
jQuery的位置坐标及图形大小
.offset()
作用：获取某对象距离文档的left和top。（原生JS中的offset返回的是距离上一个有定位的父级距离）
可读可写
读：
也可使用.css(“left”)和.css(“top”)来获取。
var $demo = $(".demo");
console.log($demo.offset({));
写：
修改当前元素距离document的左、上距离，传入对象 格式为：{left:xxx, top:xxx}
var $demo = $(".demo");
console.log($demo.offset({left:100, top:100}));
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper{
position: absolute;
width: 300px;
height: 300px;
background-color: red;
left: 100px;
top: 100px;
}
.wrapper .demo{
width: 50px;
height: 50px;
background-color: green;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="demo"></div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var demo = document.getElementsByClassName("demo")[0];
console.log("offsetLeft is ",demo.offsetLeft);
console.log("offsetTop is ",demo.offsetTop);
var $demo = $(".demo");
console.log($demo.offset());
</script>
</body>
</html>
.position()
作用：获取与有定位父级的的距离（left和top），这个和原生JS的offsetLeft和offsetTop属性相同。
可读不可写
.scrollTop()、.scrollLeft()
作用：获取当前可视区域的滚动距离（顶部、左侧）
可读可写
读取：
用法：
$(window).scrollTop();
$(window).scrollLeft();
原生JS中的获取方法：
window.pageXOffset;
window.pageYOffset;
写入：
用法：
$(window).scrollTop(xxx);
$(window).scrollTop(xxx);
与原生JS的不同点：原生JS中虽然也可以读写，但是不会移动页面 只会改变值。jQuery的方法会使滚动条运动；
.width()、.height()、.innerWidth()、.outerWidth()、.innerHeight()、.outerHeight()
作用：读取、设置元素宽、高
可读可写
如：
$(".demo").width(500).height(500);
盒子模型如下：
总结：
.width()、.height()获取的是content的内容，即500500
.innerWidth()、.innerHeight()获取的是content + padding ， 即600600
.outerWidth()、,outerHeight()获取的是content + padding + border，即604604
.outerWidth(true)、,outerHeight(true)获取的是content + padding + border + margin，即664664
jQuery的each(callback)方法
作用：循环对jQuery对象中所有对象遍历进行操作
如：
$("li").each(function(index, ele){})
类似原生的.foreach(function(ele, index){})，但参数的顺序相反
.each(callback)的回调函数中的ele为原生DOM元素，操作需要对其进行包装。
jQuery的index(para)方法
作用：获取该元素在兄弟元素节点中的索引值
用法：
$(".demo").index();
para，过滤参数:
- 不填 —— 则包含所有兄弟节点
- 传入jQuery对象 —— 则仅统计该jQuery类型的DOM元素
如：
<ul>
<li></li>
<li></li>
<p></p>
<li></li>
<span></span>
<li class="text"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
// 获取class = "text"的元素，在其所有兄弟节点中的索引值
console.log($(".text").index());
// 获取li元素集中，class = "text"的li在其所有兄弟节点中的索引值
console.log($("li").index($(".text")));
</script>
jQuery的工具方法
$.type()
作用：是原生JS中typeof()的加强版，可以识别的数据类型更多
原生JS中的typeof()仅仅可以识别6种类型（undefined、boolean、string、number、object、function）
$.type()除了typeof()的6种以外，会有以下区别：
| 类型 | $.type() | typeof() |
|---|---|---|
| null | null | object |
| 数组 | array | object |
| new Date() | date | object |
$.trim()消除空格
作用：消除字符串前后的空格，类似原生JS中的str.trim()，但是更强大 可以传非字符串也不报错。
$.proxy()消除空格
作用：改变this指向。与原生JS中的call、apply、bind不同的是，$.proxy()返回一个新的函数，不改变原函数，需要用变量去承接
用法：
$.proxy(方法，执行该方法的对象)
var newFun = $.proxy(func, obj)
一个重要的开发实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo{
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div class="demo"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// 为了防止污染全局变量，此处使用一个对象来完成所有操作
var study = {
// 先定义初始化函数，是链式调用的开始
init: function(){
// 初始化一些变量
this.ms = 123;
this.dom = document.getElementsByClassName("demo")[0];
// 调用绑定的函数以完成绑定
this.bindEvent();
},
// 将所有的绑定函数都定义在一起，方便调试
bindEvent: function(){
// 此处给this.dom绑定一个onclick事件，该事件的直接调用对象是show
// 这样写看似没有问题，但是当click事件触发的时候，调用show的是dom并不是study，也就是说this指向dom，但是dom上没有show方法
// this.dom.onclick = this.show
// 借用$.proxy()改变this指向来保证this指向study，从而顺利找到show方法
this.dom.onclick = $.proxy(this.show, this);
},
// 函数之间的互相调用，一定要注意this指向的问题
show: function(){
console.log(this.produceMs(this.ms));
},
// 每一个具体功能的函数都成为一个单独的属性
produceMs: function(ms){
return ms + 234;
}
}
study.init();
</script>
</body>
</html>
$.noConflict()防 " $ " 冲突
作用：将$符号给释放掉，并且可以绑定其他字符
用法：
var $c = $.noConflict();
$.each()
作用：arr.forEach()的前身
用法：
$.each(arr, function(index, ele){})
$.parseJSON()
作用：同原生JS中的JSON.parse()，将符合JSON格式的字符串转换为JSON对象。
$.makeArray()
作用：将类数组转换为数组，不改变原类数组 产生新数组。
用法：
$.makeArray(arrObj)
两个参数的用法一：
$.makeArray(something, arrObj)
会将something添加到类数组arrObj中去，不会返回新的数组或者类数组。而是改变原类数组。
something可以是字符串、数组、数组等，如果是数组，那么会将数组的每一位提取出来放入到类数组中，而不是直接将数组作为整体放到类数组中。
用法二：
$.makeArray(something, arr)
会将somethin添加到数组arr中去，不会返回新的数组或者类数组。而是改变原数组。
something可以是数字、字符串、数组、类数组等。
$.extend()
用途：
- 扩展方法 —— 将自己定义的一些方法，加入到jQuery的**工具方法（通过$.xxx来调用）**里面
- 浅层克隆
- 深层克隆
扩展方法使用：
$.extend(json)
$.extend({})
如：
通过在$.extend()中传入json形式可以一次性的扩展多个方法。
$.extend({
getRandom: function(start, final){
return Math.random() * (final-start) + start;
}
})
或者
$.extend({
"getRandom": function(start, final){
return Math.random() * (final-start) + start;
}
})
浅层克隆使用：
使用方法：$.extend(para)
para为2位到多位：
- 2位的情况 —— $.extend(obj1, obj2) 将obj2的属性复制给obj1，若有相同属性则以obj2覆盖obj1
var obj1 = {
name: "sunwukong",
age: 18,
weapen: "jingubang",
type: "houzi"
}
var obj2 = {
// 原始值
name: "zhubajie",
age: 22,
weapen: "jiuchidingpa",
style: "pig",
// 引用值
son: {
name: "xiaozhu",
age: 12,
smoke: true
}
}
$.extend(obj1, obj2);
console.log(obj1);
- 2位以上的情况 —— $.extend(obj1, obj2, obj3, obj4) 将obj2、obj3、obj4的属性复制到obj1中，有相同属性保留最靠后的那个对象的。
深层克隆使用：
$.extend(para)的para的第一个参数中输入true则可以进行深层克隆。其他规则与浅层克隆完全一致。
$.fn.extend()
用途：
- 扩展方法 —— 将自己定义的一些方法，加入到jQuery的**实例方法（通过$().xxx来调用）**里面
- 浅层克隆
- 深层克隆
扩展方法的用法：
1、定义方法
// 完全jQuery写法
$.fn.extend({
"drag": function(){
var disX,
disY,
// 此处将触发事件的this保存下来，后续会将事件——
// ——绑定在document上，那时的this指的的document
self = this;
$(this).on("mousedown", function(e){
// 获取当前被拖拽元素距离文档左上角的距离
// 此处用clientX也完全相同
disX = e.pageX - $(this).offset().left;
disY = e.pageY - $(this).offset().top;
// 此处将事件绑定给document以免鼠标出框就无法拖拽
$(document).on("mousemove", function(e){
$(self).css({left: e.pageX - disX, top: e.pageY - disY});
});
$(document).on("mouseup", function(e){
$(document).off("mousemove").off("mouseup");
});
});
// 添加链式调用
return this;
}
});
2、调用方法
// 调用
$(".demo").drag();
浅层克隆使用同$.extend()
深层克隆使用同$.extend()
$.ajax({para})
作用：jQuery的ajax
{para}中的参数
- url —— 请求地址（string）
- type —— 请求方法（string）
- data —— 自定义的，前后端接口（优先object其次string）
- success —— 成功请求后的回调函数，jQuery封装过的 会将数据直接传入到这个回调函数中，需要使用形参去接收（function(res){}）
- error —— 请求失败时的回调函数，jQuery封装过的 会将返回的响应传入这个回调函数。具有两个主要属性（此处假设响应用形参e去接收），e.status、e.statusText 分别代表状态码及其文本描述（function(e){}）
- complete —— 发送请求后，在返回请求并进行了success或者error后触发（不论请求成功或失败）。最后触发，类似于try ~ catch ~ finally中的finally。（function(){}）
- context —— 修改 $ .ajax()中的this指向（$.ajax()中的this指向ajax对象），使用jQuery选择器进行选择（context: $(selector)）
- timeout —— 设置请求的最长时间
- async —— 是否异步（true异步），类似原生JS的ajax中的true、false
- dataType —— 跨域请求，jsonp
如：
$.ajax({
url: "./ajax/getNews.php",
type: "GET",
success: function(res){
console.log(res);
}
});
$.Callbacks(para)
作用：返回一个回调对象，在该回调对象中传入需要被执行的函数
使用方法：
1、实例化$.Callbacks()对象
var $cb = $.Callbacks(para);
2、调用.add()方法向其中添加回调函数
$cb.add(somefunction);
3、在某种情况下调用.fire()去执行回调函数
$cb.fire();
回调对象具有的主要方法：
- .add() —— 向该回调对象中添加回调函数，传参传入定义好的函数
- .fire() —— 执行回调对象中的回调函数，传参传入实参
$.Callbacks(para)的para：
- “once” —— 使回调对象只能被执行一次，回调对象第一次执行完便失效
- “memory” —— 类似函数的预编译，使用该参数，则jQuery会先找到所有的.add()将所有的.add()都执行完后再执行.fire()。即无论.add()位于.fire()的上方或下方均会先执行.add()
- “unique” —— 会对回调对象中的函数进行去重，重复的函数只执行一遍
- “stopOnFalse” —— 使回调对象在调用.add()进来的函数的时候，遇到有return false的就会停止后面函数的执行
如：
// 初始化一个回调对象
var cb = $.Callbacks();
function a(){
console.log("a");
}
function b(){
console.log("b");
}
// 像jQuery的回调对象中传入需要执行的回调函数
cb.add(a,b)
$.Deferred(para)
作用：当达到某种状态的时候，调用$.Callbacks()对象的 .fire()方法来触发，用于解决回调地狱的问题
注：$.ajax()返回的就是 $.Deferred()对象，是 $.Deferred().promise()对象，只有绑定成功、失败、操作中的回调函数的功能，但是不能执行回调函数。
使用方法：
1、实例化$.Deferred()对象
var $df = $.Deferred();
2、添加$df对象的状态触发函数（相比 $.Callbacks()的优势在于一个 $df对象可以绑定三个状态的函数，并分情况触发他们。如果用 $cb的话要绑定三个 $cb对象，才可以分别触发），可以给某种状态绑定多个，绑定多个在执行的时候就会执行多个。
$df.done(somefunction);
$df.fail(somefunction);
$df.progress(somefunction);
3、当达到某种状态的时候，调用相关函数
$df.done(); —— $df.resolve()
$df.fail(); —— $df.reject()
$df.progress(); —— $df.notify()
$.Deferred()对象具有的状态及与其相对的调用方法：
- done —— 成功（$df.done()） —— $df.resolve()
- fail —— 失败（$df.fail()） —— $df.reject()
- progress —— 正在处理中 （$df.progress()） —— $df.notify()
关于$df对象的"正在处理中"状态的理解：正在处理中表示未达到成功或者失败，会持续进行直到达到成功或者失败位置。
如：用setInterval()去触发成功、失败、处理中 三种状态时。若状态为处理中那么会继续setInterval()，但是当状态达到成功或者失败的时候，setInterval也会被停止掉。
代码：
<script>
// 1、实例化df对象
var $df = $.Deferred();
// 2、绑定三种状态的函数
$df.done(function(){
console.log("win");
});
$df.fail(function(){
console.log("lose");
});
$df.progress(function(){
console.log("doing");
});
// 3、当达到某种状态的时候触发他们
setInterval(function(){
var score = Math.random() * 100;
if(score > 99){
// 当分数大于99的时候触发$df上绑定的成功事件
$df.resolve();
}else if(score < 1){
// 当分数小于1的时候触发$df上绑定的失败事件
$df.reject();
}else{
// 当分数在他们之外的时候触发正在处理事件
$df.notify();
}
},1000)
</script>
$df.then()
作用：1、简化done、fail、progress的写法；
$df.then(doneFunction(){}, failFunction(){}, progressFunction(){});
2、多个.then()调用可以实现参数的接力（对应位置，done对done、fail对fail），如
$df.then(function(){ return "ok" }).then(function(para){ return para + "no" }).then(function(para1){console.log(para1)})
结果：
（最重要的方法，解决回调地狱）3、对$.ajax()进行.then()，并且如果有多次ajax请求的话 就在then(function(){ return $.ajax() })中将下一次请求的ajax对象返回出来并继续.then()
如：写法优化1 不在ajax中使用success属性
// 多次回调的形式
$.ajax({
url: "",
type: "",
success: function(res){
// 第一次请求成功，如身份验证通过
$.ajax({
url: "",
type: "",
something: "",
success: function(res1){
// 第二次请求成功，对返回的数据进行一些操作
}
})
}
});
优化后的写法，要修改第几次请求就直接找到那个then()修改就行:
// 优化写法
$.ajax({
url: "",
type: "",
}).then(function(res){
// 此处同样res也会自动传入
// 第一次请求成功，如身份验证通过
return $.ajax({
url: "",
type: "",
something: ""
});
}).then(function(res1){
// 此处的.then()是对返回出来的$.ajax()对象进行绑定，而非开头第一次请求的ajax
// 第二次请求成功，对返回的数据进行一些操作
});
$.when(para)
作用：用于当para中传入的$df对象（常用的是一个函数最终返回一个延迟对象的情况），函数中全部有调用 $df.resolve()的时候才会返回成功的状态，有一个失败就返回失败的状态
常用用法：在$.when().then()中传入多个延迟对象（常用的是一个函数最终返回一个延迟对象的情况），当延迟对象全部触发成功的时候.then()中绑定的成功事件会被触发、有一个失败那么则会触发失败函数。
para可传一到多个延迟对象
返回：deferred的promise对象
实例：
<script>
// 给df添加三种状态的绑定
function randomBind(df){
df.done(function(res){
console.log("success " + res);
});
df.fail(function(res){
console.log("fail " + res);
});
df.progress(function(res){
console.log("progress " + res);
});
}
// 分别定义三个函数，最终都返回$df
function randomScore1(){
var $df = $.Deferred();
score = Math.random() * 100;
randomBind($df);
if(score >= 50){
$df.resolve("no1");
}else if (score < 50){
$df.reject("no1");
}
return $df;
}
function randomScore2(){
var $df = $.Deferred();
score = Math.random() * 100;
randomBind($df);
if(score >= 50){
$df.resolve("no2");
}else if (score < 50){
$df.reject("no2");
}
return $df;
}
function randomScore3(){
var $df = $.Deferred();
score = Math.random() * 100;
randomBind($df);
if(score >= 50){
$df.resolve("no3");
}else if (score < 50){
$df.reject("no3");
}
return $df;
}
$.when(randomScore1(), randomScore2(), randomScore2()).then(function(){
console.log("成功");
}, function(){
console.log("失败");
})
</script>
扫一扫
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
