jQuery.js ? ?js類庫
a. 瀏覽器的兼容性處理完善，兼容ie6
b. DOM操作接口簡單启具，容易上手
c. DOM動(dòng)畫本讥，效果
d. AJAX/jsonp 封裝好，容易使用
類庫[廚房]鲁冯，插件[門/窗]拷沸，框架[毛胚房]
jQuery版本? jQuery.fn.jquery
1. 1版本 兼容IE6
2. 2版本 去掉低版本ie的兼容性代碼
3. 3最新版本
1. jQuery 全局變量? $ === jQuery
2. 頁面DOM渲染完成
$(document).ready(function() {
? ? ? ? ? ? ? ? ? ? //
})
$(function() {
? ? ? ? ? ? ? ? ? ?//
})
3. 獲取元素
$(css選擇器) 返回來的是數(shù)組，獲取匹配元素的長度 arr.length或arr.size()
jQuery獲取到的元素跟原生的方法不能互用
可以轉(zhuǎn)換
原生的元素 ====> jQuery對象 this ===>? $(this)
var box = document.getElementById("box")? ====> $(box)
jQuery對象 ====> 轉(zhuǎn)換成 原生的對象
$("#box")? ? ? $("#box")[0]/$("#box").get(0)
.eq(n) 獲取第幾個(gè)
4. 鏈?zhǔn)讲僮?/h1>
jq方法調(diào)用薯演，返回調(diào)用該方法的元素
5. 設(shè)置樣式
$().css("color", "red")
$().css({
? ? ? ? ? ? ?name1:value1,
? ? ? ? ? ? ?name2:value2
})
.hide()
.show()
.toggle()
6. 獲取元素寬
$(ele).width()? ? ? ? ? 內(nèi)容寬width
$(ele).innerWidth()? ? 內(nèi)容width + padding
$(ele).outerWidth()? ? 內(nèi)容width + padding + border
$(ele).outerWidth(true) 內(nèi)容width + padding + border + margin
$(ele).width(200)? 設(shè)置寬200
7. 元素的坐標(biāo)
$(ele).offset() 返回文檔坐標(biāo) {left: x , top: y}
$(ele).position() 返回相對定位父級的坐標(biāo) {left: x , top: y}撞芍，從ele元素margin開始算。盒模型margin左上角到父級的左上角的距離
到定位父級的border-box
ele.offsetLeft? 從元素的border-box開始算跨扮，到定位父級的border-box
ele.offsetTop? 從元素的border-box開始算序无，到定位父級的border-box
$(ele).scrollTop()
.scrollLeft()
返回頂部 $("html,body").scrollTop(0)
8. 屬性設(shè)置
元素的普通屬性
$(ele).attr(name) 獲取屬性
$(ele).attr(name, value) 設(shè)置屬性
$(ele).removeAttr(name)? 移除屬性
元素的布爾屬性
$(ele).prop(name)? ? ? 獲取屬性，返回來的布爾值
$(ele).prop(name, true) 設(shè)置屬性
$(ele).removeAttr(name) 移除屬性
9. 文本/內(nèi)容獲取
ele.innerHTML/ele.innerText
ele.value
一般元素：$(ele).html()/$(ele).text()
表單元素：$(ele).val()
10. class的獲取設(shè)置
$(ele).addClass("active")
$(ele).removeClass("active")
$(ele).toggleClass("active")
$("#box").hasClass("active");是否具有該屬性
11. DOM樹關(guān)系節(jié)點(diǎn)
$(ele).index()? ? 在所有兄弟元素中的下標(biāo)
$(ele).index("button") 在所有button兄弟元素中的下標(biāo)
$(ele).siblings()? 元素的兄弟元素
$(ele).siblings("span") span兄弟元素
12. jquery 事件
$().click(cb)
$().mousedown(cb)
$().keydown()
事件綁定
$(ele).bind("click", cb)
$(ele).on("click", cb) 推薦使用on這種方式衡创，還能做事件委托
事件委托 $(parent).on("click", "childSelector", cb)
事件解綁
$(ele).unbind("click") 解除點(diǎn)擊事件綁定
$(ele).unbind()? 解除所有事件綁定
$(ele).off("click") 解除點(diǎn)擊事件綁定
事件對象
$(ele).one("click", cb) 只綁定一次事件
$(ele).trigger("click") 事件模擬
$(ele).hover(mouseover, mouseout) 事件合成帝嗡，mouseover/mouseout
阻止默認(rèn)事件
e.preventDefault()
取消冒泡
e.stopPropagation()
13.DOM操作
a.新建元素,注意跟獲取元素區(qū)分,創(chuàng)建元素肯定出現(xiàn)尖括號
b.插入元素
末尾插入
$(document.body).append(ele);
ele.appendTo($("body"));
開頭插入元素
parent.prepend(child)
child.prependTo(parent)
A.before(B) 在A前面插入B
B.insertBefore(A) 在A前面插入B
c.復(fù)制
$(ele).clone(bol) bol為true時(shí),事件也會(huì)復(fù)制
d.移除元素
$(ele).remove()
$(ele).empty() 清空子元素
e.篩選元素
$(ele).next() 下一個(gè)兄弟元素
$(ele).nextAll() 之后所有的兄弟元素
$(ele).nextUntil(nchild) 之后所有的兄弟元素到nchild之前為止
$(ele).prev()
$(ele).prevAll()
$(ele).prevUntil()
$(ele).siblings() 兄弟元素
$(ele).parent()
$(ele).parents()
$(ele).children()
$(ele).find() 內(nèi)部找到
$(ele).filter() 自身查找
$(ele).eq(index) 自身第幾個(gè)
$(ele).index() 在兄弟元素中的排行
$(ele).index("button") 在所有button兄弟元素中的下標(biāo)
$(ele).slice(start, end) 獲取從start到end的所有元素,不包括end
$("li:lt(4)") 獲取前4個(gè)
14.效果
$(ele).hide(ms)
$(ele).show(ms)
$(ele).toggle()
淡入/淡出
$(ele).fadeOut(ms)
$(ele).fadeIn(ms)
$(ele).fadeTo(ms,opatity)
$(ele).fadeToggle()切換淡入/淡出
滑動(dòng)
$(ele).sildeUp()
$(ele).slideDown()
$(ele).slideToggle()
$(ele).animate({},400)
15.jQuery插件封裝
擴(kuò)展jquery元素功能
$.fn.extend({})
e.originalEvent 找到原生e
16. $(ele).each(function(index,key))
一些應(yīng)用
1.返回頂部
$("html,body").animate({scrollTop:0},300)
$("html,body").scrollTop(0)
2.scroll事件 scrollTop/scrollLeft值變化就會(huì)觸發(fā)
3.
4.jQuery工具函數(shù)
$.trim(str) 去掉字符串首尾空格
$.parseJSON() 將json字符串轉(zhuǎn)換為對象
$.each(arr,fn) 遍歷數(shù)組
$.map(arr,fn)返回?cái)?shù)組
$.type() 類型檢測
$.fn.extend() 給元素?cái)U(kuò)展方法功能
$.extend() 給juqery擴(kuò)展工具函數(shù)
5.zepto.js 移動(dòng)端的jquery精簡版
zepto.js 將功能分成許多模塊,只保留
核心模塊;包含許多方法
通過on() & off()處理事件
XMLHttpRequest 和 JSONP 實(shí)用功能
