javascript中html字符串转化为jquery dom对象的方法


Posted in Javascript onAugust 27, 2015

原html字符串如下:

var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>"
        + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>"
        + "</div>";

 

1、下面使用Jquery库将text字符串变量转为Jquery对象。

Jquery代码如下:

alert($(text).html());

其中$(text)就text字符串转为了一个Jquery对象,最后将该Jquery对象的html()将html内容以字符串的形式输出,结果如下:

<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>

说明了,$(text)Jquery对象代表的是最外层的html元素div。

2、将Jquery对象和DOM对象之间互转。

代码如下:

var element= $(text).get(0) //element就是一个dom对象
var jqueryobj=$(element);//jqueryobj就是一个Jquery对象。

注意:DOM对象和Jquery对象区别

在我理解,Jquery对象和DOM对象都是封装的html元素,可以对html元素节点进行操作,方便编程,但是他们之间的方法有些是不能共用的,如Jquery对象的html()方法,DOM对象就使用不了;而DOM对象的GetElementById(),Jquery对象也不能使用。所以在必须要的时候可以进行相互转换。

3、使用js代码将text字符串变量转为DOM对象。

js代码如下:

/*字符串转dom对象*/
function loadXMLString(txt) 
{
  try //Internet Explorer
   {
     xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
     xmlDoc.async="false";
     xmlDoc.loadXML(txt);
     //alert('IE');
     return(xmlDoc); 
   }
  catch(e)
   {
     try //Firefox, Mozilla, Opera, etc.
      {
        parser=new DOMParser();
        xmlDoc=parser.parseFromString(txt,"text/xml");
       //alert('FMO');
        return(xmlDoc);
      }
     catch(e) {alert(e.message)}
   }
  return(null);
}

其中js代码将text字符串转为DOM对象与浏览器有关,所以。。。。。。分开写。

这样就实现了html字符串向Jquery对象和DOM对象的转换。

jQuery对象与dom对象相互转换方法介绍

刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换。

什么是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对象转换成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对象
alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:

对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)

如:

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

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

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

Javascript 相关文章推荐
AngularJS 日期格式化详解
Dec 23 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 #Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 #Javascript
javascript引用类型之时间Date和数组Array
Aug 27 #Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 #Javascript
jQuery手机拨号界面特效代码分享
Aug 27 #Javascript
JS实现自动切换文字的导航效果代码
Aug 27 #Javascript
javascript实现自动输出文本(打字特效)
Aug 27 #Javascript
You might like
第三章 php操作符与控制结构代码
2011/12/30 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
激活 ActiveX 控件
2006/10/09 Javascript
js 替换
2008/02/19 Javascript
jQuery Ajax之load()方法
2009/10/12 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
Python如何批量生成和调用变量
2020/11/21 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
最新销售员个人自荐信
2013/09/21 职场文书
学习雷锋活动总结
2014/04/29 职场文书
医德医风个人总结
2015/02/28 职场文书
党小组考察意见
2015/06/02 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书