1-5 jQuery对象转化成DOM对象
本节编程练习不计算学习进度,请电脑登录imooc.com操作

jQuery对象转化成DOM对象

    jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中,我们需要jQuery与DOM能够相互的转换,它们都是可以操作的DOM元素,jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。

如何把jQuery对象转成DOM对象?

利用数组下标的方式读取到jQuery中的DOM对象

HTML代码

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript代码

var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

用jQuery找到所有的div元素(3个),因为jQuery对象也是一个数组结构,可以通过数组下标索引找到第一个div元素,通过返回的div对象,调用它的style属性修改第一个div元素的颜色。这里需要注意的一点是,数组的索引是从0开始的,也就是第一个元素下标是0

通过jQuery自带的get()方法

jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点,get方法中提供一个元素的索引:

var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法,转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

其实我们翻开源码,看看就知道了,get方法就是利用的第一种方式处理的,只是包装成一个get让开发者更直接方便的使用。

任务

在代码的17行处填写任务代码

通过get方法,将jquery对象转化为dom对象,然后修改dom对象的颜色

 

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6. <title></title>
  7. <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
  8. </head>
  9.  
  10. <body>
  11. <div>元素一</div>
  12. <div>元素二</div>
  13. <div>元素三</div>
  14.  
  15. <script type="text/javascript">
  16. var $div = $('div'); //jQuery对象
  17. //? div = ?
  18. div.style.color = 'red'; //操作dom对象的属性
  19. </script>
  20.  
  21. </body>
  22.  
  23. </html>
下一节