Jquery常用技巧總結(jié)

Jquery常用技巧總結(jié)
1、頁面元素引用
                  jquery的$()引用元素包括通過id、class、元素名以及元素的層級關(guān)系及dom或者xpath條件等方法，且返回的對象為jquery對象（集合對象）;
 
2、Jquery對象與dom對象的轉(zhuǎn)換

普通的dom對象一般可以通過$()轉(zhuǎn)換成jquery對象。

如：$(document.getElementById("msg"))則為jquery對象，可以使用jquery的方法。


    $("#msg").html();
    $("#msg")[0].innerHTML;
    $("#msg").eq(0)[0].innerHTML;
    $("#msg").get(0).innerHTML;

 
3、獲取jQuery集合的某一項(xiàng)

    $("div").eq(2).html();              //調(diào)用jquery對象的方法
    $("div").get(2).innerHTML;       //調(diào)用dom的方法屬性

 
4、同一函數(shù)實(shí)現(xiàn)set和get

    $("#msg").html();              //返回id為msg的元素節(jié)點(diǎn)的html內(nèi)容。
    $("#msg").html("<b>new content</b>");      
    //將"<b>new content</b>" 作為html串寫入id為msg的元素節(jié)點(diǎn)內(nèi)容中,頁面顯示粗體的new content
    $("#msg").text();              //返回id為msg的元素節(jié)點(diǎn)的文本內(nèi)容。
    $("#msg").text("<b>new content</b>");      
    //將"<b>new content</b>" 作為普通文本串寫入id為msg的元素節(jié)點(diǎn)內(nèi)容中,頁面顯示粗體的<b>new content</b>
    $("#msg").height();               //返回id為msg的元素的高度
    $("#msg").height("300");           //將id為msg的元素的高度設(shè)為300
    $("#msg").width();              //返回id為msg的元素的寬度
    $("#msg").width("300");           //將id為msg的元素的寬度設(shè)為300
    $("input").val(");               //返回表單輸入框的value值
    $("input").val("test");           //將表單輸入框的value值設(shè)為test
    $("#msg").click();           //觸發(fā)id為msg的元素的單擊事件
    $("#msg").click(fn);           //為id為msg的元素單擊事件添加函數(shù),同樣blur,focus,select,submit事件都可以有著兩種調(diào)用方法

 
5、集合處理功能
包括兩種形式：

    $("p").each(function(i){this.style.color=['#f00','#0f0','#00f']})      
    //為索引分別為0，1，2的p元素分別設(shè)定不同的字體顏色。

    $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})      
    //實(shí)現(xiàn)表格的隔行換色效果

 

    $("p").click(function(){.html())})              
    //為每個(gè)p元素增加了click事件，單擊某個(gè)p元素則彈出其內(nèi)容

 
6、擴(kuò)展我們需要的功能

    $.extend({
           min: function(a, b){return a < b?a:b; },
           max: function(a, b){return a > b?a:b; }
    });       //為jquery擴(kuò)展了min,max兩個(gè)方法

 
7、支持方法的連寫

    $("p").click(function(){.html())})
    .mouseover(function(){})
    .each(function(i){this.style.color=['#f00','#0f0','#00f']});

 
8、操作元素的樣式

    $("#msg").css("background");              //返回元素的背景顏色
    $("#msg").css("background","#ccc")       //設(shè)定元素背景為灰色
    $("#msg").height(300); $("#msg").width("200");       //設(shè)定寬高
    $("#msg").css({ color: "red", background: "blue" });//以名值對的形式設(shè)定樣式
    $("#msg").addClass("select");       //為元素增加名稱為select的class
    $("#msg").removeClass("select");       //刪除元素名稱為select的class
    $("#msg").toggleClass("select");       //如果存在（不存在）就刪除（添加）名稱為select的class

 
9、完善的事件處理功能

    $("#msg").click(function(){})       //為元素添加了單擊事件
    $("p").click(function(i){this.style.color=['#f00','#0f0','#00f']})
    //為三個(gè)不同的p元素單擊事件分別設(shè)定不同的處理


hover(fn1,fn2)：一個(gè)模仿懸停事件（鼠標(biāo)移動到一個(gè)對象上面及移出這個(gè)對象）的方法。當(dāng)鼠標(biāo)移動到一個(gè)匹配的元素上面時(shí)，會觸發(fā)指定的第一個(gè)函數(shù)。當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會觸發(fā)指定的第二個(gè)函數(shù)，這個(gè)函數(shù)用的比較多，比如離開文本框的時(shí)候，框框變顏色，或者驗(yàn)證什么的，都很適用。

    //當(dāng)鼠標(biāo)放在表格的某行上時(shí)將class置為over，離開時(shí)置為out。
    $("tr").hover(function(){
    $(this).addClass("over");
    },
           function(){
           $(this).addClass("out");
    });


ready(fn):當(dāng)DOM載入就緒可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)

    $(document).ready(function(){})
    //頁面加載完畢提示"Load Success",相當(dāng)于onload事件。與$(fn)等價(jià)

 

    toggle(evenFn,oddFn): 每次點(diǎn)擊時(shí)切換要調(diào)用的函數(shù)。如果點(diǎn)擊了一個(gè)匹配的元素，則觸發(fā)指定的第一個(gè)函數(shù)，當(dāng)再次點(diǎn)擊同一元素時(shí)，則觸發(fā)指定的第二個(gè)函數(shù)。隨后的每次點(diǎn)擊都重復(fù)對這兩個(gè)函數(shù)的輪番調(diào)用。

    //每次點(diǎn)擊時(shí)輪換添加和刪除名為selected的class。
          $("p").toggle(function(){
                 $(this).addClass("selected");   
          },function(){
                 $(this).removeClass("selected");
          });

    trigger(eventtype): 在每一個(gè)匹配的元素上觸發(fā)某類事件。

