jquery对象和DOM对象的任意相互转换


Posted in Javascript onFebruary 21, 2016

什么是jQuery对象?
---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。
比如:
$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码:

document.getElementById("id").innerHTML;

虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如:$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。
还有一个要注意的是:用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象,这两者并不等价。请参看如下说的两者间的转换。
既然jQuery有区别但也有联系,那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定:如果一个获取的是jQuery对象,那么我们在变量前面加上$,如:var $variab = jQuery对象;如果获取的是DOM对象,则与习惯普通一样:var variab = DOM对象;这么约定只是便于讲解与区别,实际使用中并不规定。

在讨论jquery对象和DOM对象的相互转换之前,先约定好定义变量的风格如果获取的是jquery对象,那么在变量前面加上$,例如

var $varible = jquery对象;

如果获取的是DOM对象,则定义如下:

var varible = DOM对象;

1.jquery对象转成DOM对象:

jquery对象不能使用DOM中的方法,但如果对jquery对象所提供的方法不熟悉,或者没有jquery想封装的方法,不得不使用DOM对象,即【index】和get[index].

(1)jquery对象是一个数组对象,可以通过【index】的方法得到相应的DOM对象。

jquery的代码如下

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var $cr = $("p");  //jquery对象
  var cr = $cr[1];  //dom对象
  var ct = $cr.get(0)  //第二种转换为DOM对象的方式
  cr.innerHTML = "you"  //检测是否转换成功,可以用DOM方法 输出结果为第二个my改成了you
  ct.innerHTML = 'fuck'  //输出结果第一个my改成了fuck
</script>
</body>

(2).DOM对象转换为jquery对象:

对于一个DOM对象,只需要用$()把DOM对象给包装起来,就可以获得一个jquery对象了,方式为$(DOM对象)。

jquery代码如下:

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var cr = document.getElementsByTagName("p") //DOM对象
  var $cr = $(cr);   //jquery对象
  $cr.eq(0).("fuck"); //检测是否转换成功,可以用jquery方法 输出结果为第二个my改成了fuck
  $cr.eq(1).html("you"); //输出结果为my改成you
</script>
</body>

转换后,可以任意使用jquery方法。

 通过以上方法,可以任意的相互转换jquery对象和DOM对象。

最后再次强调,DOM对象才能使用DOM方法,jquery对象不能使用DOM中的方法,但jquery对象提供了一套更加完善的工具用于操作DOM。

希望大家会喜欢本文。

Javascript 相关文章推荐
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 #Javascript
jQuery实现简单隔行变色的方法
Feb 20 #Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 #Javascript
jQuery获得字体颜色16位码的方法
Feb 20 #Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 #Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 #Javascript
js面向对象的写法
Feb 19 #Javascript
You might like
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
php生成与读取excel文件
2016/10/14 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
Python将xml和xsl转换为html的方法
2015/03/10 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
python 实时遍历日志文件
2016/04/12 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
python实现猜拳游戏
2020/03/04 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
竞选大队委员演讲稿
2014/04/28 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
李强感恩观后感
2015/06/17 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL