jQuery基本概念

在你繼續查看更多的jQuery範例之前, 有些基本概念你必須要先了解

錢字符號 Dollar Sign ($)

原jQuery程式碼
jQuery(document).ready(function(){
    //執行某些程式..
});

jQuery預設是用"$"來當作"jQuery"的簡寫(把jQuery用$符號代替)
$(document).ready(function(){
    //執行某些程式..
});

用javascript內建的方法去選擇元素
<div id="ele">This is a test</div>
var e = document.getElementById("ele");

用jQuery去選擇元素
<div id="ele">This is a test</div>
var e = $("#ele");

 

Document Ready

很多時候我們會在頁面載入完成後執行javascript, 程式可以寫成像
window.onload = function(){ 
    alert("Document ready!"); 
}

但有一個缺點, window.onload只有在所有資料(除了頁面外還包括圖片等)完全載入後才會觸發,
如果我們要在文件物件模型架構(DOM hierarchy)完成後就執行程式呢? 程式可以這樣寫
$(document).ready(function(){
    //在此執行你的程式
});

 

id選擇器 id selector (#id)

jQuery用id屬性去辨識在頁面裡每個不同的元素
範例選擇某個元素然後改變它的字型和文字
範例程式碼 Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function (){
    /* select elements and assign to variables */
    var t1 = $("#text1"), t2 = $("#text2"), t3 = $("#text3");
    var b1 = $("#btn1"), b2 = $("#btn2"), b3 = $("#btn3"), b4 = $("#btn4");

    /* bind click event */
    b1.click(function(){    
        t1.css("color", "orange");       /* change color of text1 to orange */
    });    

    b2.click(function(){    
        t2.css("font-style", "italic");  /* change font size of text1 to 18px */
    });    

    b3.click(function(){    
        /* change text of text3 */ 
        t3.text("George did not give them back car and house"); 
        t3.css("font-size", "20px");
    });    

    b4.click(function(){    
        t1.removeAttr("style"); /* remove all css */
        t2.removeAttr("style");
        t3.removeAttr("style");
        t3.text("George borrows car and house from them");
    });    
});
</script>

<!-- HTML -->
<a name="#id-selector"></a>
<div id="text1">Jhonny has a car</div>
<div id="text2">Marry has a house</div>
<div id="text3">George borrows car and house from them</div>
<button type="button" id="btn1">選擇第一行文字</button>&nbsp;
<button type="button" id="btn2">選擇第二行文字</button>&nbsp; 
<button type="button" id="btn3">選擇第三行文字</button>&nbsp; 
<button type="button" id="btn4">重設</button>


線上測試程式

comments powered by Disqus