$(document).ready(function()


頁面加載完成后開始運行do stuff when DOM is ready 中的語句!
    $(document).ready(function() {
       // do stuff when DOM is ready
       });

   選擇器
   $(“a”)是一個jquery的選擇器(selector)
   $("")其中的字段就是元素的標記。比如$("div")就是<div></div>
   click是函數對象的一個方法。方法為點擊鼠標事件!
     例:
     $(document).ready(function() {
     $("a").click(function() {
        alert("Hello world!");
         });
       });

   $("div").click $("div")就是頁面中所有的 div標簽 這句話就是給所有的標簽為div的元素 綁定了一個click事件 即當所有div 被鼠標單     擊的時候 執行 alert("Hello World!");


   選擇器(selector)和事件(events)
   選擇DOM元素
   選擇一個ID為orderedlist的元素,相當於javascript中的document.getElementById("orderedlist"),jquery中只需要$("#id")其中的id為元素的ID,元素為任意元素!addClass為把這個元素的css的class改為red
   $(document).ready(function() {
    $("#orderedlist").addClass("red");
   });

       $("#id > xx") 這種表示ID的元素下的所有元素標記為xx的元素設置CSS的Class, id為元素的id xx為元素的標記例<div><li><a>等!
      $(document).ready(function() {
         $("#orderedlist > li").addClass("blue");
        });

$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
       $("#form")[0].reset();
});
});




這個代碼只是ID為form的表單執行reset()方法。但是萬一你有很多個表單需要執行呢?那么你可以這樣寫:
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
       $("form").each(function() {
         this.reset();
       });
});
});

另外一個你必須面對的問題是選擇某個或某幾個元素。Jquery提供了filter()和not()方法。當filter()是過濾一些適合filter()表達式元素,而not()是刪除和not()表達式相反的元素。當你想選擇所有的li元素,並且不包含ul子元素呢?你可以這樣寫:
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});

find(expr) 在匹配的對象中繼續查找符合表達式的對象
<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>

Query代碼及功能:
function jq(){
    alert($("p").find("#a").html())
}
在$("p")對象中查找id為a的對象

存疑:

結果是除了包含ul子元素的li,其他所有的li都得到了一個border.可能你也想選擇有name屬性的anchor(<a>):
$(document).ready(function() {
$("a[@name]").background("#eee");
});




要匹配屬性的值(value),我們可以用”*=”來代替”=”
$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
       // do something with all links that point somewhere to /content/gallery
});
});




直到現在,我們已經學到了很多選擇器的使用。這里還有種情況你需要選擇前一個或后一個元素。想一想starterkit.htm里的FAQ,當你click問題的時候,它是怎么實現隱藏和顯示的呢?代碼是這樣的:
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
      var answer = $(this).next();
      if (answer.is(':visible')) {
         answer.slideUp();
      } else {
         answer.slideDown();
      }
    });
});




因為上面只有唯一一個選擇器(#faq),我們用chain來減少代碼的長度和提高代碼的易讀性和表現性.這里要說明一下,如果按原文翻譯過來我想很多人都看不懂,感覺他自己也沒怎么說明白。我說說我自己的理解:
‘dd’和‘dt’都是#faq的子元素,find()的作用就是找到它的子元素。End()應該和next()搭配的,end()實質上是把 ‘dd’過濾了,也就是next()的時候實質上是參考的’dt’。這樣每個’dt’的next就是‘dd’,挺容易實現的。要是還不明白你可以邊參考邊照着做一遍。

除了同屬元素外,我們也可以選擇父元素:
$(document).ready(function() {
$("a").hover(function() {
       $(this).parents("p").addClass("highlight");
}, function() {
       $(this).parents("p").removeClass("highlight");
});
});



很容易看懂,p就是a的父元素。

 

(document)意思是說,獲取整個網頁文檔對象(類似的於window.document),$(document).ready意思就是說,獲取文檔對象就緒的時候。

$(document).ready(function() {
// do stuff when DOM is ready//當文檔載入后從此處開始執行代碼
});


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM