jquery總結

jQuery by gxj

需要下載的插件(markdown-preview/sublime-server/jQuery/autofilename)

+ ctrl+shift+p

+ install package

+ 找你需要的插件點擊安裝

資源庫

jQuery簡介/特點

* jQuery其實就是原生js寫的一個包含了豐富多彩的方法的一個js庫

* 注意jQuery的版本支持，新版已經不兼容老的瀏覽器。

* 引入jquery.js

* write less,do more!

* 隱式迭代

* 非常出色容錯功能

* 非常出色的兼容性

* 鏈式操作

* jQuery方法讀寫合體

jQuery入口函數

    $(function(){


    })   

    $(document).ready(function(){

            //jq代碼

    })

注意原生load與jquery加載的區別

原生的加載事件：當你的頁面當中的html,css,js全部加載完成之後在執行load事件處理函數裏面的代碼。  
一個頁面當中只允許出現一次window.onload事件  

jQuery的加載:當頁面的結構加載完就立馬執行jq代碼，一個頁面可以出現多次 

**jQuery判斷一個元素是否存在:$(選擇器).length是否爲0**

jQuery選擇器(所有的css選擇器都可以用到jq裏面)

jq選擇器選擇到的元素都以數組方式存儲的

+ id選擇器     $('#id名')      選中唯一的一個，也是數組

+ 類選擇器      $('.類名')       選中的一組元素，數組

+ 標籤選擇器     $('標籤名')       選中的一組元素，數組

選擇器彙總

*               $("*")              所有元素
#id             $("#lastname")      id="lastname" 的元素
.class          $(".intro")         所有 class="intro" 的元素
element         $("p")              所有 <p> 元素
.class.class    $(".intro.demo")    所有 class="intro" 且 class="demo" 的元素

:first  $("p:first")    第一個 <p> 元素
:last   $("p:last")     最後一個 <p> 元素
:even   $("tr:even")    所有偶數 <tr> 元素
:odd    $("tr:odd")     所有奇數 <tr> 元素

:eq(index)      $("ul li:eq(3)")    列表中的第四個元素（index 從 0 開始）
:gt(no)         $("ul li:gt(3)")    列出 index 大於 3 的元素 greater than
:lt(no)         $("ul li:lt(3)")    列出 index 小於 3 的元素 less than
:not(selector)  $("input:not(:empty)")  所有不爲空的 input 元素

:header         $(":header")        所有標題元素 <h1> - <h6>
:animated       所有動畫元素

:contains(text)     $(":contains('W3cSchool')")  包含指定字符串的所有元素
:empty              $(":empty")                 無子（元素、文本）節點的所有元素
:hidden             $("p:hidden")               所有隱藏的 <p> 元素
:visible            $("table:visible")          所有可見的表格

s1,s2,s3            $("th,td,.intro")            所有帶有匹配選擇的元素

[attribute]         $("[href]")         所有帶有 href 屬性的元素
[attribute=value]   $("[href='#']")     所有 href 屬性的值等於 "#" 的元素
[attribute!=value]  $("[href!='#']")    所有 href 屬性的值不等於 "#" 的元素
[attribute$=value]  $("[href$='.jpg']") 所有 href 屬性的值包含以 ".jpg" 結尾的元素

:input      $(":input")         所有 <input> 元素
:text       $(":text")          所有 type="text" 的 <input> 元素
:password   $(":password")      所有 type="password" 的 <input> 元素
:radio      $(":radio")         所有 type="radio" 的 <input> 元素
:checkbox   $(":checkbox")      所有 type="checkbox" 的 <input> 元素
:submit     $(":submit")        所有 type="submit" 的 <input> 元素
:reset      $(":reset")         所有 type="reset" 的 <input> 元素
:button     $(":button")        所有 type="button" 的 <input> 元素
:image      $(":image")         所有 type="image" 的 <input> 元素
:file       $(":file")          所有 type="file" 的 <input> 元素

:enabled    $(":enabled")   所有激活的 input 元素
:disabled   $(":disabled")  所有禁用的 input 元素
:selected   $(":selected")  所有被選取的 input 元素
:checked    $(":checked")   所有被選中的 input 元素

注意並且選擇器$(‘li:gt(1):lt(3)’),自左向右依次讀，每讀完一次，索引重新計算

jQuery對象和DOM對象相互轉化

+ jQuery對象轉化成DOM對象: $(選擇器)[index]/$(選擇器).get(index)

+ DOM對象轉成jQuery對象:$(DOM對象)

jQuery選擇方法

• 獲取父級元素

