看几道JQuery试题后总结（下篇）

感谢圆友的提醒

昨天下午完成了9道试题中的前4道，之后好多园友存在些疑惑和建议，在这里我一并说一下吧。首先对于昨天第一题可能存在误导，在JQuery中并没有innerHTML这个属性，不过我们可以将JQuery对象转换成DOM对象再使用innerHTML，还有对于那个innerTEXT也是操作DOM对象的，不过貌似用的比较少。其次是第三题，我们选择表单元素，尽量使用表单元素选择器。总之，感谢圆友们的批评指正、、、

接下来我们继续完成昨天没有完成的试题......

第五题

题目：JQuery对象与dom对象的区别，以及两者互相转换的方法

var jquery = $("#x1");      //jquery对象
var dom = document.getElementById("#x1");       //dom对象

　　两者区分：

　　jQuery对象就是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的，使用JQuery对象可以使用JQuery对象中的方法。例如在JQuery中我们可以使用"对　　　　象.html()"来获取元素内的内容，它等同于在DOM中使用"对象.innerHTML"。还有我们使用这两种对象的时候必须分清情况，不能再JQuery对象中使用DOM对象的方法，也不能在BOM对象中使用JQuery对象的方法，小弟我昨天就犯错了。

　　两者互相转换：

/*JQuery转化成DOM*/

var x=$("#x1"); //jquery对象
var y = x[0]; //dom对象 也可写成 var y=x.get(0);
y.innerHTML = "断桥残雪";

/*DOM转化成JQuery*/

var m=document.getElementById("x1");     //dom对象
var n = $(m);     //转换成jquery对象
n.html();

通过以上演示的方法，我们就可以任意的相互转换jquery对象和dom对象。

第六题

题目：如何动态的为某个div添加class属性，如何移除class属性，以及如何获取div中某个属性的值，比如说Id的名称或者其他属性的值

　　首先看代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head runat="server">
 4     <title></title>
 5     <style type="text/css">
 6     .test{color:#0000FF;font-size:30px;}
 7     </style>
 8     <script src="jQuery/jquery-1.7.1.js" type="text/javascript"></script>
 9     <script type="text/javascript">
10         $(document).ready(function () {
11             var myp = $("#myp");
12             $("#btnx").click(function () {
13                 myp.addClass("test");
14             });
15             $("#btny").click(function () {
16                 myp.removeClass("test");
17             });
18             function y() {
19                 myp.removeClass();
20             }
21             var a = $("#btnx").attr("type");
22             alert(a);
23         });
24     </script>
25 </head>
26 <body>
27     <form id="form1" runat="server">
28     <div>
29         <p id="myp">断桥残雪——火云邪神</p>
30         <input id="btnx" type="button" onclick="x()" value="添加Class" /><input id="btny" type="button" onclick="y()" value="移除Class" />
31     </div>
32     </form>
33 </body>
34 </html>

View Code