jQuery对象与DOM对象转换方法详解


Posted in Javascript onMay 10, 2016

本文实例分析了jQuery对象与DOM对象的转换方法。分享给大家供大家参考,具体如下:

jQuery对象转换为dom对象

只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属性和方法在jQuery上也是无法调用的,不过基本上jQuery类库提供的函数包含了所有的dom操作。有时尤其是在初学jQuery,无法记住jQuery的所有函数时,会有很长一段时间使用jQuery选择器配合原始的dom函数进行开发。所以两种对象的转化是很有必要的。

jQuery对象的索引保存的是dom对象,所以可以通过索引将经jQuery对象转化为dom对象(实际上是获取保存在jQuery对象中的dom对象)。

$("#myphoto")[0];

通过索引返回dom对象后,就可以使用各种dom对象的方法和属性,比如获取dom对象的src属性:

alert($("#myphoto")[0].src);

如果想要遍历jQuery对象中的每个元素,通常使用each()函数。

echo(callback);

Callback()是一个回调函数,此函数中的this也指向dom元素。

$("#myphoto").each(function(i){
     this,src="test"+i+".jpg";
});

对于懒人有一个小窍门,如果不想记忆在不同的jQuery函数中的this到底是jQuery对象还是this对象,可以使用"this"方法都转化成jQuery对象,因为即使一个对象已经是jQuery对象也不会出错。

Dom对象转化为jQuery对象

如果已经获得了一个dom对象,可以使用"jQuery(elements)"函数将其转化为jQuery对象:

var img=document.getElementById("myphoto");
jQuery(img).css("border","solid 2px #FF0000");

上面代码中img是使用dom获取到的dom对象。将其转化为jQuery对象后就可以使用jQuery对象的css()方法更改其样式。

可以使用"$"代替"jQuery",因为在jQuery的内部有如下实现:

jQuery=window.jQuery=window.$

"$"字符在JavaScript中可用做变量名,并且可以作为前缀出现。但是一些其他的类库或者是程序可能已经使用了"$"作为变量名。

jQuery(img).css("border","solid 2px #FF0000");
$(img). css("border","solid 2px #FF0000");

以上两条语句是等同的。

"jQuery(elements)"函数的elemients参数还可以是jQuery对象,虽然讲一个jQuery对象在次转化没有意义,这是为了当不确定一个对象的类型是jQuery对象还是dom对象时,可以再次调用此函数进行转化,这样可以保证此对象一定是jQuery对象。

希望本文所述对大家jquery程序设计有所帮助。

Javascript 相关文章推荐
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
Angular2数据绑定详解
Apr 18 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
jQuery对象的链式操作用法分析
May 10 #Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 #Javascript
Bootstrap按钮下拉菜单组件详解
May 10 #Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 #Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 #Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 #Javascript
Bootstrap模仿起筷首页效果
May 09 #Javascript
You might like
PHP连接SQLServer2005的方法
2015/01/27 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
js的event详解。
2006/09/06 Javascript
DOM精简教程
2006/10/03 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
jquery 选择器部分整理
2009/10/28 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
小学清明节活动方案
2014/03/08 职场文书
护士长竞聘书
2014/03/31 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
关于迟到的检讨书
2015/05/06 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
python process模块的使用简介
2021/05/14 Python
SQL Server内存机制浅探
2022/04/06 SQL Server
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技