jQuery

是一個(gè)類庫，提供強(qiáng)大的選擇器，不用考慮兼容性問題，進(jìn)行DOM操作，動(dòng)畫功能，以及Ajax
jQuery 1點(diǎn)幾版本 兼容IE6~8 而2-3的版本不兼容

原生對(duì)象與jQuery對(duì)象的轉(zhuǎn)化
原生——>jq：oDiv——>$(oDiv)
jq——>原生: $div1——>$div.get(0)

文檔就緒函數(shù)
一般jq都寫在文檔就緒函數(shù)里

$(document).ready(function(){})
$().ready(funcyion(){})
$(function(){})//一般用第三個(gè)

綁定事件最好都用on

$(selector).on("事件類型",function(){})

選擇器

pre+next
緊跟在其后的一個(gè)元素

pre~siblings
其所有的兄弟元素

：eq()
下標(biāo)從0開始，-1指倒數(shù)第一個(gè)

：even 偶數(shù)/:odd 奇數(shù)
下標(biāo)從0開始

:gt() 大于/:lt() 小于
下標(biāo)從0開始

:header
選中h1-h6的元素

：not()
括號(hào)里面是一個(gè)選擇器，去除它

：root()
永遠(yuǎn)是HTML

：target
一般與用于錨點(diǎn)

:contains()
選擇所有包含指定文本的元素，區(qū)分大小寫
可以適用于輸入框輸入信息時(shí)的篩選

：empty
選中內(nèi)容為空的

:parent
找其子元素不為空的元素，==與empty相反==

:animated
選中正在執(zhí)行動(dòng)畫的元素

：hidden
元素被認(rèn)為隱藏的幾個(gè)情況：

display：none

type="hidden"的表單元素

寬度和高度為0

祖先元素被隱藏，則該元素不會(huì)在頁面上顯示

注：visibility:hidden或opacity:0被認(rèn)為可見（因?yàn)槿匀徽紦?jù)空間）

：first-child/:first-of-type
first-child 選中第一個(gè)孩子
first-of-type 選中第一次出現(xiàn)的元素

：nth-child()
整個(gè)括號(hào)里的索引從1開始
一般適用于找規(guī)律

屬性

.attr()/.prop()
獲取屬性
==注：若檢查或更改DOM屬性，如checked, selected, 或 disabled的情況下只能用.prop()==

.val()
獲取value值，主要與用于input
拓：defaultValue 默認(rèn)值

.css

$div1.css("background","red")//只給對(duì)象設(shè)置一個(gè)屬性
$div1.css)({
    backgroundColor:"red"
})//給對(duì)象設(shè)置多個(gè)屬性
$div1.css)("width",function(){
    //...
    return...
}//給對(duì)象設(shè)置的屬性是個(gè)變量

.addClass()/.removeClass()
添加樣式

.hasClass()
可以判斷當(dāng)前樣式是否存在

.toggleClass()
切換樣式

.width()/.innerWidth()/.outerWidth()
.width() 只包含內(nèi)容
.innerWidth() 只包含內(nèi)容和padding
.outerWidth() 包含內(nèi)容，padding和border
.outerWidth(true) 包含內(nèi)容，padding,border和margin

.offset()/.position()/.offsetParent
.offset() 相對(duì)于文檔的位置
.position() 相對(duì)于最近的已經(jīng)定位的祖先元素的位置
.offsetParent 最近的已經(jīng)定位的祖先元素的對(duì)象
注：只有offset能賦值，其他只能取值

.scrollTop() /.scrollLeft()
距離原始滾動(dòng)條的位置

操作

.clone()
是實(shí)現(xiàn)深拷貝

.append()/.appendTo()
.append() 父元素追加子元素
.appendTo() 子元素追加到父元素
注：都在內(nèi)容的最后插入

.prepend()/.prependTo()
類append，只是在內(nèi)容的前面插入

.wrap()/.wrapAll()/.wrapInner()
xx.wrap(yy) 在每個(gè)xx外包含一個(gè)yy
xx.wrapAll(yy) 在所有的xx外只包一個(gè)yy
xx.wrapInner(yy) 在每個(gè)xx里包一個(gè)yy

.text()/.html()
.text() 當(dāng)作文本輸出
.html() 當(dāng)作HTML標(biāo)簽輸出

.after()/.insertAfter()/.before()/.insertBefore()
xx.after(yy) 在這之后插入 xx.after(yy)=yy.insertAfter(xx)
.before() 在這之前插入

.empty()
清空內(nèi)容，與：empty不一樣

.replaceAll()/.replaceWith()
("<>").replaceAll($())
$().repaceWith("<>")
注：兩者功能一樣，但前后順序不一樣

遍歷

.eq()
同：eq()功能一樣，只不過一個(gè)是方法，一個(gè)是選擇器

.filter()
過濾

.add()
添加具有同樣樣式的元素

.each(index,elem)
遍歷每個(gè)元素，不需要考慮下標(biāo)

.children()/.find()
.children() 只找親兒子
.find() 找它的子孫后代

.end()
返回鏈?zhǔn)讲僮鞯纳弦患?jí)