1. $(選擇器).parent():找到父級元素，找到一個元素  

2. $(選擇器).parents(過濾條件):找到祖先級,可以傳遞參數找到指定的祖先級元素  

3. $(選擇器).closest(過濾條件):首先看自己是否滿足條件，否則往上依次去找祖先級

4.$(選擇器).offsetParent():獲取定位父級  

5.$(選擇器).parentsUntil():查找當前元素的所有的父輩元素，直到遇到匹配的那個元素爲止。  

• 獲取子代和後代的元素

1. $(選擇器).children(過濾條件):找到指定的直接的孩子

2. $(選擇器).find(過濾條件):找到孩子們可以找到孫子輩8

• 獲取同級的元素

1. 找到前面一個元素:$(選擇器).prev();

2. 找到前面所有元素:$(選擇器).prevAll(過濾條件);

3. 找到後面一個元素:$(選擇器).next();

4. 找到後面所有元素:$(選擇器).nextAll(過濾條件);

5. 找到所有同級元素:$(選擇器).siblings(過濾條件);

6. 找到前面/後面同級元素直到過濾條件爲止：$(選擇器).prevUntil(過濾條件)/$(選擇器).nextUntil(過濾條件);

• 過濾方法

1. $(選擇器).eq(index):找到選擇器選中的第index+1個元素  

2. $(選擇器).filter(過濾條件):找到指定過濾條件的那些元素  

3. $(選擇器).not(過濾條件):除了過濾條件之外那些元素  

4. $(選擇器).has(過濾條件)：保留包含特定後代的元素，去掉那些不含有指定後代的元素。  

• 特殊方法

add():把與表達式匹配的元素添加到jQuery對象中。這個函數可以用於連接分別與兩個表達式匹配的元素結果集。  

addBack(): $('div').find('span').addBack();span div都被選中  

end():$('div').find('span').end():又選中了div  

jQuery獲取大小/距離的方法

注意在jQuery讀元素某些值的時候選中的是第一個元素,在給jquery對象寫值的時候就是隱式迭代

1. $(選擇器).width():元素的寬度

2. $(選擇器).innerWidth():元素的寬度+padding左右

3. $(選擇器).outerWidth():元素的寬度+padding左右+border左右

4. scrollTop() 滾動距離

5. offset():返回值是一個對象{left:*,top:*}獲取元素相對文檔邊界的距離left top

6. position():返回值是一個對象{left:*,top:*}獲取的是元素left top

以上方法可讀可寫

**獲取可視區的大小:$(window).width()/height();文檔的大小:$(document).width()/height();**

jQuery DOM操作

• 獲取內容

1. 獲取/設置元素內所有內容：$(選擇器).html()

2. 獲取/設置元素內的文本內容:$(選擇器).text()

3. 讀取/設置表單元素的value值:$(選擇器).val();  

val()特殊用法 $('input[type=checkbox]').val(['val1','val2'])把value值爲val1和val2的複選框選中,select也可以用  

• 樣式操作

(選擇器).css(′background′,′red′);$(選擇器).css{(}^{\prime }backgroun{d}^{\prime }{,}^{\prime }re{d}^{\prime });$ (選擇器).css({設置多個});

$(‘div’).css(‘width’,’+=10px’);實現累加

• 樣式類操作儘量操作樣式類，少直接操作css屬性

addClass(一個或多個)：添加一個或多個類名  
removeClass(不給參數全部移除，給了會移除指定的類)：移除指定類名或者全部移除  
toggleClass(類名)：切換是否認加上類名  

hasClass(class)：檢查當前的元素是否含有某個特定的類，如果有，則返回true。  

• 屬性操作

attr():讀寫合體 讀取或者設置元素的屬性，不光可以操縱自定義屬性，還可以操縱元素自帶的屬性。  

prop():用法同上，只是在做單選或者多選按鈕的時候一般用prop。  

移除屬性:removeAttr(attr)/removeProp(attr)  

例子：全選反選的案例

獲取索引值

$(選擇器).index('標籤名/類名...'):如果沒有參數,那麼得到是選擇器選中的元素在所有同級的元素中所處的索引位置  
如果有參數那麼得到的結果就是在參數中所處的索引位置

jq遍歷的方法

each

$(選擇器).each(function(i,el){}):i代表遍歷到jq對象對應的索引值，el代表dom對象，遍歷到誰就是誰  

$.each(arr,function(i,val){}) i下標，val代表值  

• 動態創建

創建節點/元素:$('<div>內容</div>');

往元素末尾插入節點/元素:  

主動插入：$(選擇器).append(創建的節點/'<div></div>'):選擇器選中的元素末尾插入  

