章节
问答
课签
笔记
评论
占位
占位

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对象的颜色

 

?不会了怎么办

var div = $div.get(0); //通过get方法,转化成DOM对象

||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最赞回答 / qq_慕码人3188746
版本低了换上这个试试<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

最赞回答 / IT贫困户
把http 改成 https  就行了 

最赞回答 / chaucy
语法错误。"var div = $('div'); //jQuery对象",这一句中的div是jQuery对象,“div.get(0)”这个方法是将jQuery对象还原为DOM对象。(DOM对象).style.color = 'red';   <------->   (jQuery对象).css('color','red');

最赞回答 / 怀揣梦想的小白
就好比:通过常规的dom操作获取一个元素的id 你需要写 document.getElementById("id"),很明显这里的代码很长,而通过jquery封装好的方法 你只需使用$("id")即可获取对应id的元素,方便快捷。因此此处的get方法就是jquery封装好的方法,为了方便使用

最赞回答 / wllzdh
用循环遍历var $div=$("div"); for(var i=0;i<$div.length;i++){     $div.get(i).style.color="red"; }

最赞回答 / 风起临冬
$div[1]是dom对象,不能用jq的方法,要用$($div[1])选取成jq对象。$在开头不代表就是jq对象,原生js也可以用$开头做变量名,$(xxx)才是jq对象

最赞回答 / 肥宅风见啸
实在弄不清楚就直接下载一个然后本地引用

最赞回答 / 两手间
数组是有下标的,而JQ就是通过下标去获取并转化为DOM对象,get(0)所对应的div就是元素一,下标从0开始!

最赞回答 / qq_鄧酀鎔_0
<script type="text/javascript" src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

最新回答 / 冷寒轩111
怎么创建一个类数组?这个问题就触及到了我的知识盲区了

最新回答 / 慕慕2372727
下标[0]对应元素一,[1]对应元素二,依次类推。

已采纳回答 / 慕盖茨4549961
把jQuery的版本换成http://libs.baidu.com/jquery/1.9.1/jquery.js即可
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言