jQuery 語法LOGIN

jQuery 語法

透過 jQuery,您可以選取(查詢,query) HTML 元素,並對它們執行"操作"(actions)。


jQuery 語法

#在jQuery 程式中,不管是頁面元素的選擇,或是內建的功能函數,都是以美元符號「$」來起始的,而這個「$」就是jQuery當中最重要且獨有的對象:jQuery對象,所以我們在頁面元素選擇或執行功能函數的時候就可以這麼寫:

$(function(){});           //执行一个匿名函数
$('#box');                    //进行执行的ID元素选择
$('#box').css('color','red');         //执行函数功能

由於「$」本身就是jQuery 物件的縮寫,那麼也就是說上面的程式碼我們可以寫成如下形式:

jQuery(function(){});
jQuery('#box');
jQuery('#box').css('color','red');


##實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script>
        $(function(){
            $('#box').css('color','red');
        });
//        alert($===jQuery);
 </script>
</head>
<body>
<div id="box">jQuery语法</div>
</body>
</html>

jQuery 的載入模式

##我們之前的程式碼一直在使用$(function(){});這段程式碼進行首尾包裹,你知道為什麼要這麼做嗎?

原因是我們的jQuery 庫檔案是在body元素之前載入的,我們必須等待所有的網頁程式碼載入之後,才能執行載入JavaScript程式碼,否則就無法取得

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script>
            $('#box').css('color','red');
    </script>
</head>
<body>
<div id="box">jQuery语法</div>
</body>
</html>

所以我們先前的JavaScript提供了我們:

window.onload=function(){};           //JavaScript等待加载

我們的jQuery給我們了:

$(document).ready(function(){});             //jQuery等待加载


兩者的差異:

1. 執行時機

window.onload :必須等待網頁載入完畢(包含圖片)才能執行包裹程式碼。

$(document).ready(function(){}) :只要等待網頁中的DOM結構載入完畢,就能執行包裹的程式碼。效果更高


#2.執行次數

window.onload 只能執行一次,如果第二次,那麼第一次的執行就會被覆寫

$(document).ready(function(){}) :無論執行多少次都不會被覆寫

範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script>
//        window.onload=function(){
//            alert(1)
//        };
//        window.onload=function(){
//            alert(2)
//        };
 $(document).ready(function(){
            alert(1)
        });
         $(document).ready(function(){
              alert(2)
         })
    </script>
</head>
<body>
<div id="box">jQuery语法</div>
</body>
</html>


##3.簡寫

#window.onload  無

$(document).ready(function(){})     $(function (){});


在實際的應用程式中,我們很少直接去使用window.onload,因為他需要等待圖片之類的大型元素載入完畢之後才能執行JS程式碼,如果遇到網速​​較慢的情況下,頁面已經全部展開,圖片還在緩慢加載,這時頁面上任何的JS交互功能全部處於假死狀態,比如一些下拉菜單什麼的。



下一節
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <script> // window.onload=function(){ // alert(1) // }; // window.onload=function(){ // alert(2) // }; // $(document).ready(function(){ // alert(1) // }); // $(document).ready(function(){ // alert(2) // }) </script> </head> <body> <div id="box">jQuery语法</div> </body> </html>
章節課件