基础第一课:
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{ 100px; height:100px; background:red; padding:10px; border:1px #000 solid; margin:5px;}
设置：
$('#div1').width(200); //200;
$('#div1').innerWidth(200); //200-padding(10) = 180;
$('#div1').outerWidth(200); //200-padding(10)-border(1) = 178;
$('#div1').outerWidth(200,true); //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{ 200px; height:200px; background:red; margin:200px; position:relative;}
#div2{ 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对象，设置样式属性和值，例如{200}
第二个参数：时间，默认：400
第三个参数：运动形式，只有两种：swing（默认，缓冲，慢快慢）和linear（匀速）
第四个参数：运动结束的回调
例如：
$(obj).animate({
'+=300', //例如：加到click上，表示点击一次宽度会增加三百
heigth:300
},1000,linear,function(){
console.log('test')
});
另一种写法：
$(obj).animate({
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({200,height:200});
}).mouseout(function(){
$(this).stop().animate({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();
——