一、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 之类的报错