被動插入:創建的節點.appendTo($(選擇器)):結果同上  

往元素頭部插入節點/元素:  

主動插入：$(選擇器).prepend(創建的節點/'<div></div>'):選擇器選中的元素頭部插入  

被動插入:創建的節點.prependTo($(選擇器)):結果同上  

兄弟元素之後插入節點  

主動插入: $(選擇器).after(節點):往選擇器選中元素之後插入節點  

被動插入:節點.insertAfter($(選擇器)) 結果同上  

兄弟元素之前插入節點  

主動插入: $(選擇器).before(節點):往選擇器選中元素之前插入節點  

被動插入:節點.insertBefore($(選擇器)) 結果同上  

移除元素:$(選擇器).remove();  

清空元素:$(選擇器).empty();

替換節點:$(選擇器).replaceWith($(選擇器)):相當於剪切粘貼。  

$(選擇器).replaceAll($(選擇器)):結果同上，調用順序相反

克隆節點:$(選擇器).clone():只克隆內容，不克隆事件，否則不光克隆內容,克隆事件  
原生js:dom對象.cloneNode(true/'deep');如果不加參數，只克隆標籤，否則裏面內容也克隆

包裹節點：被包裹的.wrap(節點、jq對象)  

被包裹的.wrapInner(節點、jq對象)  

被包裹的.wrapAll(節點、jq對象)  

被包裹的.unWrap()  

data=[

{

    proName:'華爲',

    price:2000,

    num:1000

},{

    proName:'蘋果',

    price:4999,

    num:99

},{


    proName:'三星',

    price:2000,

    num:1
}

]

**動態創建表格,刪除行**

事件處理

• 原生的JS的所有的事件名稱在jq裏都有對應的方法

click() mouseover() mouseout() focus() blur()..... $(選擇器).click(匿名函數體/有名函數名);

• on 綁定事件

$(選擇器).on(evName,fn);  

$(選擇器).on({

    click:function(){},

    mouseover:function(){}
})  

$(選擇器).off():可以所有事件綁定的方式。如果不寫參數，那麼所有事件全部移除，否則就移除指定的off('click mouseover');  

事件委託:$(選擇器).on(evName,function(e){});  

+ one 只執行一次事件

$(選擇器).one(evname,fn)

jQuery的事件對象

e.type:獲取事件類型  

e.target:事件源  

e.currentTarget:相當於this  

e.keyCode/e.which：獲取鍵盤的鍵值  

e.pageX/e.pageY:獲取鼠標的座標  

e.preventDefault():阻止默認行爲  

e.cancelBubble=true/e.stopPropagation()：阻止冒泡  

return false;既阻止冒泡又阻止了默認行爲

動畫

slideUp('fast/slow'/毫秒數,callBack)/slideDown()/slideToggle():上拉下拉

show(參數)/hide(參數)/toggle(參數):顯示隱藏

fadeIn()/fadeOut()/fadeTo()/fadeToggle():淡入淡出

animate動畫

params:一組包含作爲動畫屬性和終值的樣式屬性和及其值的集合  

speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)  

easing:要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 "swing".  

fn:在動畫完成時執行的函數，每個元素執行一次。  

$(選擇器).animate({width:300,opacity:1...},2000,'linear/swing',callBack)  

運動形式擴展：easing.js,如果用了擴展，那麼animate的參數至少要傳3個   

$(選擇器).animate({},time,運動形式);這三個缺一不可

stop(參數)

插件擴展

**extend():$.extend/$.fn.extend()**

擴展jQuery的工具方法:  

$.extend({

    sum:function(arr){

        var n=0;

        $.each(arr,function(index,val){

            n+=val;

        })

        return n;

    }


});

擴展jQuery對象的方法:

$.fn.extend({

    gh:function(arr){

        var arr=arr || ['red','blue'];

        var children=this.children();

        children.filter(':odd').css('background',arr[0]);

        children.filter(':even').css('background',arr[1]);

    },

    zoom:function(){


    }


})

ajax

$.ajax()/$.post()/$.get()

$.post('請求地址','json',function(){});

$.ajax({

    url:請求的地址,

    data:發送到後臺的數據,"name=John&location=Boston"/{name:'John',location:'Boston'}

    dataType:'xml/text/json/jsonp/script/html',

    type:get/post,

    success:function(msg){msg就是後臺返回的數據},

    error:function(){}

})

trigger():自動觸發元素身上的事件,甚至可以觸發自定義事件。

art template 下載;

==================================================

輕量性能高的js模板語法;