jQuery学习<二> — — Dom对象和jQuery对象

来源：互联网发布：学生收费软件km1199 编辑：程序博客网时间：2024/05/20 11:53

一、DOM对象（Document Object Model）

百度百科：
DOM—Document Object Model,它是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。
获取Dom对象：
document.getElementById 方法根据id获取单个Dom对象,
document.getElementsByTagName 方法根据标签名获取Dom对象集合
document.getElementsByName 方法根据名称获取Dom对象集合.
Dom对象的属性和方法相对jQuery来收是比较少的。

<script type="text/javascript">        //根据id        function doTest4(){            var test1 = document.getElementById("test1");            alert(test1.value); //test1        }        //根据name属性 （同名的情况多在checkbox的时候）        function doTest5(){            var test1 = document.getElementsByName("test1")[1];            alert(test1.value); //test2        }        //根据标签名        function doTest6(){            var test1 = document.getElementsByTagName("input")[3];            alert(test1.value); //test4        }    </script>  <body>    <input type="text" id="test1" name="test1" value="test1">    <input type="text" id="test2" name="test1" value="test2">    <input type="text" id="test3" name="test1" value="test3">    <input type="button" id="test4" name="test4" value="test4" onclick="doTest4()">    <input type="button" id="test5" name="test5" value="test5" onclick="doTest5()">    <input type="button" id="test6" name="test6" value="test6" onclick="doTest6()">  </body>

二、jQuery对象

jQuery对象就是通过jQuery包装Dom对象得到的对象，实际是对Dom对象的扩展，是一个包装集，可以使用jQuery的方法，虽然包装Dom对象，但不能使用Dom对象的方法。
jQuery提供了强大的获取jQuery功能，通过$ (“选择器”)获取一个jQuery对象。(9大选择器)
jQuery包装集是对Dom对象的扩展，但是两个对象的属性和方法并不同，所以需要注意返回的是jQuery对象还是Dom对象
jQuery对象是一个包装集，所以无论获取到一个元素还是多个元素，都会被封装成一个jQuery包装集。
从实际使用情况来看，jQuery包装集里面装着的又是一个个的Dom对象。如下：
var test1 = $(“#test1”); //jQuery对象
var Domtest1 = test1[0]; //Dom对象
注意，在遍历jQuery包装集时，得到的每一个遍历项（this）也是Dom对象，只能用Dom对象的属性和方法

<head>    <base href="<%=basePath%>">    <title>My JSP 'ab_jQuery1.jsp' starting page</title>    <script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>    <script type="text/javascript">    //id选择器(返回一个包装集，但里面只有一个元素)    function doTest4(){        var test1 = $("#test1");        alert(test1.val());     //jQuery对象取值API：.val();        alert(test1[0].value);  //DOM对象取值API：.value;    }    //标签选择器(返回一个包装集，但里面有一个或多个元素)    function doTest5(){        var test1 = $("input");        alert(test1.val());     //jQuery对象取值API：.val(); 默认第一个元素        test1.each(function(){                    //alert(this.val());// 报错：Uncaught TypeError: this.val is not a function                    alert(this.value);// 依次：test1,test2,test3,test4,test5                });    }    </script>  </head>  <body>    <input type="text" id="test1" name="test1" value="test1">    <input type="text" id="test2" name="test2" value="test2">    <input type="text" id="test3" name="test3" value="test3">    <input type="button" id="test4" name="test4" value="test4" onclick="doTest4()">    <input type="button" id="test5" name="test5" value="test5" onclick="doTest5()">  </body>

三、Dom对象和jQuery对象的互转

Dom转jQuery
A、得到一个Dom对象：var DomObject = document.getElementById(“test1”);
B、转换为jQuery对象：var D2JObject = $(DomObject); //D2JObject为jQuery对象，只能使用jQuery对应的属性和方法
jQuery转Dom
获取jQuery对象：var jQueryObject = $(“#test1”);（时刻想着这个对象就是一个包装集，里面装着一个个的Dom元素，这样，只要拿到这个包装集内单个元素时，就已经是Dom元素）
- 方式1：jQueryObject[index]
  转换为Dom对象：var J2DObject1 = jQueryObject[0]; //Dom对象，只能使用Dom对应的属性和方法
- 方式2：jQueryObject.get(index)
  转换为Dom对象：var J2DObject2 = jQueryObject.get(0); //Dom对象，只能使用Dom对应的属性和方法
注意，如果通过遍历jQuery包装集，得到的每一项（this），也都是Dom对象，只能使用Dom对应的属性和方法，如果要使用jQuery对象，必须先转为jQuery对象:$(this)

<head>    <base href="<%=basePath%>">    <title>My JSP 'ac_Dom&jQuery.jsp' starting page</title>    <script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>    <script type="text/javascript">        function doExchange(){            //Dom对象            var DomObject = document.getElementById("test1");            //jQuery对象            var jQueryObject = $("#test1");            //获取值并输出            //alert(DomObject.value);       //test1            //alert(jQueryObject.val());    //test1            /**************************************/            //Dom转jQuery            var D2JObject = $(DomObject);//D2JObject为jQuery对象            //获取值并输出            //alert(D2JObject.val());       //test1            /**************************************/            //jQuery转Dom（也可以说从jQuery中获取Dom对象，因为jQuery本身是包装集，里面装着的就是Dom对象）            //方式1：jQueryObject[index]            var J2DObject1 = jQueryObject[0]; //Dom对象            //获取值并输出            //alert(J2DObject1.value);      //test1            //方式2：jQueryObject.get(index)            var J2DObject2 = jQueryObject.get(0); //Dom对象            //获取值并输出            alert(J2DObject2.value);        //test1            //注意：在遍历jQuery包装集时得到的每一项（this）也是Dom对象，            //因此，遍历包装集后，得到每一项并希望使用jQuery的属性和方法，需要把这些项转换为jQuery对象:$(this)        }    </script>  </head>  <body>    <input type="text" id="test1" name="test1" value="test1">    <input type="text" id="test2" name="test2" value="test2">    <input type="text" id="test3" name="test3" value="test3">    <input type="button" id="test4" name="test4" value="test4" onclick="doExchange()">  </body>

总结：首先要分清楚Dom对象和jQuery对象，对不同的对象使用不同的属性和方法，不然总是会出现xxx is not a function 之类的报错

0 0