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 相关文章推荐
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
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
香妃
2021/03/03 冲泡冲煮
PHP封装的字符串加密解密函数
2015/12/18 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
js计数器代码
2006/11/04 Javascript
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
javascript 写类方式之八
2009/07/05 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
Vue自定义指令详解
2017/07/28 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
Hotels.com南非:酒店预订
2017/11/02 全球购物
打架检讨书100字
2014/01/08 职场文书
大课间体育活动方案
2014/03/12 职场文书