jQuery

是一個類庫，提供強大的選擇器，不用考慮兼容性問題，進行DOM操作，動畫功能，以及Ajax
jQuery 1點幾版本 兼容IE6~8 而2-3的版本不兼容

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

文檔就緒函數
一般jq都寫在文檔就緒函數里

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

綁定事件最好都用on

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

選擇器

pre+next
緊跟在其后的一個元素

pre~siblings
其所有的兄弟元素

：eq()
下標從0開始，-1指倒數第一個

：even 偶數/:odd 奇數
下標從0開始

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

:header
選中h1-h6的元素

：not()
括號里面是一個選擇器，去除它

：root()
永遠是HTML

：target
一般與用于錨點

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

：empty
選中內容為空的

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

:animated
選中正在執行動畫的元素

：hidden
元素被認為隱藏的幾個情況：

display：none

type="hidden"的表單元素

寬度和高度為0

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

注：visibility:hidden或opacity:0被認為可見（因為仍然占據空間）

：first-child/:first-of-type
first-child 選中第一個孩子
first-of-type 選中第一次出現的元素

：nth-child()
整個括號里的索引從1開始
一般適用于找規律

屬性

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

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

.css

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

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

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

.toggleClass()
切換樣式

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

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

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

操作

.clone()
是實現深拷貝

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

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

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

.text()/.html()
.text() 當作文本輸出
.html() 當作HTML標簽輸出

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

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

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

遍歷

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

.filter()
過濾

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

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

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

.end()
返回鏈式操作的上一級

.addBack()
將前一個元素添加到當前集合中

.closest()/.parents()

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

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

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

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

.sublings()
找他前后的兄弟

事件

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

mouse

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

focus

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

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

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

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

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

e.pageX/e.pageY
獲取鼠標坐標

e.which
是鍵盤碼， 將 event.keyCode 和 event.charCode 標準化了，沒有兼容性問題

動畫

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

.toggle()
來回切換show和hide

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

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

.animate()
第一個參數 對象
第二個參數 時間
第三個參數 動畫效果(自身提供linear勻速 ，swing先慢后快（默認）)
第四個參數 回調函數
注：不能設置改變背景顏色

以上效果的例子

    
    
    
    
    



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


    
    
    

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

.stop()
停止動畫
第一個參數 布爾值 指是否取消已列隊動畫。默認false
第二個參數 布爾值 指是否立即完成當前動畫。默認false
注：一般在執行動畫時，前面先寫stop

    
    
    




    

        
    
    

        
        
        
        
    
    
stop運動參數測試

    
    

核心

$.extend()
將兩個對象的內容合并第一個對象