当前位置:  编程技术>WEB前端

jquery对象和javascript对象即DOM对象相互转换

    来源: 互联网  发布时间:2014-08-25

    本文导语:  jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法;例如: $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象。 DOM对象就是Javascript 固有的...

jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法;例如: $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象。

DOM对象就是Javascript 固有的一些对象操作。DOM 对象能使用Javascript 固有的方法,但是不能使用 jQuery 里的方法。例如:document.getElementById("img").src = “test.jpg";这里的document.getElementById("img") 就是DOM 对象。

$("#img").attr("src","test.jpg"); 和 document.getElementById("img").src = "test.jpg"; 是等价的,是正确的,但是 $("#img").src = "test.jpg" ;或者 document.getElementById("img").attr("src","test.jpg"); 都是错误的。

再说一个例子,就是this, 在写 jQuery 时经常这样写: this.attr("src","test.jpg");可是就是出错,其实this 是DOM对象,而.attr("src","test.jpg") 是 jQuery 方法,所以出错了。要解决这个问题就要将 DOM对象转换成 jQuery 对象,例如 $(this).attr("src","test.jpg");

1. DOM 对象转成 jQuery 对象

对于已经是一个 DOM 对象,只需要用 $() 把DOM对象包装起来,就可以获得一个 jQuery 对象了,$(DOM 对象) 注: var是定义变量

如: 

var v = document.getElementById("v"); //DOM对象
var $v = $(v); //jQuery 对象

转换后,就可以任意使用 jQuery 的方法。

2. jQuery 对象转成 DOM 对象

两种转换方式讲一个 jQuery 对象转换成 DOM 对象: [index] 和 .get(index);

(1) jQuery 对象是一个数据对象,可以通过 [index] 的方法,来得到相应的 DOM 对象。

如:

var $v = $("#v"); //jQuery 对象
var v = $v[0]; //DOM 对象
alert(v.checked); //检测这个checkbox是否被选中

(2) jQuery 本身提供,通过.get(index) 方法得到相应的 DOM 对象

如:

var $v = $("#v"); //jQuery 对象
var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中

通过以上方法,可以任意的相互转换 jQuery 对象和 DOM 对象,需要再强调的是: DOM 对象才能使用DOM 中的方法,jQuery 对象是不可以使用DOM中的方法。


    
 
 

您可能感兴趣的文章:

  • 判断一个对象是否为jquery对象的方法
  • jquey笔记之dom对象与jquery对象互换的例子
  • jquery使用jquery.zclip插件复制对象的实例教程
  • jquery form表单如何序列化为对象
  • jQuery的对象切换插件 sochange-juqeryplugin
  • jquery将一个表单序列化为一个对象的方法
  • jQuery获取当前对象标签名称的方法
  • jquery实现json对象合并
  • jquery获取当前点击对象的value方法
  • jquery form表单序列化为对象的示例代码
  • Jquery获取元素的父容器对象示例代码
  • jQuery.parseJSON(json)将JSON字符串转换成js对象
  • Jquery通过JSON字符串创建JSON对象
  • jquery显示隐藏input对象
  • jQuery如何将选中的对象转化为原始的DOM对象
  • jquery中event对象属性与方法小结
  • jQuery中wrap()的用法-匹配对象包含在给出的元素代码内
  • jquery和js判断对象是否存在的方法
  • Jquery判断$("#id")获取的对象是否存在的方法
  • 扩展jQuery对象时如何扩展成员变量具体怎么实现
  • 通过javascript库JQuery实现页面跳转功能代码
  • 让jQuery与其他JavaScript库并存避免冲突的方法
  • javascript和jquery修改a标签的href属性
  • javascript原生和jquery库实现iframe自适应高度和宽度
  • 使用jQuery异步加载 JavaScript脚本解决方案
  • jquery和javascript中如何将一元素的内容赋给另一元素
  • checkbox全选功能(jquery、javascript)
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 3D和2D转换的jQuery插件 TransformJS
  • jQuery转换选择框为按钮的插件 Select2Buttons
  • 在线语音识别转换jQuery插件 voicewo
  • 通过Jquery的Ajax方法读取将table转换为Json
  • jQuery概述,代码举例及最新版下载
  • jQuery鼠标动画插件 jquery-ahover
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery向导插件 Jquery Wizard Plugin
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery的CSV插件 jQuery CSV
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples
  • 精简版的jQuery jQuery.ish
  • jQuery的OpenSocial插件 OpenSocial jQuery
  • jQuery链接插件 jquery.biggerlink


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3