|
? 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">
<script>
var input = document.getElementById(‘a‘);
alert($(input).val());
//DOM对象转换成jquery对象的方法
//用$()把DOM对象包装起来就OK了
</script>
</body>
</html>
|
|
三.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>
|
|
jQuery学习第二课,布布扣,bubuko.com
jQuery学习第二课