捕鱼24小时上下

書名： jQuery權威指南（第2版）
作者名：陶國榮著
本章字數： 1343字
更新時間： 2018-12-31 23:37:04

1.4 jQuery簡單應用

在介紹使用jQuery 開發簡單應用之前，首先需要了解如何使用jQuery訪問DOM元素，如何將DOM對象轉化成jQuery對象，然后通過控制轉成的jQuery對象，實現各類應用的功能。

1.4.1 jQuery訪問DOM對象

1.什么是DOM對象

每一個頁面都是一個DOM（Document Object Model，文本對象模型）對象，通過傳統的JavaScript方法訪問頁面中的元素，就是訪問DOM對象。

例如，頁面中有兩個<div>標記元素如下：

<div id="Tmp">測試文本</div>
<div id="Out"></div>

通過下面的JavaScript代碼可以訪問DOM對象，以及獲取或設置其內容值：

var tDiv=document.getElementById("Tmp"); //獲取DOM對象
var oDiv=document.getElementById("Out"); //獲取DOM對象
var cDiv=tDiv.innerHTML;                 //獲取DOM對象中的內容
oDiv.innerHTML=cDiv;                     //設置DOM對象中的內容

如果執行上面的JavaScript代碼，將在ID為“divOut”的標記中顯示ID為“Tmp”的標記內容。

2.什么是jQuery對象

在jQuery庫中，通過本身自帶的方法獲取頁面元素的對象，稱為jQuery對象；為了同樣實現在ID為“Out”的標記中顯示ID為“Tmp”的標記內容，采用jQuery訪問頁面元素的方法，其實現的代碼如下：

var tDiv=$("#Tmp");   //獲取jQuery對象
var oDiv=$("#Out");   //獲取jQuery對象
var cDiv=tDiv.html(); //獲取jQuery對象中的內容
oDiv.html(cDiv);      //設置jQuery對象中的內容

通過代碼對比可以看出，jQuery對象訪問方法比DOM對象訪問方法更簡單、高效，它們都實現同樣的功能。

1.4.2 jQuery控制DOM對象

在介紹使用jQuery控制DOM對象前，先通過一個簡單的示例，說明如何用傳統的JavaScript方法訪問DOM對象。

示例1-3 控制DOM對象

（1）功能描述

在頁面中，用戶輸入姓名、性別和婚姻狀況，單擊“提交”按鈕后，將獲取到的數據信息顯示在頁面<div>標記中。

（2）實現代碼

新建一個HTML文件1-3.html,加入如下代碼：

<html>
<head>
    <title>控制DOM對象</title>
    <style type="text/css">
           .iframe{ border:solid 1px #888;font-size:13px;}
           .title{ padding:6px;background-color:#EEE;}
           .content{ padding:8px;font-size:12px;}
           .tip{ background-color:#EEE;display:none; font-size:12px;padding:8px;}
           .txt{ border:solid 1px #888;}
           .btn{ border:solid 1px #888;width:60px;}
           .w260{ width:260px;}
    </style>
    <script type="text/javascript">
         function btn_Click(){
          //獲取文本框的值
         var oTxtValue=document.getElementById("Text1").value;
          //獲取單選框按鈕值
         var oRdoValue=(Radio1.checked)·"男":"女";
          //獲取復選框按鈕值
         var oChkValue=(Checkbox1.checked)·"已婚":"未婚";
          //顯示提示文本元素
　　　　 document.getElementById("Tip").style.display="block";
          //設置文本元素的內容
　　　　 document.getElementById("Tip").innerHTML=
　　　　 oTxtValue+"<br>"+oRdoValue+"<br>"+oChkValue;
　　　　 }
    </script>
</head>
<body>
<div class="iframe">
   <div class="title">請輸入如下信息</div>
   <div class="content">
       姓名：<input id="Text1" type="text" class="txt"/><br />
       性別：<input id="Radio1" name="rdoSex" type="radio" value="男" />男
             <input id="Radio2" name="rdoSex" type="radio" value="女" />女<br />
       婚否：<input id="Checkbox1" type="checkbox" /><br /><br />
             <input id="btnSubmit" type="button" value="提 交" class="btn"
       onclick="btn_Click();" /><br /><br />
   </div>
   <div id="Tip" class="tip"></div>
</div>
</body>
</html>

以上代碼使用傳統的JavaScript方法獲取用戶輸入的信息，并保存到變量中，最后通過document.getElementById("Tip").innerHTML方法顯示所有的數據信息。

下面將示例1-3中的JavaScript代碼進行修改，引入jQuery庫，通過jQuery中的方法獲取元素的值，并將獲取的數據顯示出來。其修改后的JavaScript代碼如下所示：

<script language="javascript" type="text/javascript"
        src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
   $("#btnSubmit").click(function(){//獲取文本框的值
     var oTxtValue=$("#Text1").val();
     //獲取單選框按鈕值
     var oRdoValue=$("#Radio1").is (":checked")·"男":"女";
     //獲取復選框按鈕值
     var oChkValue=$("#Checkbox1").is (":checked")·"已婚":"未婚";
     //顯示提示文本元素和內容
     $("#Tip").css("display","block").html(oTxtValue+"<br>"+oRdoValue+"<br>"+oChkValue);
     })
   })
</script>

（3）頁面效果

HTML文件1-3.html，最終實現的頁面效果如圖1-4所示。

圖1-4 控制jQuery對象

（4）代碼分析

在修改后的JavaScript代碼中，$("#Text1").val()在jQuery庫中表示獲取ID號為“Text1”的值；$("#Radio1").is (":checked")表示ID號為“Radio1”的單選按鈕是否被選中，如果選中返回“男”，否則返回“女”。

可以看出，通過jQuery庫中的方法訪問或控制頁面中的元素比使用傳統的JavaScript代碼更簡潔，并且還兼容各種瀏覽器。

1.4.3 jQuery控制頁面CSS

jQuery框架中通過自帶JavaScript編程，提供全部CSS 3下的選擇器，開發者可以首先定義自己的樣式文件，然后通過jQuery中的addClass()方法，將該樣式輕松地添加到頁面中指定的某元素中，而不用考慮瀏覽器的兼容性。

下面通過一個簡單的示例介紹如何使用jQuery中的toggleClass(className)方法實現頁面樣式的動態切換功能。

示例1-4 jQuery控制CSS樣式

（1）功能描述

在頁面中，增加一個<div>元素標記，用戶單擊該元素時，變換其字體和背景色，再次單擊時，恢復其初始的字體和背景色。

（2）實現代碼

新建一個HTML文件1-4.html,加入如下代碼：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery事件的鏈式寫法</title>
    <script src="JScript/jquery-1.8.2.min.js"
            type="text/javascript"></script>
    <style type="text/css">
       .iframe{ border:solid 1px #888;font-size:13px;}
       .defcol{ padding:6px;background-color:#EEE;}
       .curcol{ padding:6px;background-color:#CCC;color:#FFF}
    </style>
    <script type="text/javascript">
        $(function() {
            $(".defcol").click(function() {
                $(this).toggleClass("curcol");
            });
        });
    </script>
</head>
<body>
   <div class="iframe">
       <div class="defcol">標題</div>
   </div>
</body>
</html>

（3）頁面效果

HTML文件1-4.html執行后，最終實現的頁面效果如圖1-5所示。

圖1-5 jQuery控制CSS