jQuery如何将选中的对象转化为原始的DOM对象


Posted in Javascript onJune 09, 2014

在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="jquery-1.10.2.min.js"></script> 
<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="jquery-1.10.2.min.js"></script> 
<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函数.

Javascript 相关文章推荐
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
javascript 处理null及null值示例
Jun 09 #Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 #Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 #Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 #Javascript
Node.js(安装,启动,测试)
Jun 09 #Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 #Javascript
javascript浏览器兼容教程之事件处理
Jun 09 #Javascript
You might like
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Python将图片转换为字符画的方法
2020/06/16 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
浅析python内置模块collections
2019/11/15 Python
python游戏开发的五个案例分享
2020/03/09 Python
python GUI计算器的实现
2020/10/09 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
优秀的教师个人的中文求职信
2013/09/21 职场文书
群众路线剖析材料
2014/02/02 职场文书
公司外出活动方案
2014/08/14 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
2015年科协工作总结
2015/05/19 职场文书
2015年教师节主持词
2015/07/03 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
python中requests库+xpath+lxml简单使用
2021/04/29 Python
Python初识逻辑与if语句及用法大全
2021/08/07 Python