JQuery控制页面及操作DOM

来源：互联网发布：味蕾之诗淘宝不卖了吗编辑：程序博客网时间：2024/06/06 16:04

1.JQuery的特点

jQuery是一个简洁快速的JavaScript脚本库，它能让你在网页上简单的操作文档、处理事件、运行动画效果或者添加异步交互。jQuery的设计会改变你写JavaScript代码的方式，提高我们的编程效率。jQuery主要特点如下：

代码精致小巧

jQuery是一个轻量级的JavaScript脚本库，其代码非常小巧，最新本版的jQuery库文件压缩之后只有20K左右。在网络盛行的今天，提高网站用户的体验性显的尤为重要，小巧的jQuery完全可以做到这一点。

强大的功能函数

过去在写JavaScript代码时，如果没有良好的基础，是很难写出复杂的JavaScript代码，而且JavaScript是不可编译的语言，在复杂的程序结构中调试错误是一件非常痛苦的事情，大大降低了开发效率。使用jQuery的功能函数，能够帮助开发人员快速地实现各种功能,而且会让代码优雅简洁，结构清晰。

跨浏览器

关于JavaScript代码的浏览器兼容问题一直是Web开发人员的噩梦，经常一个页面在IE浏览器下运行正常，但在Firefox下确莫名奇妙的出现问题，往往开发人员要在一个功能上针对不同的浏览器编写不同的脚本代码，这对于开发人员来讲是一件非常痛苦的事情。jQuery将开发人员从这个噩梦中解脱出来，jQuery具有良好的兼容性，它兼容各大主流浏览器，支持的浏览器包括 IE 6.0+, Firefox 1.5+, Safari 2.0+, Opera 9.0+。

链式的语法风格

jQuery可以对元素的一组操做进行统一的处理，不需要从新获取对象。也就是说可以基于一个对象进行一组操作，这种方式精简了代码量，减小了页面体积，有助于浏览器快速加载页面，提高用户的体验性。

插件丰富

除了jQuery本身带有的一些特效外，可以通过插件实现更多的功能，如表单验证、拖放效果、Tab导航条、表格排序、树型菜单以及图像特效等。网上的jQuery插件很多，可以直接下载下来使用，而且插件将JS代码和HTML代码完全分离，便于维护。

2.JQuery控制页面

对元素内容和值进行操作：

jQuery提供了对元素的内容和值进行操作的方法，其中，元素的值是元素的一种属性，大部分元素的值都对应value属性。下面我们再来对元素的内容进行介绍。
   元素的内容是指定义元素的起始标记和结束标记中间的内容，又可分为文本内容和HTML内容。那么什么是元素的文本内容和HTML内容？我们通过下面这段来说明。
<div>
   <p>测试内容</p>
</div>
   在这段代码中，div元素的文本内容就是“测试内容”，文本内容不包含元素的子元素，只包含元素的文本内容。而“<p>测试内容</p>”就是<div>元素的HTML内容，HTML内容不仅包含元素的文本内容，而且还包含元素的子元素。

1．对元素内容操作

由于元素内容又可分为文本内容和HTML内容，那么，对元素内容的操作也可以分为对文本内容操作和对HTML内容进行操作。下面分别进行详细介绍。

   （1）对文本内容操作
   jQuery提供了text()和text(val)两个方法用于对文本内容操作，其中text()用于获取全部匹配元素的文本内容，text(val)用于设置全部匹配元素的文本内容。例如，在一个HTML页面中，包括下面3行代码。
<div>
<span id="clock">当前时间：2011-07-06 星期三 13:20:10</span>
</div>
   要获取div元素的文本内容，可以使用下面的代码：
$("div").text();
   得到的结果为：当前时间：2011-07-06 星期三 13:20:10
   要重新设置div元素的文本内容，可以使用下面的代码：
$("div").text("我是通过text()方法设置的文本内容");
   这时，再应用“$("div").text();”获取div元素的文本内容时，将得到以下内容：
