一、jquery对象和DOM对象
1.DOM对象
(1)DOM，文档对象模型，每一份DOM都可以表示成一棵树
(2)从DOM树中可以看出各个元素之间的关系
(3)可以用getElementById或者getElementsByTagName等方法来获取元素
节点，这样得到的DOM元素就是DOM对象。DOM对象可以使用原生js中
的方法，比如innerHtml等
例子:
<script>
var p=document.getElementById('p');
//用DOM方法得到的对象，就是DOM对象
alert(p.innerHTML);
</script>
2.jquery对象
jquery对象是由jquery包装过后的DOM对象，它可以使用jquery库里面的方法
jquery对象无法使用DOM对象中的方法(如果DOM对象中的方法在jquery被改写过，那么可以使用DOM对象中这个被改写的方法)
例子:
<script>
var p=$('p');
//用jQuery选择器得到的对象，就是jQuery对象
alert(p.html());
</script>
二、DOM对象和jquery对象的互相转换
(1)jquery对象转成成DOM对象
有两种方法
1.使用index
2.使用get()方法
测试:
<!doctype html>
<html lang="en">
<head>
<meta charset="GBK">
<title>demo2.1</title>
<script src="jquery-1.8.0.min.js"></script>
</head>
<body>
<input type="text" id="a" value="111111"/>
<script>
var input=$('#a');
alert(input.val());
alert(input[0].value);
alert(input.get(0).value);
//jquery对象转换成DOM对象的方法
//1.可以使用索引，index
//2.可以使用get(index)方法
</script>
</body>
</html>
(2)DOM对象转换成jquery对象
只要把DOM对象用$()包起来就OK了
测试:
<!doctype html>
<html lang="en">
<head>
<meta charset="GBK">
<title>demo2.2</title>
<script src="jquery-1.8.0.min.js"></script>
</head>
<body>
<input type="text" id="a" value="111111"/>
<script>
var input=document.getElementById('a');
alert($(input).val());
</script>
</body>
</html>
三、jquery与其它js库共存
我们使用js库的时候，不一定会仅仅使用jQuery，还有可能使用其他的js库(如prototype)，那么有可能会产生冲突，所以要有一种方法让它们共存。
共存方法:使用jQuery.noConflict()方法释放$的权
测试:
<!doctype html>
<html lang="en">
<head>
<meta charset="GBK">
<title>demo2.3</title>
<script src="jquery-1.8.0.min.js"></script>
<script src="prototype.js"></script>
</head>
<body>
<input type="text" id="a" value="aaaaaa"/>
<script>
jQuery.noConflict();
alert($F('a'));//prototype获取value值的方法
alert(jQuery('#a').val());//jQuery获取value值的方法
</script>
</body>
</html>
这样就会避免两种“$”权限冲突，我们两种js库就都可以使用了。
转载请注明出处：http://blog.csdn.net/acmman/article/details/48971545
时间： 2024-12-30 22:04:51