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 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
jQuery Ajax全解析
Feb 13 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
JavaScript数值类型知识汇总
Nov 17 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
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
php自定义分页类完整实例
2015/12/25 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
JavaScript 无符号右移运算符
2009/04/17 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Python中实现结构相似的函数调用方法
2015/03/10 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
python图像和办公文档处理总结
2019/05/28 Python
python反转列表的三种方式解析
2019/11/08 Python
使用python去除图片白色像素的实例
2019/12/12 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
商务英语本科生的自我评价分享
2013/11/15 职场文书
毕业生就业推荐信范文
2013/12/01 职场文书
工程班组长岗位职责
2013/12/30 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
工程招投标邀请书
2014/01/26 职场文书
说明书怎么写
2014/05/06 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android