.addBack()
將前一個(gè)元素添加到當(dāng)前集合中

.closest()/.parents()

.closest()	.parents()
開始于當(dāng)前元素	開始于父元素
在 DOM 樹中向上遍歷，直到找到與提供的選擇器相匹配的元素(找到一個(gè)不再找了)	向上遍歷DOM樹到文檔的根元素，每個(gè)祖先元素加入到臨時(shí)集合，如果提供一個(gè)選擇器，則會(huì)使用該選擇器在集合中進(jìn)行過濾(會(huì)一直找找到文檔的根元素)
返回包含零個(gè)或一個(gè)元素的jQuery對(duì)象	返回包含零個(gè)，一個(gè)或多個(gè)元素的jQuery對(duì)象

.next()/.nextAll()/.nextUntil
.next() 找到下一個(gè)
.nextAll() 找到下面所有
.nextUntil() 找到···直到···

prev()/prevAll()/prevUtil()同上
找前一個(gè)

.parent()/parentUnit()同上
找父元素

.sublings()
找他前后的兄弟

事件

.on()/.off()
.on() 綁定事件
.off() 移除事件
注：綁定或移除事件必須是同一個(gè)方法

mouse

.mouseover()/.mouseout()	.mouseenter()/.mouseleave()
有事件冒泡	沒有事件冒泡（不是原生事件）

focus

.focus()/.blur()	.focusin()/.focusout()
默認(rèn)不會(huì)事件冒泡	沒有事件冒泡（不是原生事件）

.hover()
鼠標(biāo)的劃入劃出
相當(dāng)于mouseenter和mouseleave，所以不支持事件冒泡

$("#div1").hover(function(){
    console.log("over")
},function(){
    console.log("out")
})

e.target/e.currentTarget/e.stopProgation()
e.target 事件源
通常用e.target和this比較，來判斷事件是不是由于冒泡而觸發(fā)的，經(jīng)常用于事件冒泡時(shí)處理事件委托
e.currentTarget總是等于this
e.stopProgation() 防止事件冒泡

if(e.target==this){
    console.log("不是事件冒泡觸發(fā)的")
}else{
    console.log("是事件冒泡觸發(fā)的")
}

e.pageX/e.pageY
獲取鼠標(biāo)坐標(biāo)

e.which
是鍵盤碼， 將 event.keyCode 和 event.charCode 標(biāo)準(zhǔn)化了，沒有兼容性問題

動(dòng)畫

.show()/.hide()
改變高度、寬度、透明度；
可以設(shè)置事件,單位毫秒 show(5000)

.toggle()
來回切換show和hide

.fadeIn()/.fadeOut()/.fadeTo()/.fadeToggle()
淡入/淡出
只改變透明度
.fadeTo() 淡入到
.fadeToggle() 來回淡入淡出

.slideUp()/.slideDown()/.slideToggle()
像簾子一樣收起放下
只改變其高度

.animate()
第一個(gè)參數(shù) 對(duì)象
第二個(gè)參數(shù) 時(shí)間
第三個(gè)參數(shù) 動(dòng)畫效果(自身提供linear勻速 ，swing先慢后快（默認(rèn)）)
第四個(gè)參數(shù) 回調(diào)函數(shù)
注：不能設(shè)置改變背景顏色

以上效果的例子

    
    
    
    
    



    hide
    show
    toggle
    fadeIn
    fadeOut
    fadeToggle
    slideDown
    slideUp
    slideToggle
    animate
    :animated
    


    
    
    

注：jQuery 的動(dòng)畫插件 jQuery.easing.js,若使用必須在前面先引入jQuery文件

.stop()
停止動(dòng)畫
第一個(gè)參數(shù) 布爾值 指是否取消已列隊(duì)動(dòng)畫。默認(rèn)false
第二個(gè)參數(shù) 布爾值 指是否立即完成當(dāng)前動(dòng)畫。默認(rèn)false
注：一般在執(zhí)行動(dòng)畫時(shí)，前面先寫stop

    
    
    




    

        
    
    

        
        
        
        
    
    
stop運(yùn)動(dòng)參數(shù)測(cè)試

    
    

核心

$.extend()
將兩個(gè)對(duì)象的內(nèi)容合并第一個(gè)對(duì)象