华山资源网

jQuery如何将选中的对象转化为原始的DOM对象
网络编程 2024/11/6 佚名
3 1
在jQuery中,在一个页面上选择元素返回的集合是jQuery对象而不是原始的DOM对象. 所以只能运行jQuery方法. 如果要在选择集上运行DOM方法和属性,该集合必须转化为DOM对象

比如你不可以这样使用:

$('div').innerHTML = "hello world";

因为innerHTML是 DOM的属性而不是jQuery对象的属性.如果确实想这么做.那么就需要将jQuery对象转化为DOM对象.方法有两种.

①jQuery提供一种核心方法get(),所以上面的可以写成$('div').get().innerHTML = "hello world";

当然这里对应的是页面中只有一个div的情况.如果有多个div.

那么这种方法不好使,你需要修改一下代码,通过传递给get(index) 这样的索引值进行选择.

$("div").get(0).innerHTML = "hello world";

当然,你可以使用jQuery自带的$.each循环进行全部的赋值操作.

$div1 = $("div").get();
复制代码 代码如下:
<span style="font-size:18px;">$.each($div1, function(index, val) {
val.innerHTML = 'lc '+ index;
});</span>

②我们可以使用[ ] 来使用数组的形式获取内容.

比如 $('div')[0].innerHTML = "hello world";

下面我们来看一个完整的例子吧.
复制代码 代码如下:
<span style="font-size:18px;"><html>
<head>
<title></title>
</head>
<body>
<h3>Books</h3>
<ol>
<li>Head First jQuery</li>
<li>Data Structrue and Algorithm with Javascript</li>
<li>Nodejs up and running</li>
<li>Node js with PHP expert</li>
<li>Sharp jQuery</li>
<li>Professional Javascript</li>
</ol>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.10.2.min.js"><script type="text/javascript">
$(document).ready(function() {
var lis = $('ol li').get().reverse();
$ol = $('ol');
$ol1 = $ol.clone(false, false);
$ol1.empty();
$.each(lis, function(index, val) {
$ol1.append('<li>'+val.innerHTML+'</li>');
});
$ol1.appendTo('body');
});
</script>
</body>
</html>
</span>

下面我补充一下将DOM对象转化为jQuery对象的过程.

这里我使用的是这个例子.
复制代码 代码如下:
<html>
<head>
<title></title>
<style type="text/css">
.clicked{
width:100px;
height: 40px;
border: 1px solid #cba;
border-radius: 3px;
}
</style>
</head>
<body>
<a href="#" id="cli" onclick="click(this)">Click Me</a>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.10.2.min.js"><script type="text/javascript">
function click(it){
$(it).addClass('clicked');
console.log('yes');
}
</script>
</body>
</html>

这里就是用到了我们的DOM对象转化为jQuery对象的过程.

注意看: 其实it指的是我们的a这个链接对象.是普通的DOM对象,我们在onclick 事件中this传入.

然后我们用$()对DOM对象进行了封装,然后才可以使用addClass函数.
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com