jQuery
jQuery官網(wǎng):http://jquery.com/
jQuery中需要注意的幾點(diǎn):
1魂毁、原生的性能大于jQuery
2跃捣、原生和jQuery不能混在一行寫(xiě)
3夺蛇、jQuery能實(shí)現(xiàn)的原生都能實(shí)現(xiàn),原生能實(shí)現(xiàn)的jQuery不一定能實(shí)現(xiàn)
jQuery中同一元素可以鏈?zhǔn)讲僮?/p>
$('div').attr().css().html().click()
jQuery中的選擇器獲取元素:
id --> $('#div1')
class --> $('.div1')
標(biāo)簽 --> $('div')
嵌套 --> $('#div1 p')
群組 --> $('#div1,p')
直接子級(jí)選擇器 --> $('#div1>p')
偽類(lèi)選擇器
li:last 獲取一組元素中的最后一個(gè)
li:first 獲取一組元素中的第一個(gè)
li:eq(n) 獲取一組元素中的第n個(gè),n從0開(kāi)始
li:odd 獲取所有奇數(shù)元素
li:even 獲取所有偶數(shù)元素
li:contains('內(nèi)容') 獲取內(nèi)容中有contains中內(nèi)容的元素
li:has('標(biāo)簽名') 獲取標(biāo)簽名中有has中標(biāo)簽名的元素
屬性選擇器
$('div[id]') 獲取元素中屬性有id的元素
$("input[type='name']") 獲取元素中屬性有name的元素
$("input[type^='name']") 獲取元素屬性?xún)?nèi)容前面有name的元素
$("input[type$='name']") 獲取元素屬性?xún)?nèi)容后面有name的元素
$("input[type*='name']") 獲取元素屬性?xún)?nèi)容有name的元素
jQuery中常見(jiàn)的一些小方法:
$(this) 把原生的代碼變?yōu)閖Query的
hide() 隱藏
show() 顯示
hover(overFn,outFn) 鼠標(biāo)移入移出
fadeIn() 淡入顯示
fadeOut() 淡出隱藏
slideUp() 從下往上滑(隱藏)
slideDown() 從上往下滑(顯示)
eq(n) 類(lèi)似于下標(biāo),n代表第幾個(gè)
addClass() 添加classname,是追加不是替換
removeClass() 刪除classname
index() 元素對(duì)應(yīng)的索引,索引就是元素的位置
stop() 一般運(yùn)動(dòng)前要先停止
offset().left 物體距離屏幕左側(cè)距離
position().left 物體距離定位父級(jí)左側(cè)距離
scrollTop() 物體距離頂部的滾動(dòng)距離
height() 物體純高度
innerHeight() 物體包含padding不包括border的高度
outerHeight() 物體的盒子模型高度
val() value
html() innerHtml
html('內(nèi)容') 給html添加內(nèi)容
$('<div></div>') 創(chuàng)建一個(gè)元素
父級(jí).append(子級(jí)) 在父級(jí)內(nèi)的元素后部追加
父級(jí).prepend(子級(jí)) 在父級(jí)內(nèi)的元素前面添加
obj1.after(obj2) 把obj2放到obj1后面
obj1.before(obj2) 把obj2放到obj1前面
parent() 父級(jí)
offsetparent() 定位父級(jí)
$.trim(str) 去除首尾空格
事件
on() 事件綁定(jQuery中所有的事件都是綁定好的)
off() 解除綁定
e.preventDefault(); 組織瀏覽器默認(rèn)事件
jQuery中的循環(huán):
$.each(obj.function(index,element){
//Code
})
index 下標(biāo)
element 循環(huán)對(duì)應(yīng)的對(duì)象或值
jQuery中的Ajax:
$.ajax({
url:'',
dataType:'jsonp',
json:'定義CallBack',
data:{
wd:''
},
success:{
//Code
},
error:{
//Code
}
})
當(dāng)不使用jsonp跨域請(qǐng)求數(shù)據(jù)時(shí)可去掉dataType和json兩個(gè)參數(shù)
jQuery中如何封裝函數(shù):
單個(gè)封裝函數(shù)
$.fn.toRandom=function(){
//Code
}
批量封裝函數(shù)
$.fn.extend({
toBlue:function(){
//Code
},
toRed:function(){
//Code
},
})