jquery入门级jQuery对象与dom对象之间的转换

首先解释一下DOM-document object model ,中文解释为文档对象模型。任何一个html都可以看做是一个dom树型结构。

我们可以通过getElementsByTagName()和getElementsId()方法去获取对应的dom元素。这些方法都是dom模型提供的内置方法。

而jquery对象是通过jquery框架包装dom对象之后的新对象,本质上是一个普通的JavaScript对象,该对象包含了dom对象的集合。所以dom对象可以看做是一个单一的个体,jquery对象看作是dom对象集合的对象,虽然他们都是dom对象但是不能直接相互调用。但是可以相互转化。

1.jquery对象转为dom对象

<script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
var $li = $("li"); //返回jquery对象
var li = $li[0]; //返回dom对象这里也可以用$li.get(0)
alert(li.innerHTML); //调用dom内置方法
})
</script>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</body>

2.dom对象转为jquery对象

<script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
var li = document.getElementsByTagName("li"); //获取dom对象
var $li = $(li[2]); //获取jquery对象
alert($li.html());
})
</script>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</body>

注:getElementsByTagName方法获取的是一个真正的dom数组,但是jquey只是一个类数组,不是真正的意义上的数组类型。




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值