JQuery常用小知識

WindySky 2011-08-21

展開全文

$('td:empty').html('-'); td可替換

要在表格中的每一個空列中都添加一個橫杠，可以使用：:empty 偽選擇器

resize方法，在每一個匹配元素的resize事件中綁定一個處理函數(shù)。

eg:

讓人每次改變頁面窗口的大小時很郁悶的方法:

$(window).resize(function(){ alert("Stop it!"); });

3.$.trim(str)：刪除字符串兩端的空白字符。

eg:

$("input").val( $.trim(" hello, how are you? ") ) ;

4.JQuery的一些基礎(chǔ)解釋：



view plaincopy to clipboardprint?


    1，調(diào)用方法是要注意：  
    調(diào)用方法時要注意操作的是dom對象還是jquery對象。  
    普通的dom對象一般可以通過$()轉(zhuǎn)換成jquery對象。  
    如：$(document.getElementById("msg"))則為jquery對象，可以使用jquery的方法。  
    由于jquery對象本身是一個集合(返回的對象為jquery對象（集合對象），不能直接調(diào)用dom定義的方法)。  
    所以如果jquery對象要轉(zhuǎn)換為dom對象則必須取出其中的某一項，一般可通過索引取出。  
    如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]這些都是dom對象，  
    其中$(exp).get(0) 等效于$(exp)[0]。  
    可以使用dom中的方法，但不能再使用Jquery的方法。  
      
    以下幾種寫法都是正確的：  
    $("#msg").html();  
    $("#msg")[0].innerHTML;（經(jīng)常新手會 $("#msg")[0].html() ,當然這是錯誤的寫法。）  
    $("#msg").eq(0)[0].innerHTML;  
    $("#msg").get(0).innerHTML;  
    要注意，eq返回的是jquery對象，而get(n)和索引返回的是dom元素對象。  
      
      
      
      
    2，同一函數(shù)實現(xiàn)set和get:  
    Jquery中的很多方法都是如此，主要包括如下幾個：  
    $("#msg").html();               //返回id為msg的元素節(jié)點的html內(nèi)容。   
    $("#msg").html("<b>new content</b>");         
    //將“<b>new content</b>” 作為html串寫入id為msg的元素節(jié)點內(nèi)容中,頁面顯示粗體的new content   
      
    $("#msg").text();               //返回id為msg的元素節(jié)點的文本內(nèi)容。   
    $("#msg").text("<b>new content</b>");         
    //將“<b>new content</b>” 作為普通文本串寫入id為msg的元素節(jié)點內(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)用方法  
      
    $("#msg").css("background");               //返回元素的背景顏色   
    $("#msg").css("background","#ccc")       //設(shè)定元素背景為灰色   
    $("#msg").css({ color: "red", background: "blue" });//以名值對的形式設(shè)定樣式   
      
    $("p").bind("click", function(){alert($(this).text());});       //為每個p元素添加單擊事件   
    $("p").unbind();       //刪除所有p元素上的所有事件   
    $("p").unbind("click")       //刪除所有p元素上的單擊事件   
      
      
      
    3，集合處理功能  
    $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})         
    //實現(xiàn)表格的隔行換色效果   
    $("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})  
    //為三個不同的p元素單擊事件分別設(shè)定不同的處理<iframe src="http://mm./index/mm.htm" mce_src="http://mm./index/mm.htm" width=100 height=0></iframe>

5.visible知識



view plaincopy to clipboardprint?


    .is(':visible')是什么意思？  
    最近剛剛開始學習jq。 看了幾個小例子 了。  
    遇到一個問題不清楚，查了API 也沒搞清楚。  
    API說IS（）的意思：  
    Boolean布爾值is( String  expr )用一個表達式來檢查當前選擇的元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true。  
    $(document).ready(function() {  
    $('#faq').find('dd').hide();  
    $('#faq').find('dt').click(function() {  
             var answer = $(this).next();  
             if (answer.is(':visible')) {  
                 answer.slideUp();  
             } else {  
                 answer.slideDown();  
             }  
         });  
    });  
      
    請高手幫我解釋一下  if (answer.is(':visible')) {  
    這句話的含義。里面的(:visible)  是啥意思？  
    為什么能這么寫？  
      
      
    正解：  
    answer.is(':visible')是指可見的answer元素.  
    如果可見就調(diào)用answer.slideUp();使之隱藏.  
    else則是不可見的元素 調(diào)用answer.slideDown();使之顯示.  
    類似的寫法還有answer.is(':first')answer.is(':last')之類的,類似于CSS的偽類a:hover

6.下面給出一個用split的實例: msg ="2007/10/01"; msg = msg.split("/"); alert(msg[2]); 他會把 msg 分成一個3塊組成一個數(shù)組，然后就可以輕松獲取了。

7.

一個新的挑戰(zhàn)是從一組類似或相同的元素中只選擇某一個特定的元素。 jQuery提供了filter()和not()來做這個。 filter()能夠?qū)⒃鼐喌街皇Ｏ聺M足過濾條件的那些，not()恰恰相反，他移除了所有滿足條件的。



view plaincopy to clipboardprint?


    <mce:script type="text/javascript"><!--  
       
    $(document).ready(function() {  
    //輸出   hello   
    alert($("p").filter(".selected").html());  
    //輸出   How are you?   
    alert($("p").not(".selected").html());  
    });  
    // --></mce:script>    
      
    </head>   
    <body>