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

（4）代码分析

在jQuery库中，通过简单的几行代码，就可以实现传统JavaScript大量代码完成的功能，节省开发者的时间，提高工作效率。

上一章目录下一章