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 相关文章推荐
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
微信小程序登录换取token的教程
May 31 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
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
3.从实例开始
2006/10/09 PHP
php mssql 时间格式问题
2009/01/13 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
js压缩利器
2007/02/20 Javascript
驱动事件的addEvent.js代码
2007/03/27 Javascript
学习jquery之一
2007/04/27 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
Python字典dict常用方法函数实例
2020/11/09 Python
业务员薪酬管理制度
2014/01/15 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
本科毕业生自荐信
2014/05/26 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
工作年限证明范本
2015/06/15 职场文书
iPhone13再次曝光
2021/04/15 数码科技