jQuery走起

获取表单信息 serialize()字符串，name和属性值
serializeArray()数组

全局核心函数

$(jQuery)

小知识

jQuery.fn=jQuery.prototype

创建元素

$(’<div></div>’);创建jq对象。

选择元素

$();此函数可以传递多种参数，返回值是对象（jq对象）

参数规则

        css selector、 jquery unique selector null、undefined、dom$(function(){})==$(document).ready(function())//解析完成后执行css selector和context

css规则

• $(‘div span’); 可以直接用css属性获取到
• $(‘div span’).css({width:100,height:100}); 可以直接传css属性

jqurey特有规则

• $(‘span:first’);//代表所选span中的第一个span
• $(‘span:odd’);//奇数个的span
• $(‘span:even’);//偶数个的span
• $(‘span:eq(3)’);//索引为3的span
• $(‘span[title]’);//含有title属性的span元素
• $(‘span[data=“duyi”]’);//元素为span并且属性data=duyi的span元素
• $(‘span[data!=“Duyi”]’);//属性不为data=duyi的span元素
• $('span[data$=“Duyi”]’);//结尾属性为data=duyi的span元素
• $(‘span[data^=“Duyi”]’);//开头属性为data=duyi的span元素
• $(‘span[data*=“Duyi”]’);//属性data包含duyi的span元素
• $(“span:contains(is)”);//内容包含"is"字符串的span元素
• $(‘span:parent’);//子元素包含span标签的元素
• $(‘span:visible’);//所有可见的span元素
• $(‘span:hidden’);//所有隐藏的span元素

还可以传的参数

• null undefined ‘’ 有容错机制
• $(dom)：把元素dom包装成jqurey对象（不然不能用人家方法啊）
• $(function(){})
• $(‘li’,‘ul’)：上下文，前面是确定的元素，后面是上下文

jqurey实例方法-DOM操作

选择元素相关方法

• .get();把jqurey对象变为原生dom（注：get()里面可以加索引）
• .eq();返回jqurey的索引对象。（注：eq()里面可以加索引，默认0，灵活应用：$(‘p’).css().eq(0).css()，先给全部css，然后还能再给索引位css）
• .find();在原有基础上查找任意子元素（注：非常常用。如：$(‘div’).find(‘p’).find(‘span’)）
• .children();直接子元素集
• .filter();过滤，只能在前面元素中查找。（注：是在前面jq对象中筛选，不能找子元素）
  • 可以放function,返回true此元素通过，反之此元素不获取。
• .not();反选，不是。。。
• .has();过滤，判断它的下面是否有某元素。（注：$(‘p’).has(‘span’)：找到下面有span的p元素，是一个类数组，若找不到，返回一个length为0的类数组）
• .is();判断是否有交集。（注：可以判断 if($(e.target).is('li'))，或者$(’.demo’).is(‘li’)）
• .add();绑定多个jq对象。（注：如$(‘p’).add(‘a’).css()，绑定多个元素进行操作）
• .end();回退。回到元素最开始位置。

取赋值相关方法

• .html();相当于.innerHTML() （注：取值取第一个元素，赋值赋全部元素，可以放function(index,ele)处理）
• .text();相当于.innerText()(注：取赋值都会给全部元素，不可以建标签，可以放function(index,ele)处理)
• .size();相当于.length,既然用jq，就尽量一致吧。
• .addClass();给元素加class。（注：可以加function）
• .removeClass();给元素删除class。（注：若为空，就全部删除，若为多个，贪婪匹配。可传function(index,ele){return xx}进行灵活应用）
• .hasClass();判断前面的对象有没有()里面的属性。
• .css();可以读写css属性。（注：可以写单个属性，也可以传多个属性。可以操作数值,如 +=100px）
• .attr();基于setAttbute和getAttbute，读写元素自定义属性。（注：像class、chacked、selected、disablad这种属性推荐用prop）
  • 可以操作任何属性，设置属性值会映射到dom行间样式
• .prop();用于读写元素的特性属性。(注：()里面填属性值，第二个参数可修改属性，如.prop(‘checked’,true);）
  • 只可以操作特性，设置特性值会映射到dom行间样式
• .data()
  • 可以往jQuery对象中存取信息，会与dom信息形成映射（即给某个元素设置data属性后，就可以通过这个元素获取到这个属性）
  • 可以获取到dom元素行间样式上以data-开头的数据
  • 设置的数据会与dom信息形成映射，但是不会映射到dom的行间样式上（即信息会形成映射，但不会操作dom）
  • 如果设置特性，如class，只会形成一个为data属性的class，并不会改变dom元素的class
  • clone()也会克隆到data的属性值
• .val();读取表单元素的value值。（注：input使用，可用function(index,oldValue){}）

data()、prop()、attr() 三者区别

• prop()是读取元素的特性（原来的 dom.特性 不可使用），映射到行间样式
• attr()读取元素属性（包括特性），映射到行间样式
• data()读取自定义属性
  • 读取元素上以data-开头的属性
  • 读取自定义的data属性
  • 不会映射到行间，但与dom信息形成映射

基于jQuery对象增删改查相关方法

• $(selector).load(URL,data,callback);
  • load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
  • 如果是本地url，路径是index.html为起始的路径
• .next();//下一个兄弟元素（注：可以加限定条件。如：.next(‘p’)。若不符合则无效果。若使用.next()的元素是一个，则next选中一个，若使用元素多个，则选中多个）
• .prev();//上一个兄弟元素（注：同上）
• .nextAll();//下一群兄弟节点（注：可通过传参过滤。如：input[type=“checkbox”]）
• .prevAll();//上一群兄弟节点（注：同上）
• .nextUntil();//下一群兄弟节点，到什么为止。（注：从当前元素开始，第一个参数是到哪个元素为止，第二个参数，只找范围内的哪种元素。如：.nextUntil(‘p’,‘a’);找到当前元素到p元素中间的所有a元素。）
• .prevUntil();//上一群兄弟节点。（注：同上）
• .siblings();所有兄弟节点。(注：可以传参数过滤,弱不符合无效果)
• .parent();//上一级父级元素。(注：可以传参数过滤,弱不符合无效果)
• .parents();//多层父级元素。（注：默认获取所有父级，可传参进行精准过滤）
• .closest();//找到距离元素最近的符合条件的父级元素。（注：必须传参，从自己开始往上找）
• .offsetParent();//找到距离元素最近的有定位的父级元素。
• .slice();//截取。（注：左闭右开）
• .insertBefore();插入插入到xx前面。$(‘a’).insertBefore(‘b’)。(注：把a插入到b元素前面，继续操作a)
• .before();插入到xx前面。$('a').before($(‘b’))。（注：把b插入到a元素之前,继续操作a）
• .insertAfter();插入到xx后面（注：把a插入到b后）
• .after();插入到xx后面（注：把b插入到a后）
• .append();在尾部添加元素，相当于appendChild。$('.div').append($(’.p’));(注：父元素在前)
• .appendTo();元素添加到xx尾部，相当于appendChild。$('.p').append($(’.div’));(注：子元素在前)
• .prepend();在头部添加元素（注：同上）
• .prependTo();元素添加到xx头部（注：同上）
• .remove();删除自己这个元素。（注：$('p').remove().appendTo($(‘body’)),这样就相当于删除然后加入，页面无变化，但是绑定的事件会消失）
• .datach();删除自己这个元素。（注：删除然后加入，页面无变化，绑定的事件不会消失）
• .empty();清空所有子元素，没有参数。
• $('`<div></div>`');创建jq对象。（注：写法如$(’<div/>’),可以写的更复杂）
• .wrap();//加一个包装层，$(‘p’).wrap(’<div></div>’)（注：可以原生，也可以jq对象，如果是已有元素，则会复制。也可以用function(index){return xx}）
• .wrapInner();//给内部元素加一个父级(也就是中间层),（注：使用方法同上）
• .wrapAll();//给所有匹配到的jq对象加一个统一的父级。（注：给第一个匹配到的元素加父级，然后后面再匹配到的都push到这个父级里面，如果匹配元素不在一个层级，会出现改变结构的情况）
• .unwrap();//干掉一层父级。（注：到body干不动了）
• .clone();//克隆，$(’.demo’).clone().appendTo(‘body’);（注：可以传参数true,若传参数，可克隆事件，反之只克隆元素。）

事件操作

事件绑定

• .on();//可传参数1.type 2.selector 3.data 4.handle。（注：多次绑定多次执行）
  • 绑定多个事件

    $('div').on({click:function(){},mouseenter:function(){}})
    

  • 第二个参数是事件委托对象
  • 第三个参数是可传入的数据，是对象形式，可在e.data中找到

    $('div').on('click',{name:"du"},function(e){console.log(e.data);//{name:"du"}
    })
    

• .one();//只执行一次的绑定事件，使用一次后失效。最后加return false;
• .off();//解除绑定事件。（注：默认解除全部事件，传参解除某项事件，第二个参数可传事件方法，指定某种事件类型的某个方法。）
• .trigger();//触发自定义事件方法。（注：第二个参数可传函数参数，为数组形式）
• .hover();//移入移出事件。$(‘div’).hover(function(){移入事件},function(){移出事件});
• .click/keydown/mouseenter/mousewheel(滚轮事件)…

事件委托

$('ul').on('click','li',function(e){alert($(e.target).text());

兼容事件对象

• e.pageX、e.clienX、e.which、e.button
• e.parventDefault()
• e.stopPropagation();

小知识：阻止默认事件：

直接return false;或者e.preventDefault();

小知识：jQuery对象都有一个属性，prevObject

进行这一步操作的前一个jQuery对象。（注：最高指向document）

动画

• .show();显示隐藏的元素。改变宽高和透明度（注：可以加毫秒数，决定显示的速度，第二个参数可以填运动速度，如’swing’）
• .hide();隐藏元素。改变宽高和透明度（注：可以加毫秒数，决定显示的速度，第二个参数可以填运动速度，如’swing’）
• .toggle();隐藏时显示，显示时隐藏。改变宽高和透明度（注：同上）
• .fadeIn/fadeOut/fadeToggle 作用同上（注：只改变透明度，透明度为0时隐藏。其他属性同上）
• .fadeTo(1000,0.6,‘swing’,function(){});（注：只有to可以有这第二个参数，到什么时候指向）
• .slideDown()、slideUp()、slideToggle();上下卷入卷出，用法同上。
  重点来了
• .animate(target,duration,easing,callback);动画({width:100},100,‘swing(速率)’,function(){})(注：有内置队列，可以叠加.animate(),不是必须用回调）
• .is(’:animated’);判断是否在执行动画
• .stop();让元素运动停止。(注：默认阻止当前运动，若有多个运动，则执行下一个运动。传true，所有运动停止。传true,true，停止运动，并直接跳到当前运动的目标点)
• .finish();直接跳到最终目标点
• delay(1000);延迟xx毫秒
• jQuery.fx.off=true;所有运动的开关（小知识）
  

队列方法，先进先出

• .queue(‘chain’,function(){});入队方法。（注：function可以传next参数并在函数最后调用next() ，这样就会执行完当前函数时再去执行下一个队列里的函数。
• .dequeue(‘chain’);出队方法,执行并出队;
• .clearQueue();清空队列方法。

var FUNC=[function() {$("#block1").animate({left:"+=100"},aniCB);},function() {$("#block2").animate({left:"+=100"},aniCB);},function() {$("#block1").animate({left:"+=100"},aniCB);},function() {$("#block2").animate({left:"+=100"},aniCB);},function() {$("#block1").animate({left:"+=100"},aniCB);},function(){alert("动画结束")}
];
var aniCB=function() {$(document).dequeue("myAnimation");
}
$(document).queue("myAnimation",FUNC);
aniCB();
1，我首先建议建立了一个函数数组，里边是一些列需要依次执行的动画
2，然后我定义了一个回调函数，用dequeue方法用来执行队列中的下一个函数
3，接着把这个函数数组放到document上的myAnimation的队列中（可以选择任何元素，我只是为了方便而把这个队列放在document上）
4，最后我开始执行队列中的第一个函数
5，小知识点：$(document).clearQueue();清空栈也可以通过将函数数组换成[]来实现。

位置图形

• .offset();到文档边框的距离。{left:10,top:10}（注：可以取赋值，都是对象赋值{…};
• .position();到有定位父级边框的距离。（注：不可赋值）
• .scrollTop() .scrollLeft() 滚动条距离。（注：可以取赋值）
• .width() .height();获取元素content区域宽高（注：数值）
• .innerWidth() .innerHeight(); content + padding
• .outerWidth() .outerHeight(); content + padding + border + margin (全部宽高)
• .each(function(index,ele));把选中的一堆元素放到函数里面去执行。 (注：ele为原生元素，效率非常高)

$('li').each(function(index,ele){$(ele).text(index).add('demo');
}

• .index();获取在兄弟元素间的索引值。（注：加参数可进行过滤，加元素直接返回所在索引）

jQuery工具方法

• $.type(); 返回元素类型。（注：可以判断null,数组，date等类型）
• $.isArray()/isFunction/isWindow;判断是否是数组/function/window
• $.trim();去掉前后的空格。
• $.proxy();改变this指向，类似bind。
  • var newFn=$.proxy(fn,obj);不改变原来函数的this指向，复制一个新的函数，this指向改变成obj.
  • 简单来说就是用别人的方法，改成自己的this，供自己来使用。
• $.noConflict();防止冲突，防止变量命名冲突($)。var $c=$.onConflict();从此$c就变成了$，可以当作$使用。
• $.each(arr,function(index,ele){}); 和forEach作用相同。
• $.map(arr,function(index,ele){return ele*index});不改变原数组，返回新的数组。
• $.parseJSON();和原生JSON.parse()相同。
• $.makeArray(obj);可以类数组转数组。(注：第一个参数传数据，第二个参数为类数组，则将前面数据添加到类数组，若第二个参数为数组，则将前面数据添加到数组)

插件扩展（工具方法）

• $.extend({xx:function(){},xx:function(){});
  • 用法1：往jQuery工具方法里面加功能函数。调用$.xxx();
  • 用法2：$.extend(obj1,obj2,…);把从第二个参数往后的属性全部放电管obj1里面，注意是浅层克隆，引用值都是一个。
  • 用法3：$.extend(true,obj1,obj2);用法同上，深度克隆，引用值都克隆过来。
• $.fn.extend();用法同上，往jQuery实例方法里面加功能函数。调用$(’.demo’).drag();
  

两者区别

$.extend相当于给jQuery对象加属性和方法。所以调用方法为：jQuery.func()
$.fn.extend：相当于在jQuery原型链上加方法。
$.fn==jquery.prototype，所以调用方法为$(‘demo’).func()

插件扩展实战经验

• 封装插件
  
  1.封装插件一般用立即执行函数，节省资源。
  
  2.在立即执行函数里面给$.fn加函数，形成闭包。外界依然可以调用。

(function($){$.fn.extend({"tool":function(){}})
}(jQuery))

• $(function(){})的意义。 1.$(function(){})==$(document).ready(function(){})
  
  2.意思是在document页面解析完成后执行，比load快。

jQuery工具方法-高级方法

$.ajax();

属性：

• url:‘https://…’
• type:请求方式
• data:{}参数信息
• dataType:‘json’ 想要得到的数据格式（默认字符串）
  • ‘jsonp’ 跨域，如果是jsonp格式，则用不到下面的回调，会用在外部设置的回调
• contentType:’’ 数据在传递的过程当中数据的编码格式
  • ‘application/x-www-form-urlencoded’（默认，key=value&key1=value1）
  • ‘application/json’ （格式为json格式字符串）
• async:true/false 是否异步
• beforeSend:function(xhr,data){} 数据发出之前的拦截器，return true/ false;校验所传数据（传递对象，传递数据）
• success:function(){}请求成功后的处理函数。
• error:function(e){} 请求失败后的处理函数
  • e.status 状态码
  • e.statusText 错误提示 （注：后面不太常用）
• complete:function(){} 请求完成的处理函数 最后执行。
• context:$(’.wrapper’) 改变函数上下文
• timeout:800 超过800毫秒就不请求了。

注意：
不起服务直接用ajax请求本地文件也会出现跨域问题

因为直接打开域名为空，浏览器认为两个空域名是不想等的，也就不是同源地址

同源请求

ajax使用：

$.ajax({url:'https://......',type:'GET',dataType:'json',success: function(res){$.each(res.data,function(index,ele){console.log(ele);}},error:function(e){console.log(e.status,e.statusText);}
});
返回数据
Object
code:0
data:[{...},{...}]
msg:'OK'
__proto__:Object

跨域请求 jsonp

jsonp全称 ：json and padding 数据和包裹层
跨域请求原理：

在做ajax请求的时候，浏览器会有个安全机制，叫同源策略。

同源策略：只有同源地址，数据才可以进行交互，如果不是同源地址就，就会出现跨域的问题。

jq中出现了一种叫 jsonp 的跨域解决方案。

jsonp这种方式不是通过ajax去请求数据，而是通过动态的去一个script标签去请求数据。

script标签的请求不会受到同源策略的限制

所以jsonp就是把数据放在script标签里面，但是直接放在script标签中是获取不到数据的

所以后台需要将数据包裹在一个对象中，然后前端需要创建一个函数来接收这个对象

```
var oScript = document.createElement('script');
oScript.src="./text.txt?callback=aa"
```

这个函数名作为一个请求参数传递给后台，后台拿到这个函数名后进行一个拼接，把数据对象拼接都函数里面：函数名({……})

这个时候script标签中就有了数据

将script标签插入到页面中，就可以拿到数据了。

一定要有所传递的函数，来接收数据，并且此函数放在全局。

jq跨域请求使用：

function getData(val) {$.ajax({type: 'get',url: 'https://suggest.taobao.com/sug',// https://suggest.taobao.com/sug?code=utf-8&q=x&callback=jsonp533&k=1&area=c2c&bucketid=18data: { //jq中？后面的请求数据可以放在data中callback: 'aa' //属性名是由后台决定的，值是前端的回调函数},dataType: 'jsonp'//另一种callback的写法，两种都可以jsonp:'callback',jsonpCallback:'aa'})
}
//处理返回的数据
function searchDataList(data) {console.log(data)
}

$.Callbacks()回调管理者，异步编程离不开回调机制。

作用：Callbacks的作用就是把回调函数放在一起，当满足某种条件时，去调用fire(),就会执行里面的回调函数。

• 传参数’once’,回调只执行一次，执行完了就没有了。
• 传参数’memory’,具有记忆功能，如果没有这个参数，fire时只执行fire前面add的回函数，加上这个属性后，在fire后面加的回调函数也会跟着一起执行。
• 传参数’unique’,去重
• 传参数’stopOnFalse’,遇到return false;就不往下执行了。

      // callbacksvar cb = $.Callbacks();function a(x, y) {console.log('a', x, y);}function b(x, y) {console.log('b', x, y);}cb.add(a, b);cb.fire('10', '20');// a 10 20  b 10 20

回调机制很好用——>
js单线程->异步编程优化体验 防止阻塞页面->回调函数
运动函数  animate 当你满足某个状态 接下来要去做另外一件事。

小知识：使用多重$.ajax()嵌套会导致回调地狱，危害多多。使用$.Deferred()解决。

$.Deferred();有状态的回调。也叫延迟对象。

作用：回调成功了或者失败了或者未完成，都可以进行回调。

延迟对象
var df = $.Deferred(); 返回一个延迟对象
三种状态的回调函数，比如注册成功了，就会执行done的回调函数。df.done() 成功 df.fail()失败 df.progress() 正在进行
三种触发函数    df.resolve()   df.reject()   df.notify()
注意：当成功或者失败的时候都会立即回调，正在执行时会回调然后继续执行异步的函数。
df.promise();阉割版的延迟对象，只有状态没有触发，也就是说触发的函数只能在内部触发。// 做一件异步的事情function createScore() {var df = $.Deferred();//创建一个延迟对象setInterval(function() {var score = Math.random() * 100;if (score > 60) {df.resolve('成功');} else if (score < 40) {df.reject('失败');} else {df.notify('执行中');}}, 2000);return df.promise();// 返回阉割版延迟对象}var df = createScore();//延迟对象的回调函数// 注册成功的回调函数df.done(function(msg) {console.log(' yes' + msg)})// 注册失败的回调函数df.fail(function(msg) {console.log('no' + msg)})// 注册正在进行的回调函数df.progress(function(msg) {console.log('emm..' + msg)})

$.Deferred()的核心方法.then();（注：then翻译过来就是然后）

.then()默认的三个参数就是done,fail,progress，
可就是说df.then(function(){},function(){},function(){})依次是上面三个。
作用：

1.可以简化 回调函数的注册。

2.也可以做普通函数的传递。

3.可以把ajax的每一步行动都拆分出来，一件事一件事的处理。

小点：如果回调函数中还有回调函数，需要新创建一个延迟对象并返回这个对象的阉割版，才能在后面继续.then。

 // 简化注册回调的写法df.then(function() {console.log('done1');}, function() {console.log('fail1');}, function() {console.log('progress1');})
-------------------------------------------------        
// 做一件异步的事情function createScore() {var df = $.Deferred();setInterval(function() {var score = Math.random() * 100;if (score > 60) {df.resolve('恭喜你成功了');} else if (score < 40) {df.reject('很遗憾失败了\n');} else {df.notify('淡定不要慌\n');}}, 2000);// done 成功 fail失败 progress 正在执行// promise()是一个阉割版的对象，只有注册，没有触发。return df.promise();}var df = createScore();//创建一个异步对象//then简化注册回调函数，可以传df.then(function(ms) { //请求成功执行这个console.log('胜利' + ms);return 'ok';}, function(ms) {console.log('失败\n' + ms);return 'no\n'}, function(ms) {console.log('没完事\n' + ms);return 'go on'}).then(function(param) { //done,fail,progressconsole.log('我胜利了' + param);}, function(param) {console.log('我失败了' + param);}, function(param) {console.log('我还不知道成绩' + param);})

$.when()

（翻译：当）$.when(df1,df2,df3).then(function(){},function(){});

1.可以传一到多个延迟对象。

2.返回值是promise对象。

3.然后就可以.then(){function(){}…};

怎么用：

当when里面的延迟对象全部成功时触发done(第一个)回调函数,有一个失败就会触发fail（第二个）

什么时候使用呢，比如请求多个Ajax请求，统一处理数据时可以用到。