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 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
jquery 打开窗口返回值实现代码
Mar 04 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
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 Pear 安装及使用
2009/03/19 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
教大家制作简单的php日历
2015/11/17 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
Viking比利时:购买办公用品
2019/10/30 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
决定成败的关键——创业计划书
2014/01/24 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
2014年库房工作总结
2014/11/26 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
《金色的草地》教学反思
2016/02/17 职场文书