$("p").trigger("click");              //觸發(fā)所有p元素的click事件

    bind(eventtype,fn)，unbind(eventtype): 事件的綁定與反綁定 從每一個(gè)匹配的元素中（添加）刪除綁定的事件。

    $("p").bind("click", function(){.text());});       //為每個(gè)p元素添加單擊事件
    $("p").unbind();       //刪除所有p元素上的所有事件$("p").bind("click", function(){.text());});       //為每個(gè)p元素添加單擊事件
    $("p").unbind();       //刪除所有p元素上的所有事件
    $("p").unbind("click")       //刪除所有p元素上的單擊事件
    $("p").unbind("click")       //刪除所有p元素上的單擊事件

 
10   幾個(gè)實(shí)用特效功能

其中toggle()和slidetoggle()方法提供了狀態(tài)切換功能。 如toggle()方法包括了hide()和show()方法。 slideToggle()方法包括了slideDown()和slideUp方法。

 
11    幾個(gè)有用的jQuery方法
$.browser.瀏覽器類型：檢測瀏覽器類型。有效參數(shù)：safari, opera, msie, mozilla。如檢測是否ie：$.browser.isie，是ie瀏覽器則返回true。 $.each(obj, fn)：通用的迭代函數(shù)?？捎糜诮频氐鷮ο蠛蛿?shù)組（代替循環(huán)）。

$.each( [0,1,2], function(i, n){ ; });

等價(jià)于
 

    var tempArr=[0,1,2];
    for(var i=0;i<temparr.length;i++){ ;="" }="" <="" pre="">
        
        <p>也可以處理json數(shù)據(jù)，如</p>
        
    <pre class="brush: javascript;">$.each( { name: "John", lang: "JS" }, function(i, n){ ; });
    </pre>
        
        <p>結(jié)果為：</p>
        
    <pre class="brush: javascript;">Name:name, Value:John
    Name:lang, Value:JS
    </pre>
        
        <p>$.extend(target,prop1,propN)：用一個(gè)或多個(gè)其他對象來擴(kuò)展一個(gè)對象，返回這個(gè)被擴(kuò)展的對象。這是jquery實(shí)現(xiàn)的繼承方式。</p>
        
    <pre class="brush: javascript;">$.extend(settings, options);      
    //合并settings和options，并將合并結(jié)果返回settings中，相當(dāng)于options繼承setting并將繼承結(jié)果保存在setting中。
    var settings = $.extend({}, defaults, options);
    //合并defaults和options，并將合并結(jié)果返回到setting中而不覆蓋default內(nèi)容。
    </pre>
        
        <p>可以有多個(gè)參數(shù)（合并多項(xiàng)并返回）
    $.map(array, fn)：數(shù)組映射。把一個(gè)數(shù)組中的項(xiàng)目(處理轉(zhuǎn)換后)保存到到另一個(gè)新數(shù)組中，并返回生成的新數(shù)組。</p>
        
    <pre class="brush: javascript;">var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
    // tempArr內(nèi)容為：[4,5,6]
    var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
    // tempArr內(nèi)容為：[2,3]
    </pre>
        
        <p>$.merge(arr1,arr2):合并兩個(gè)數(shù)組并刪除其中重復(fù)的項(xiàng)目。
    如：</p>
    <pre class="brush: javascript;">$.merge( [0,1,2], [2,3,4] )       //返回[0,1,2,3,4]
    </pre>
        <p>
    $.trim(str)：刪除字符串兩端的空白字符。
    如：</p>
    <pre class="brush: javascript;">$.trim("  hello, how are you?   ");        //返回"hello,how are you? "
    </pre>
        
        <li>解決自定義方法或其他類庫與jQuery的沖突</li>
        
        <p>很多時(shí)候我們自己定義了$(id)方法來獲取一個(gè)元素，或者其他的一些js類庫如prototype也都定義了$方法，如果同時(shí)把這些內(nèi)容放在一起就會引起變量方法定義沖突，Jquery對此專門提供了方法用于解決此問題。
    使用jquery中的jQuery.noConflict();方法即可把變量$的控制權(quán)讓渡給第一個(gè)實(shí)現(xiàn)它的那個(gè)庫或之前自定義的$方法。之后應(yīng)用 Jquery的時(shí)候只要將所有的$換成jQuery即可，如原來引用對象方法$("#msg")改為jQuery("#msg")。</p>
    <pre class="brush: javascript;">jQuery.noConflict();
    // 開始使用jQuery
    jQuery("div   p").hide();
    // 使用其他庫的 $()
    $("content").style.display = 'none';
    </pre>
        
      </temparr.length;i++){>


上面都是關(guān)于常見jquery使用的總結(jié)，對于新手而言的話，很適合上手，很經(jīng)典，記錄下來，方便大家學(xué)習(xí)。






作者：chen.yu
深信服三年半工作經(jīng)驗(yàn)，目前就職游戲廠商，希望能和大家交流和學(xué)習(xí),
微信公眾號：編程入門到禿頭 或掃描下面二維碼
零基礎(chǔ)入門進(jìn)階人工智能(鏈接)