我是通过text()方法设置的文本内容

（2）对HTML内容操作

   jQuery提供了html()和html(val)两个方法用于对HTML内容操作，其中html()用于获取第一个匹配元素的HTML内容，html(val)用于设置全部匹配元素的HTML内容。例如，在一个HTML页面中，包括下面3行代码。
<div>
<span id="clock">当前时间：2011-07-06 星期三 13:20:10</span>
</div>
   要获取div元素的HTML内容，可以使用下面的代码：
   alert($("div").html());
   得到的结果如图所示。

要重新设置div元素的HTML内容，可以使用下面的代码：
$("div").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容</span>");
这时，再应用“$("div").html();”获取div元素的HTML内容时，将得到如图所示的内容

2．对元素值操作
jQuery提供了3种对元素值操作的方法，如表示。

一个小例子

<html><head><title>jq4.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><div id="div1"><span id="clock">今天是个难忘的日子!</span></div><script type="text/javascript" src="js/jquery-2.0.2.js"></script></head><script type="text/javascript"><span style="color:#CC0000;">$(document).ready</span>(function() {//应用此种写法的时候后面的input:text值和select选中的值无法取到,因为都被定义在这个函数的后面alert($("div").html());alert($("div").text());alert($("input:text").val());//显示未定义alert($("select").val());  //显示未定义var ss = $("<p></p>");ss.html("<span style='color:red'>1这首歌曲很好听</span>");$("body").append(ss);});</script><script><span style="color:#CC0000;">$(function()</span> {alert($("div").html());alert($("div").text());alert($("input:text").val());alert($("select").val());$(document).ready(function() {var $p = $("<p></p>");$p.html("<span style='color:blue'>2这首歌曲很好听</span>");$("body").append($p);});});</script><body><input type="text" name="name1" value="111"><select><option selected>北京</option><option>上海</option><option>武汉</option></select></body></html>

注意函数体的写法

对DOM节点进行操作

了解JavaScript的读者应该知道，通过JavaScript可以实现对DOM节点的操作，例如查找节点、创建节点、插入节点、复制节点或是删除节点，不过比较得复杂。jQuery为了简化开发人员的工作，也提供了对DOM节点进行操作的方法，下面进行详细介绍。

1．查找节点

通过jQuery提供的选择器可以轻松实现查找页面中的任何节点。关于jQuery的选择器我们已经在上一节中进行了详细介绍，读者可以参考“jQuery的选择器”实现查找节点。

2．创建节点

创建元素节点包括两个步骤，一是创建新元素，二是将新元素插入到文档中（即父元素中）。例如，要在文档的body元素中创建一个新的段落节点可以使用下面的代码：

<script type="text/javascript">    $(document).ready(function(){        //方法一        var $p=$("<p></p>");        $p.html("<span style='color:#FF0000'>方法一添加的内容</span>");        $("body").append($p);        //方法二        var $txtP=$("<p><span style='color:#FF0000'>方法二添加的内容</span></p>");        $("body").append($txtP);        //方法三        $("body").append("<p><span style='color:#FF0000'>方法三添加的内容</span></p>");        //弹出新添加的段落节点p的文本内容        alert($("p").text());    });</script>

3．插入节点
在创建节点时，我们应用了append()方法将定义的节点内容插入到指定的元素。实际上，该方法是用于插入节点的方法，除了append()方法外，jQuery还提供了几种插入节点的方法。这一节我们将详细介绍。在jQuery中，插入节点可以分为在元素内容部插入和在元素外部插入两种，下面分别进行介绍。

（1）在元素内部插入

在元素内部插入就是向一个元素中添加子元素和内容。jQuery提供了如表所示的在元素内部插入的方法。

从表中可以看出append()方法与prepend()方法类似，所不同的是prepend()方法将添加的内容插入到原有内容的前面。
   appendTo()实际上是颠倒了append()方法，例如下面这句代码：
$("<p>A</p>").appendTo("#B");           //将指定内容添加到id为B的元素中
   等同于：
$("#B").append("<p>A</p>");             //将指定内容添加到id为B的元素中
   不过，append()方法并不能移动页面上的元素，而appendTo()方法是可以的，例如下面的代码：
$("#B").appendTo("#A");           //移动B元素到A元素的后面
append()方法是无法实现该功能的，注意两者的区别。

一个小例子：

<html>  <head>    <title>jq1.html</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <script type="text/javascript" src="js/jquery-2.0.2.js"></script>  </head>  <script type="text/javascript">  $(function(){var str1 =  $("#div1").text(); //获取div1的文本内容     var str2 = $("#div2").text();$("#div1").click(function(){  //点击触发的函数 $(this).append($("#img2"));将id为img2的图片添加到div1 //$("#img2").appendTo("#img1");//将img2元素移动到img1元素的后面});$("#div2").click(function(){$("#img1").appendTo(this);//将img1元素移动到div2});  });  </script>  <body>  <div id = "div1" style="background-color:red;width:600px;height:300px">我是第一层  <img src="images/1.jpg" width="141" height="181" id="img1">   </div>   <div id = "div2" style="background-color:green;width:600px;height:300px">我是第二层   <img src="images/2.jpg" width="178" height="163" id="img2"></div>  </body></html>

未点击层之前的效果图：

点击第一层后的效果图：

点击第二层后的效果图：

（2）在元素外部插入

在元素外部插入就是将要添加的内容添加到元素之前或元素之后。jQuery提供了如表所示的在元素外部插入的方法。

4．删除、复制与替换节点

   在页面上只执行插入和移动元素的操作是远远不够的，在实际开发的过程中还经常需要删除、复制和替换相应的元素。下面将介绍如何应用jQuery实现删除、复制和替换节点。
   删除节点
   jQuery提供了两种删除节点的方法，分别是empty()和remove([expr])方法，其中，empty()方法用于删除匹配的元素集合中所有的子节点，并不删除该元素；remove([expr])方法用于从DOM中删除所有匹配的元素。例如，在文档中存在下面的内容：

div1：<div id="div1"><span style="color:#900">谁言寸草心，报得三春晖</span></div>div2：<div id="div2"><span style="color:#900">谁言寸草心，报得三春晖</span></div>

执行下面的jQuery代码后，将得到如图所示的运行结果。

<script type="text/javascript">        $(document).ready(function() {            $("#div1").empty();        //调用empty()方法删除div1的的所有子节点    $("#div2").remove();        //调用remove()方法删除id为div2的元素        });</script>

复制节点

jQuery提供了clone()方法用于复制节点，该方法有两种形式，一种是不带参数，用于克隆匹配的DOM元素并且选中这些克隆的副本；另一种是带有一个布尔型的参数，当参数为true时，表示克隆匹配的元素以及其所有的事件处理并且选中这些克隆的副本，当参数为false时，表示不复制元素的事件处理。
例如，在页面中添加一个按钮，并为该按钮绑定单击事件，在单击事件中复制该按钮，但不复制它的事件处理，可以使用下面的jQuery代码：

<script type="text/javascript">    $(function() {        $("input").bind("click",function() {          //为按钮绑定单击事件            $(this).clone().insertAfter(this);        //复制自己但不复制事件处理        });    });</script>

运行上面的代码，当单击页面上的按钮时，会在该元素之后插入复制后的元素副本，但是复制的按钮没有复制事件，如果需要同时复制元素的事件处理，可用clone(true)方法代替。

一个小例子：

<html><head><title>jq1.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="js/jquery-2.0.2.js"></script></head><script type="text/javascript">$(function() {var str1 = $("#div1").text(); //获取层的文本字符串不带参数时是取值var str2 = $("#div2").text();$("#div1").click(function() {$(this).after($("#img2").clone());});$("#div2").click(function() {$("#img1").clone().insertAfter($(this));});});</script><body><div id="div1" bgcolor="green"><img src="images/1.jpg" width="141" height="181" id="img1"></div><div id="div2" bgcolor="red"><img src="images/2.jpg" width="178" height="163" id="img2"></div></body></html>

点击之前的效果：

点击背景为红色的层若干次后的效果

点击背景为绿色的层若干次后的效果图

替换节点

jQuery提供了两个替换节点的方法，分别是replaceAll(selector)和replaceWith(content)。其中，replaceAll(selector)方法用于使用匹配的元素替换掉所有selector匹配到的元素；replaceWith(content)方法用于将所有匹配的元素替换成指定的HTML或DOM元素。这两种方法的功能相同，只是两者的表现形式不同。
例如，使用replaceWith()方法替换页面中id为div1的元素，以及使用replaceAll()方法替换id为div2的元素可以使用下面的代码：

<script type="text/javascript">    $(document).ready(function() {        $("#div1").replaceWith("<div>replaceWith()方法的替换结果</div>");    //替换id为div1的<div>元素       $("<div>replaceAll()方法的替换结果</div>").replaceAll("#div2");        //替换id为div2的<div>元素    });</script>

运行上面的代码，将显示如图所示的运行结果。从该图中可以看出，replaceWith()方法和replaceAll()方法的执行结果是一样的。

对元素属性进行操作

jQuery提供了如表所示的对元素属性进行操作的方法。

一个小例子

<html><head><title></title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="js/jquery-2.0.2.js"></script></head><script type="text/javascript">$(function() {var str1 = $("#div1").text(); //获取层的文本字符串不带参数时是取值var str2 = $("#div2").text();$("#div1").click(function() {$("#div1").replaceWith("<div >哈哈哈<img src='images/3.jpg'/></div>");});$("#div1").bind("click", function() {$("#div1").replaceWith("<div >哈哈哈</div>");});$("#div2").click(function() {$("#div2").bind("click", function() {alert("你点击了第二层");});});});</script><body><div id="div1" style="background-color:red;width:600px;height:300px">我是第一层<img src="images/1.jpg" width="141" height="181" id="img1"></div><div id="div2" style="background-color:green;width:600px;height:300px">我是第二层<img src="images/2.jpg" width="178" height="163" id="img2"></div></body></html>

点击之前效果图

点击第一层后的效果图

点击第二层会弹框，这里就不再赘述了。

对元素的css样式进行操作

在jQuery中，对元素的CSS样式操作可以通过修改CSS类或者CSS的属性来实现。下面进行详细介绍。

1．通过修改CSS类实现

在网页中，如果想改变一个元素的整体效果。例如，在实现网站换肤时，就可以通过修改该元素所使用的CSS类来实现。在jQuery中，提供了如表所示的几种用于修改CSS类的方法。

2．通过修改CSS属性实现

如果需要获取或修改某个元素的具体样式（即修改元素的style属性），jQuery也提供了相应的方法，如表所示。

css一个小例子

<html><head><title></title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="js/jquery-2.0.2.js"></script></head><script type="text/javascript">  $(function(){var str1 =  $("#div1").text();  //获取层的文本字符串不带参数时是取值    var str2 = $("#div2").text();$("#div1").bind("click",function(){var src = $("#img1").attr("src");$("#img2").attr("src",src);$("#div1").css("background-color","#096");//$("#img1").css("display","none");$("#img1").addClass("","inline");});  $("#div2").click(function(){  $("#img2").attr({"width":"500","height":"500"});  $("#div1").css("backgroundColor","#096");  $("#img1").css("display","block");  });  });  </script><body><div id="div1" style="background-color:red;width:600px;height:600px">我是第一层<img src="images/1.jpg" width="141" height="181" id="img1"></div><div id="div2" style="background-color:green;width:600px;height:600px">我是第二层<img src="images/2.jpg" width="178" height="163" id="img2"></div></body></html>

点击之前

点击第一层之后

点击第二层之后

这里需要注意display的几种不同的属性