jQuery学习第二课

jQuery与DOM交互详解

最新推荐文章于 2025-11-29 13:42:57 发布

最新推荐文章于 2025-11-29 13:42:57 发布 · 113 阅读

文章标签：

#javascript #ViewUI

本文详细介绍了jQuery对象与DOM对象的区别、互相转换的方法，以及jQuery与其他JavaScript库如何共存的技术要点。

• 1.jquery对象和DOM对象

• 2.DOM对象和jquery对象的互相转换

• 3.jquery与其它js库如何共存

一.jquery对象和DOM对象

1.DOM对象

1.1. DOM，文档对象模型，每一份DOM都可以表示成一棵树

1.2. 从DOM树中可以看出各个元素之间的关系

1.3. 可以用getElementById或者getElementsByTagName等方法来获取元素节点，这样得到的DOM元素就是DOM对象。

DOM对象可以使用原生js中的方法，比如innerHtml等

//用DOM方法获得到的对象，就是DOM对象
alert(p.html());
//DOM对象不能使用任何jquery中的方法，只能使用DOM对象中的方法

2.jquery对象

2.1.jquery对象是由jquery包装过后的DOM对象，它可以使用jquery库里面的方法

2.2.jquery对象无法使用DOM对象中的方法

//用jquery选择器得到的对象，就是jquery对象

alert(p.toString());
//jquery对象不能使用DOM对象中的方法，只能使用jquery中的方法
//如果DOM对象中的方法在jquery库中被改写过，那么可以使用DOM对象中的方法

二.jquery对象转换成DOM对象

jquery对象转成成DOM对象有两种方法

1.使用index

2.使用get()方法

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo3</title>
<script src="jquery.js"></script>
</head>
<body>
<input type="text" id="a" value="111111">
<script>
var input = $('#a');
//alert(input[0].value);
alert(input.get(0).value);

//jquery对象转换成DOM对象的方法
//1、可以使用索引，index
//2、可以使用get(index)的方法
</script>
</body>
</html>

DOM对象转换成jquery对象

只要把DOM对象用$()包起来就OK了

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo4</title>
<script src="jquery.js"></script>
</head>
<body>
<input type="text" id="a" value="111111">

三.jquery与其它js库共存

使用jQuery.noConflict()方法释放$的权

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<input type="text" id="a" value="aaaaa">
<script>
//jQuery.noConflict();
var sowhat = jQuery.noConflict()
alert('这是jquery弹出的'+sowhat('#a').val());
alert('这是prtotype弹出的'+$F('a'));
//alert('这是jquery弹出的'+jQuery('#a').val());
</script>
</body>
</html>