jquery远程班备忘

基础第一课:

　　1、

          $(obj)获取的是一个集合，因此length最小是1，

          jquery,如果元素不存在，也不会报错，可通过$(obj).length<1就可以查看该元素是否存在。

　　2、

　　　　attr和prop的区别

　　　　attr就是原生JS中的setAttribute、getAttribute方式，通过使用attr，因为可以获取到自定义属性和src、href中的具体值。

　　3、获取元素

　　　　<div class="color1 color2"></div>

　　　　$('div[class="color1 color2"]'),属性值中有空格，需要用到引号

 基础第二课:

　　1、slice(起始位置，结束位置(不包括))   =>类似字符串截取

　　　　$('li').slice(1,4).css('background','red'); 选中li的第1位到第3位(不包括第4位)

　　　　$('li').slice(1).css('background','red');选中li的第1位到最后

　　2、children()与find()的区别

　　　　children() 只能找孩子，孙子找不到

　　　　find()都可以找到，因此更加灵活，推荐使用这个

　　　　$('li').find('p').css('color','red')   =>推荐这个,先走li,再找p,性能更好，因为用原生的查找

　　　　$('li p').css('color','red)　　=>像CSS样的，从右到左，先找到p标签，然后往上找（有可能用到字符串拆解，正则等），影响性能

　　3、parents()与closest()

　　　　推荐closest()，找最近的一个祖先节点(包括找到自己本身),必须要接收一个参数

　　4、

　　　　append()    最后面(里面)         =>    appendTo()

　　　　prepend()   最前面(里面)　　   =>　 prependTo()

　　　　before()　　前面(同级)　　      =>　 insertBefore()

　　　　after()　  　后面(同级)　　      =>     insertAfter()

　　　　　　后面加到前面                                前面到加后面          =>区别：后续的操作不一样，见如下的例子

 

　　　　$('ul').append('li').css('color','red');　　把li追加到ul上，并把ul文字变红

　　　　$('li').appendTo('ul').css('color','red');    把li追加到ul上，并把新添加的li文字变红

 

　　　　小技巧：

/*方法一*/
$('ul').append('<li class="test">abc</li>');
//新创建的li添加点击事件
$('.test').click(function(){
    console.log(1);
})

/*有后续的操作，推荐方法二，先用变量保存起来，然后对这个变量添加和点击*/
var $li = $('<li class="test">abc</li>');
$('ul').append($li);
$li.click(function(){
    alert(123);
});

　　5、index()

　　　　兄弟间的排列

　　　　筛选后的排列

<div><span></span></div>
<div><span class="test"></span></div>
<div><span></span></div>


$('.test').index()            //0
$('.test').index('span')   //1,找到.test元素，然后在span中的排行 

　　6、each()

　　$(obj).each(function(i,elem){})

　　i是索引

　　elem是元素,是原生的，因此$(elem)

　　退出each,return false

　　7、wrap()、wrapAll()、wrapInner()、unwrap()  

　　　　$(obj).wrap('<div>')  =>必须是标签,如：<div> ,wrapAll()/wrapInner()也是如此

　　　　unwrap(),不能删除body标签

　　8、get() / []

　　　　get()  jq转成js

　　

基础课第三课：

　　1、width()、innerWidth()、outerWidth()、outerWidth(true)

　　　　样式:

　　　　　　#div1{ width:100px; height:100px; background:red; padding:10px; border:1px #000 solid; margin:5px;}

　　　　设置：

　　　　　　　　$('#div1').width(200);   //width:200;

　　　　　　　　$('#div1').innerWidth(200);  //width:200-padding(10) = 180;

　　　　　　　　$('#div1').outerWidth(200); //width:200-padding(10)-border(1) = 178;

　　　　　　　　$('#div1').outerWidth(200,true); //width:200-padding(10)-border(1)-margin(5) = 168;

　　　　小技巧：

　　　　　　可视区的尺寸：$(window).height()  =>document.documentElement.clientHeight

　　　　　　页面的尺寸: $(document).height() =>document.body.scrollHeight

　　2、scrollTop()

　　　　$(document).scrollTop()  => var scroll = document.documentElement.scrollTop || document.body.scrollTop

　　　　在最底端时，关系如下：

　　　　　　$(document).scrollTop() == $(document).height() - $(window).height()  即：页面的高-可视区的高

　　3、offset()、position()、offsetParent()

　　　　$(obj).offset().left  //页面的左边距离，包括left+margin

　　　　$(obj).position.left //距离有定位祖先节点，不包括margin,不包括自身,只认left

　　　　小技巧：

　　　　　　<div id="div1">

　　　　　　　　<div id="div2"></div>
　　　　　　</div>

　　　　　　

　　　　#div1{ width:200px; height:200px; background:red; margin:200px; position:relative;}
　　　　#div2{ width:100px; height:100px; background:yellow; margin:50px;}

 

　　　　 需要找div2距离div1的距离，这里div2用的是margin,因此不能用$('#div2').position().left,这里为0;

　　　　可使用offsetParent()，找到有定位的祖先节点，这里是div1

　　　　$('#div2').offset().left - $('#div2').offsetParent().offset().left

 

　　　　判断元素是否进入可视区：

　　　　　　元素距离页面的距离　< 可视区的高+滚动的高 　＝>已经进入可视区

　　　　　　$(window).scrollTop(function(){});

　　　　　　$(obj).offset().top< $(window).height() + $(document).scrollTop()

           超出可视区：

　　　　　　(obj).offset().top<$(document).scrollTop()

 　　4、pageY()、clientY()

　　　　$(obj).pageY()  =>鼠标到页面的距离

　　　　$(obj).clientY() =>鼠标到可视区的距离,与原生一样

　　5 、which、ctrlKey、shiftKey、altKey、target、stopPropagation()、preventDefault()、return false

　　　　ev.which 键盘的键值，鼠标的键值(加在mousedown上，不能加在click上，左键1，中键2，右键3)，js中keycode

　　　　ev.ctrlKey   ev.shiftKey   ev.altKey   =>值为boolean

　　　　ev.target 为事件源，表示当前操作的obj

　　　　ev.stopPropagation()  ＝>　阻止冒泡,JS中　ev.cancelBubble = true

　　　　ev.preventDefault()  =>阻止浏览器的默认行为，例如：阻止右键菜单，用到的事件contextmenu

　　　　return false => ev.stopPropagation + ev.preventDefault()   即阻止冒泡又阻止浏览器的默认行为

　　6、on()、off()

　　　　小技巧：

　　　　　　$('#div1').click(function(){

　　　　　　　　　　$('#div2').click(function(){});

　　　　　　});　　

 

　　　　　　div2为出现多次，可以如下改进：

　　　　　　$('#div1').click(function(){

　　　　　　　　　　$('#div2').off().click(function(){});

　　　　　　});

　　7、delegate、undelegate()、ev.delegateTarget　　事件委托

 

　　　　$('ul').delegate('li','click',function(ev){

　　　　　　$(this)   => li

　　　　　　$(ev.delegateTarget) =>ul

　　　　　　$(ev.delegateTarget).undelegate()  =>取消委托，这里是对ul取消委托，因此是ev.delegateTarget

　　　　});

　　8、trigger()主动触发

　　　　$(obj).click(function(){

　　　　　　　　console.log('test1');

　　　　　　　　console.log('test2');

　　　　});

　　　　$(obj).keydown(function(ev){

　　　　　　if (ev.which ==13) {             //回车键

　　　　　　　　console.log('test1');

　　　　　　　　console.log('test2');

　　　　　　　　//上面的两行改成如下：

　　　　　　　　$(obj).trigger('click');　　 或者　　$(obj).click();

　　　　　　}

　　　　});

　　9、关于命名空间的理解

　　　　一、

　　　　$(obj).on('click',function(){

　　　　　　console.log(1);

　　　　});

　　　　$(obj).on('click',function(){

　　　　　　console.log(2);

　　　　});

　　　　$(obj).trigger('click');

　　　　//结果：1和2,若只想要2,则要加上命名空间，如下：

　　　　$(obj).on('click',function(){

　　　　　　console.log(1);

　　　　});

　　　　$(obj).on('click.abc',function(){

　　　　　　console.log(2);

　　　　});

　　　　$(obj).trigger('click.abc');  //注意这里必须写全，即click.abc

 

　　　　二、

　　　　$(document).on('mousemove',function(){

　　　　　　　　console.log('a');

　　　　});

　　　　$(document).on('mouseup',function(){

　　　　　　　　$(this).off();

　　　　});

 

　　　　事件绑定在document上,或只想取消当前拖拽，也可使用命名空间，即：

　　　　$(document).on('mousemove.drag',function(){

　　　　　　　　console.log('a');

　　　　});

　　　　$(document).on('mouseup.drag',function(){

　　　　　　　　$(this).off('mousemove.drag').off('mouseup.drag')

　　　　　　　　//或者

　　　　　　　　$(this).off('.drag')　　　　//这里可直接写命名空间的名称即可。

　　　　});

 

 　　10、工具方法

　　　　$().XXX　　=>JQ用

　　　　$.XXX　　  =>JQ和JS都可以用

　　　　$.type()　　类型，可以判断引用类型,比原生的typeof 强大.

　　　　$.isFunction()　　判断是否是函数，是函数为true，否则为false

　　　　$.isNumeric()　　判断是否是数字，是数字为true(包括字符串的数字),否则为false

　　　　$.isArray()　　    判断是否是数组

　　　　$.isWindow()　　判断是否是window

　　　　$.isEmptyObject()　　判断是否是空对象，即空的{}、[]、null ，都为true

　　　　$.isPlainObject()　　判断是否是对象自变量，即{}、new Object()为true,否则为false(null为false)

　　　　

　　11、 $.extend()　　可用来做对象的copy或者插件的扩展,默认是浅copy，如果要深拷贝，要加上true,即$.extend(true,b,a);

　　　　var a = {'name':'cc'};

　　　　var b = {};

　　　　$.extend(b,a);

　　　　b.name = 'aa';

　　　　console.log(a.name);　　//cc;

　　　　还可支持多个对象的copy,如：

　　　　var a = {'name':'cc'};

　　　　var b = {'age':20};

　　　　var c = {};

　　　　$.extend(c,a,b);

　　　　console.log(c)　　//{name: "cc", age: 20} 

　　12、proxy，改this指向

　　　　$.proxy(函数,改的this指向)(参数1、参数2); 后面的括号为函数调用

　　　　$.proxy(函数,改的this指向,参数1、参数2)();     =>这个用在点击某一事件上使用，即$.proxy(改的this指向，函数，参数1、参数2)，只改this指向，不调用

　　　　$.proxy(函数,改的this指向,参数1)(参数2);

　　　　推荐还是使用变量把this保存起来

　　13、scroll、resize

　　　　$(window).on('scroll resize',function(){

　　　　});

 

 基础课第四课：

　　1、show(),hide(),toggle()

　　2、fadeIn(),fadeOut(),fadeToggle()

　　3、slideDown(),slideUp(),slideToggle()

　　4、animate()

　　　　第一个参数:JSON对象，设置样式属性和值，例如{width:200}

　　　　第二个参数：时间，默认：400

　　　　第三个参数：运动形式，只有两种：swing（默认，缓冲，慢快慢）和linear（匀速）

　　　　第四个参数：运动结束的回调

　　　　例如：

　　　　　　$(obj).animate({

　　　　　　　　width: '+=300',    //例如：加到click上，表示点击一次宽度会增加三百

　　　　　　　　heigth:300

　　　　　　},1000,linear,function(){

　　　　　　　　console.log('test')

　　　　　　});

　　　　

　　另一种写法：

　　　　$(obj).animate({

　　　　　　width:300,

　　　　　　height:300

　　　　},{

　　　　　　duration : 1000,  //时间

　　　　　　easing : 'linear', //运动形式

　　　　　　complete : function(){  //运动结束的回调

　　　　　　　　console.log('test')

　　　　　　},

　　　　　　step : function(a,b) {   //可以检测定时器的每一种变化

　　　　　　　　　console.log(a);　　// 初始是100，最终是300，从100-300的变化

　　　　　　　　　console.log(b);　　//Tween的JSON对象，比a更加具体，Tween运动的一种算法（妙味的时间版运动会讲Tween）

　　　　　　　　　console.log(b.pos);  //表示运动过程的比例值，起始为0，结束为1，可以利用该值来实现：在2秒之内，从0到某一个数（2432546）的运动效果，见下面的例子；

　　　　　　}

　　　　})

 

　　例子：在2秒之内，从0到某一个数（2432546）的运动效果。

　　<input type="button" val="点击" id="input1">

　　<div id="div1">0</div>

　　<script>

　　　　$('#input1').click(function(){

　　　　　　　　$('#div1').animate({

　　　　　　　　　　　num : 'move'  //随便写点什么，但一定要写

　　　　　　　　},{

　　　　　　　　　　duration : 2000,

　　　　　　　　　　easing : 'linear',

　　　　　　　　　　complete:function(){},

　　　　　　　　　　step:function(a,b){

　　　　　　　　　　　　$('#div1').html(parseInt(b.pos * 2432546)); // b.pos最终会是1

　　　　　　　　　　}

　　　　　　　　})

　　　　});

　　</script>

 

　　animate是队列，其他元素不会存入队列

　　　　$('#div1').animate({width : 300},1000);

　　　　alert(123);

　　　　会先弹出123，再执行运动

　　　　$('#div1').animate({width : 300},1000);

　　　　$('#div1').animate({height: 300},1000);

　　　　会先执行宽度，宽度完成后再执行高度，因此可以用链式写法，即：

　　　　$('#div1').animate({width : 300},1000).animate({height: 300},1000);

　　　　希望先运动到宽度的300，中间停顿2秒，再运动到高度的300，可以使用delay()

　　　　$('#div1').animate({width : 300},1000).delay(2000).animate({height: 300},1000);

 

　　

　　stop();　　//停止当前的操作，执行下一个运动

　　stop(true); //立即停止全部运动

　　stop(true,true); //停止到当前运动所在的目标点

　　finish(); //停止到全部运动所在的目标点

 

　　stop() 也有清除队列的行为，例如：

　　快速的移入移出，运动一直在继续，如果想移开的时候就停止，可以使用stop()来清除队列

　　$('#div1').mouseover(function(){

　　　　$(this).stop().animate({width:200,height:200});

　　}).mouseout(function(){

　　　　$(this).stop().animate({width:100,height:100});

　　});

　　

　　工具方法 ：

　　　　$.parseJSON()

　　　　$.parseHTML() 转化HTML的形式的字符串,转成DOM节点，放到一个数组中

　　　　$.parseXML() 把XML形式的字符串，转成真正的XML节点,转换后的结果是一个XML的document元素

　　　　$.isXMLDoc() 判断是不是XML的document元素，是的话就是true

 

　　$.ajax:

　　　　ansyc:false  为同步，使用场景：初始化的时候，后面需要用到初始化里面的数据

　　　　var arr = $.ajax({

　　　　　　　　url:XXX,

　　　　　　　　async:false

　　　　}).responseText;

　　　　

　　$.get,$.post:

　　　　第一个参数：url

　　　　第二个参数：数据,如：{'name':'joya','age','20'}

　　　　第三个参数：成功回调 function(data){console.log(data)}

　　　　第四个参数：datatype，如：'json','xml'等

　　　　若要查看出错的回调，可以用链式写法，即.error:function(err){console.log(err)};

　　　　$.get(url,json,fn,'json').error(fn)

　　　　　　

 中级班第一课：

　　　　清空内容：

　　　　　　html(''),empty()

　　　　删除节点：

　　　　　　remove()

　　　　　　detach()  //保留元素之前的操作行为

　　　　获取文字：

　　　　　　text()  获取集合中所有的文本，其它的获取只会获取第一个。

　　　　替换节点：

　　　　　　replaceWith()

　　　　　　replaceAll()

　　　　　　初始：

　　　　　　<div>div</div>

　　　　　　<hr>

　　　　　　<span>span</span>

　　　　　　结果：

　　　　　　　　<hr>

　　　　　　　　<div>div</div>

                 $('span').replaceWith($('div'));    //div替换span

　　　　　　$('div').replaceAll($('span'));

　　　　　　

　　　　hover(fn1,fn2):

　　　　　　 相当于mouseenter和mouseleave，不会冒泡

　　　　　　mouseover 和 mouseout 会冒泡

　　　　focusin()、focusout()

　　　　　　支持冒泡,focus和blue不支持冒泡

　　　　on()

　　　　　　click(),one(),delegate()  =>最终都会调on()

　　　　　　例子：

　　　　　　$(obj),on('click','span',{name:'hello'},function(ev){

　　　　　　　　console.log(ev.data)   =>{name:hello}

　　　　　　　　console.log(ev.data.name)  =>hello

　　　　　　});

 

　　　　　　$(obj).on('touchstart',function(ev){

　　　　　　　　console.log(ev.originalEvent.changedTouches)  //jq中的ev，没有changedTouches，原生中有，这时需要将jq中的ev转成原生的，即:ev.originalEvent

　　　　　　});

 

　　　　　　on()，也可以支持自定义事件，即

　　　　　　　　$(obj).on('zoomIn',function(){});

　　　　　　　　$(obj).on('zoomOut',function(){});

　　　　　　　　//这样使用不会调用，必须使用trigger来调用，即$(obj).trigger('zoomIn')

 　　　　　　　　$(obj).on('DOMMouseScoll',function(ev){   //鼠标滚轮触发事件

　　　　　　　　　　if (ev.originalEvent.detail > 0) {    

　　　　　　　　　　  //向下滚：3

　　　　　　　　　　} else {

　　　　　　　　　　　//向上滚:-3

　　　　　　　　　　}

　　　　　　　　});

　　　　　　

　　　　　　trigger()与triggerHandler()的区别

　　　　　　$('input').on('focus',function(){

　　　　　　　　$(this).css('background','red');

　　　　　　})

　　　　　　$('div').on('click',function(){

　　　　　　　　$('input').trigger('focus');   //点击div，会触发input的focus,将input的背景颜色变红，并且光标焦点在input上

　　　　　　　　$('input').triggerHandler('focus');  //点击div，会触发input的focus,将input的背景颜色变红(不会触发浏览器的默认行为)

　　　　　　});　

 

　　　　event.stopPropagation()和event.stopImmediatePropagation()

　　　　event.stopImmediatePropagation()会阻止本身的事件操作

　　　　<div><span></span></div>

　　　　$('div').click(function(){

　　　　　　alert('123');

　　　　});

　　　　$('span').click(function(ev){

　　　　　　ev.stopPropagation();   //alert('123')被阻止了,只会弹456;

　　　　　　ev.stopImmediatePropagation(); //alert('123'),alert('456')都会阻止了，会阻止本身的事件操作,注意顺序关系，456要写在后面，如果写在前面无效。

　　　　});

　　　　$('span').click(function(ev){

　　　　　　alert('456');

　　　　});

 

　　　　加载：

　　　　$(function(){

　　　　　　//DOM加载完

　　　　});

　　　　$(document).ready(function(){

　　　　　　//DOM加载完

　　　　});

　　　　$(window).load(function(){

　　　　　　//页面加载完

　　　　});

 

 

　　　　截至操作：nextUntil(),prevUntil(),parentsUntil()

　　　　　　$(obj).parentsUntil('body')  //不包括body本身

 

　　　　数据缓存：

　　　　　　data() //适合大容量的数据存储，数据存放在jq库的大集合中

　　　　　　attr() //相当于setAttribute()或getAttribute()

　　　　　　prop() //相当于.或者[]的写法，即表单$(obj).prop('checked',true);  checkbox选中

　　　　　　removeData()     removeAttr()         removeProp()

　　　　JSON形式的设置：

　　　　　　on()        css()          attr()

　　　　　　$(obj).on({

　　　　　　　　'click':function(){},

　　　　　　　　'mousemove':function(){}

　　　　　　});

　　　　　　$(obj).css({

　　　　　　　　'width':'100px',

　　　　　　　　'height':'100px'

　　　　　　});

　　　　回调形式的设置：

　　　　　　addClass()         html()         val()

　　　　　　 例如：

　　　　　　<div class='a'></div>

　　　　　　<div></div>

　　　　　　<div></div>

　　　　　　$('div').addClass(function(index,oldClass){

　　　　　　　　console.log(index);  //第一个参数为索引

　　　　　　　　console.log(oldClass) ; //第二个参数为之前的class

　　　　　　　　//若要为每一个div依次添加class为box1 box2 box3

　　　　　　　　return 'box'+(index+1);

　　　　　　});

　　　　　　输出结果：

　　　　　　　　0

　　　　　　　　a

　　　　　　　　1

　　　　　　　　空

　　　　　　　　2

　　　　　　　　空

 

　　　　　$.merge  合并数组,只能接收两个参数

 　　　　　　var a =[1,2,3];

　　　　　　 var b =[4,5,6];

　　　　　　 var c = $.merge(a,b);

 　　　　　　console.log(c);  //结果：[1,2,3,4,5,6]  

　　　　　$.map 接收两个参数，第一参数为数组，第二个参数为fn，其中fn中return的结果可以改变数组的值

　　　　　　var arr = ['a','b','c'];

　　　　　　arr = $.map(arr,function(val,index){

　　　　　　　　return val+index;

　　　　　　　　return 'hello';

　　　　　　})　　　　　

　　　　　　console.log(arr)   // ["a0", "b1", "c2"]    ["hello", "hello", "hello"] 

　　　　　$.grep 数组中符合条件的筛选出来

　　　　　　var arr=[1,5,3,8,2];

　　　　　　arr = $.grep(arr,function(val,index){

　　　　　　　　return val>4;

　　　　　　});

　　　　　　console.log(arr)   //[5, 8] 

　　　　 $.unique() 针对DOM结点的去重方法

　　　　<div></div>

　　　　<div class="box"></div>

　　　　<div></div>

　　　　var aDiv = $('div').get();

　　　　var arr = [];

　　　　for (var i=0;i<aDiv.length;i++){

　　　　　　arr.push(aDiv[i]);

　　　　}

　　　　for (var i=0;i<aDiv.length;i++){

　　　　　　arr.push(aDiv[i]);

　　　　}

　　　　console.log(arr);    // [div, div.box, div, div, div.box, div]

　　　　arr = $.unique(arr);

　　　　console.log(arr);  // [div, div.box, div] 

 

　　　　$('div').parents()为body，有多个body，就可以用$.unique()来处理了

 

　　　　$.inArray()  类似于indexOf,找数组中的索引位置

　　　　var arr = ['a','b','c','d'];

　　　　console.log( $.inArray('b',arr) );  // 1

　　　　$.makeArray()  转数组

　　　　var aDiv = $('div').get();

　　　　aDiv = $.makeArray(aDiv);

　　　　aDiv.push('123');

　　　　console.log(aDiv)  //  [div,div.box, div, 123]

　　　　$.trim()  去除前后空格

 

　　　　ajax扩展：

　　　　　　$.param()   将json转成　key=value&key=value　的形式

　　　　　　var obj = {'name':'hello','age':'20'};

　　　　　　obj = $.param(obj);

　　　　　　console.log(obj)   // name=hello&age=20

 

　　　　　　var obj = [{'name':'hello','value':'20']};  

　　　　　　obj = $.param(obj);

　　　　　　console.log(obj)   // hello=20，注意，必须是array，而且是name和value才会合到一起

 

　　　　　　$.ajax({

　　　　　　　　data : {'name':'hello','age':'20'}

　　　　　　})

 

　　　　　　$.serialize()  $.serializeArray()   //只是针对form中的name和value形式　

　　　　　　<form>　　　

　　　　　　　　<input type="text" name="a" value="1">
　　　　　　　　<input type="text" name="b" value="2">
　　　　　　　　<input type="text" name="c" value="3">

　　　　　　</form>

　　　　　　var a = $('form').seiralize()    

　　　　　　console.log(a)   // a=1&b=2&c=3

　　　　　　var a = $('form').serializeArray()

　　　　　　console.log(a)  //[{name:'a',value:'1'},{name:'b',value:'2'},{name:'c',value:'3'}]

　

　　　　　　$(obj).load('test.html .test1',function(){})

　　　　　　表示加载内容到obj元素，可用在页头和页尾的加载

 

　　　　　　第一个参数为要加载的url地址，空格式后面.test1表示筛选，即在test.html中找到.test1元素

　　　　　　第二个参数为callback

　　　　　　

　　　　　　$.getScript(url,callback)   动态加载js文件，第一个参数为js文件，第二个为callback，可以做按需加载js文件，比如：点击div去加载js

 

　　　　　　$.getJSON(url,callback)

　　　　　　　　json: $.getJSON('test.php',function(data){

　　　　　　　　　　　　console.log(data);   //　json对象

　　　　　　　　});

　　　　　　　　jsonp: $.getJSON('test.php?callback=?',function(data){   //注：这里需要写callback=?的形式，如果写成callback=show，会出错的，走error，因为data必须是json对象，这里show后，是字符串，所以走了error的函数

　　　　　　　　　　　　console.log(data);  // json对象

　　　　　　　　}).error(function(err){

　　　　　　　　　　　　console.log(err);

　　　　　　　　});

　　　　　　//还可以这样写 jsonp

　　　　　　$.ajax({

　　　　　　　　url:'test.php?callback=show',

　　　　　　　　success:function(){}

　　　　　　})

　　　　　　//或者这样写 jsonp,这里不需要写callback了

　　　　　　$.ajax({

　　　　　　　　url:'test.php'

　　　　　　　　datatype: 'jsonp'

　　　　　　　　success:function(){}

　　　　　　})

　　　　默认配置，全部的ajax都是发的post请求，如下设置：

　　　　$.ajaxSetup({

　　　　　　type : 'POST'

　　　　})

　　　　全局事件,必须加在document上：

　　　　　　$.ajaxStart()

　　　　　　$.ajaxStop()

　　　　　　$.ajaxSuccess()

　　　　　　$.ajaxError()

　　　　　　$.ajaxComplete()

　　　　　　$.ajaxSend()

　　　　其他ajax属性：

　　　　　　global　　是否触发全局事件，不触发false

　　　　　　context   改this指向

　　　　　　　　$.ajax({

　　　　　　　　　　url:'test.php',

　　　　　　　　　　context : '#div'

　　　　　　　　　　success:function(){

　　　　　　　　　　　　console.log(this)   //没写context时，this为$.ajax,写了context后，this为#div

　　　　　　　　　　}

　　　　　　　　})

　　　　　　jsonp 改jsonp名字，一般不需要改

　　　　　　jsonpCallback 改jsonpCallback的名字，一般不需要改

　　　　　　cache 缓存，如：get默认是有缓存的，可以设置成false，不保存缓存

　　　　　　timeout 超时

　　　　　　proessData  默认为把{'aaa':'111','bbb':'222'}格式，组成?aaa=111&bbb=222的形式发送，这里可以不指定这种形式发送

　　　　　　contextType  头部

　　　　　　

　　　　　　参考的网址：

　　　　　　http://www.cnblogs.com/heyuquan/archive/2013/05/13/js-jquery-ajax.html

 

中级班第二课：

　　　　$.noConflict()：  解决冲突，注：这个要写在$之前

　　　　　　var J = $.noConflict();

　　　　　　var $=123;

　　　　　　J().css();　　　

　　　　　　J.trim();

 

　　　　$.each:循环（对象，支持数组和对象）

 

　　　　end(),addBack()

　　　　　　$('div').next().css('background','red').end().css('color','blue')  //div元素，color:blue  (上一级)

　　　　　　$('div').next().css('background','red').addBack().css('color','blue')  //div元素和div.next()元素，color:blue (上一级和当前级都包括)

　　　　

　　　　add()  增加到集合中，类似push操作

　　　　　　$('div,span').css('background','red')  == $('div').add('span').css('background','red');

 

　　　　队列：默认队列名为fx

　　　　　　$.queue()  $(dom).queue()  入队

　　　　　　$.dequeue()  $(dom).dequeue()  出队

 

　　　　　　$.queue(dom元素,入队存放的地方,函数)   $.dequeue(dom元素,出队的地方)

　　　　　　$(dom).queue(入队存放的地方，函数)  $(dom).dequeue(出队的地方)

　　　　　　例子一：

　　　　　　　　function a(){console.log(1)}

　　　　　　　　function b(){console.log(2)}

　　　　　　　　function c(){console.log(3)}

　　　　　　　　$.queue(document,'joya',a);     =>$(document).queue('joya',a)

　　　　　　　　$.queue(document,'joya',b);

　　　　　　　　$.queue(document,'joya',c);   //[函数a,函数b,函数c]

　　　　　　　　$.dequeue(document,'joya');  //1   =>$(document).dequeue('joya)

　　　　　　　　$.dequeue(document,'joya'); //2

　　　　　　　　$.dequeue(document,'joya');  //3

　　　　　　例子二：

　　　　　　　　$('div).animate({'width':'200'});

　　　　　　　　$('div').animate({'height':'200'});

　　　　　　　　以上也是队列的操作，如果想在中间插入一条自己的队列，可以这样：

　　　　　　　　$('div).animate({'width':'200'});

　　　　　　　　$('div').queue('fx',function(){           =>$('div).delay(2000)

　　　　　　　　　　setTimeout(function(){

　　　　　　　　　　　　$('div').dequeue('fx')          =>注意：要有出队的动作，如果没有后续的animate不会执行，卡住

　　　　　　　　　　},2000)

　　　　　　　　});

　　　　　　　　$('div').animate({'height':'200'});

 

　　　　$.Callbacks()  参数有：once(只触发一次)，memory(记忆功能，后续的add也会执行)，unique(去重),stopOnFalse(停止在return false，后续不执行)

　　　　　　function a(){ console.log(1) };

　　　　　　function b(){ console.log(2) };

　　　　　　function c() { console.log(3) };

　　　　　　cb = $.Callbacks();

　　　　　　cb.add(a);

　　　　　　cb.add(b);

　　　　　　cb.fire();  //触发，结果：1,2

　　　　　　cb.add(c);

　　　　　　cb.remove(a);

　　　　　　cb.fire();  //结果：1,2,2,3

　　　　　　使用场景：

　　　　　　　　var cb = $.Callback();

　　　　　　　　function a(){ console.log(1) }

　　　　　　　　(function(){

　　　　　　　　　　function b(){ console.log(2)};

　　　　　　　　　　cb.add(a);

　　　　　　　　　　cb.add(b);

　　　　　　　　})();

　　　　　　　　cb.fire(); //1,2

　　　　　　once场景：

　　　　　　　　cb = $.Callback('once');

　　　　　　　　cb.add(a);

　　　　　　　　cb.add(b);

　　　　　　　　cb.fire();

　　　　　　　　cb.fire();　　//只触发一次，结果：1,2

　　　　　　memory场景：

　　　　　　　　cb = $.Callback('memory');

　　　　　　　　cb.add(a);

　　　　　　　　cb.add(b);

　　　　　　　　cb.fire();

　　　　　　　　cb.add(c);　//结果：1,2,3，后续cb.add(c)也有结果

　　　　　　unique场景：

　　　　　　　　cb = $.Callback('unique');

　　　　　　　　cb.add(a);

　　　　　　　　cb.add(a);

　　　　　　　　cb.fire();　　//结果：1,去重，只触发一次

　　　　　　stopOnFalse场景:

　　　　　　　　function a(){ console.log(1); return false;}

　　　　　　　　function b(){ console.log(2); }

　　　　　　　　function c(){ console.log(3); }

　　　　　　　　cb = $.Callback('stopOnFalse');

　　　　　　　　cb.add(a);

　　　　　　　　cb.add(b);

　　　　　　　　cb.add(c);

　　　　　　　　cb.fire();   //结果：1,停止在return false后续不会触发

 

　　　　　以上可以组合使用，即cb=$.Callback('once memory')，中间有空格隔开。

 

　　$.Deferred:延迟对象

　　　　例子一：

　　　　　　setTimeout(function(){　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　console.log(1);　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　},2000);　　　                       　　　　

　　　　　　console.log(2);　　　=>　结果：2,1

 

　　　　　　=>改成等待2秒，弹1,2

　　　　　　cb = $.Callbacks();

　　　　　　setTimeout(function(){

　　　　　　　　console.log(1);

　　　　　　　　cb.fire();

　　　　　　},2000);

　　　　　　cb.add(function(){　　

　　　　　　　　console.log(2);

　　　　　　});

　　　　　　=>对应的deferred， 不同之处: 

　　　　　　　　dfd = $.Deferred();

　　　　　　　　cb.fire() => dfd.resolve();

　　　　　　　　cb.add() => dfd.done();

　　　　正确：done对应resolve , 错误：fail对应reject

　　　　$.ajax({}).done().fail();   =>jq中推荐写法

 

　　　　例子二：初次点击等待2秒，后续立刻执行

　　　　　　function a(){ console.log(1) }

　　　　　　dfd = $.Deferred();

　　　　　　$(dom).click(function(){

　　　　　　　　setTimeout(function(){

　　　　　　　　　　dfd.resolve();　　　　//状态会保持住,后续dfd.done(a)就相当于a()

　　　　　　　　},2000)

　　　　　　　　dfd.done(a);

　　　　　　});

 

　　$.when用法：

　　　　$.ajax({xxx}).done();

　　　　$.ajax({yyy}).done();

　　　　如果想以上两个ajax都成功，在执行,则可以：$.when( $.ajax({xxx}) , $.ajax({xxx}) ).done();

　　　　

　　　　

 

 

　　

 

　　　

　　

　　　　　　

　　

——

转载于:https://www.cnblogs.com/joya0411/p/4018095.html