jQuery的一些小方法

jQuery

jQuery官網:http://jquery.com/

jQuery中需要注意的幾點:
1、原生的效能大於jQuery
2、原生和jQuery不能混在一行寫
3、jQuery能實現的原生都能實現,原生能實現的jQuery不一定能實現

jQuery中同一元素可以鏈式操作

$('div').attr().css().html().click()

jQuery中的選擇器獲取元素:

id --> $('#div1')
class --> $('.div1')
標籤 --> $('div')
巢狀 --> $('#div1 p')
群組 --> $('#div1,p')
直接子級選擇器 --> $('#div1>p')

偽類選擇器
li:last               獲取一組元素中的最後一個
li:first              獲取一組元素中的第一個
li:eq(n)              獲取一組元素中的第n個,n從0開始
li:odd              獲取所有奇數元素
li:even            獲取所有偶數元素
li:contains('內容')    獲取內容中有contains中內容的元素
li:has('標籤名')      獲取標籤名中有has中標籤名的元素

屬性選擇器
$('div[id]')                獲取元素中屬性有id的元素
$("input[type='name']")  獲取元素中屬性有name的元素
$("input[type^='name']")    獲取元素屬性內容前面有name的元素
$("input[type$='name']")    獲取元素屬性內容後面有name的元素
$("input[type*='name']")    獲取元素屬性內容有name的元素

jQuery中常見的一些小方法:

$(this)             把原生的程式碼變為jQuery的
hide()               隱藏
show()               顯示
hover(overFn,outFn) 滑鼠移入移出
fadeIn()               淡入顯示
fadeOut()             淡出隱藏
slideUp()             從下往上滑(隱藏)
slideDown()         從上往下滑(顯示)
eq(n)                 類似於下標,n代表第幾個
addClass()           新增classname,是追加不是替換
removeClass()         刪除classname
index()             元素對應的索引,索引就是元素的位置
stop()               一般運動前要先停止
offset().left         物體距離螢幕左側距離    
position().left     物體距離定位父級左側距離
scrollTop()         物體距離頂部的滾動距離
height()               物體純高度
innerHeight()         物體包含padding不包括border的高度
outerHeight()         物體的盒子模型高度
val()                 value
html()               innerHtml
html('內容')         給html新增內容
$('<div></div>')       建立一個元素
父級.append(子級)     在父級內的元素後部追加
父級.prepend(子級)   在父級內的元素前面新增
obj1.after(obj2)      把obj2放到obj1後面 
obj1.before(obj2)    把obj2放到obj1前面
parent()              父級
offsetparent()      定位父級
$.trim(str)        去除首尾空格

事件
on()                   事件繫結(jQuery中所有的事件都是繫結好的)
off()                 解除繫結
e.preventDefault(); 組織瀏覽器預設事件

jQuery中的迴圈:

$.each(obj.function(index,element){
    //Code
})
index       下標
element     迴圈對應的物件或值

jQuery中的Ajax:

$.ajax({
    url:'',
    dataType:'jsonp',
    json:'定義CallBack',
    data:{
        wd:''
    },
    success:{
        //Code
    },
    error:{
        //Code
    }
})
當不使用jsonp跨域請求資料時可去掉dataType和json兩個引數

jQuery中如何封裝函式:

單個封裝函式
$.fn.toRandom=function(){
    //Code
}

批量封裝函式
$.fn.extend({
    toBlue:function(){
        //Code
    },
    toRed:function(){
        //Code
    },
})