您的位置：首页 > Web前端 > JQuery

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

2016-07-17 17:42 344 查看

一、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 之类的报错
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Dom对象 jQuery包装集 Dom和jQuery
相关文章推荐
新的分享
章节导航