jQuery学习第二课

? 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学习第二课,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。