最近在开发百度地图相关的一个应用,需要从硬编码的html字符串中提取自己想要的元素以及属性信息。但是在js中或者jQuery中操作元素节点以及属性都是使用DOM对象或者jquery对象。下面将介绍如何把html字符串转为Jquery对象或者DOM对象。

  原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对象的转换。

JavaScript中如何将html字符串转化为Jquery对象或者Dom对象的更多相关文章

  1. 前端开发入门到进阶第三集【JavaScript中如何将html字符串转化为Jquery对象或者Dom对象】

    https://www.cnblogs.com/mingjiatang/p/4746845.html

  2. JavaScript中将html字符串转化为Jquery对象或者Dom对象

    实例代码: $('<a href="javascript:void(0);" onclick="showUI(this,"4028f65d5d1bb627 ...

  3. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  4. 【JQuery】jquery对象和javascript对象即DOM对象相互转换

    jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $(&quo ...

  5. 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性

    查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...

  6. jQuery对象和DOM对象和字符串之间的转化

    jQuery对象和DOM对象和字符串之间的转化 字符串---------->jQuery对象 $(HTML字符串): $('<div>我是祖国的一朵小花</div>') ...

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

    jquery对象和javascript对象即DOM对象相互转换 1. DOM 对象转成 jQuery 对象对于已经是一个 DOM 对象,只需要用 $() 把DOM对象包装起来,就可以获得一个 jQue ...

  8. JavaScript中的数组和字符串

    知识内容: 1.JavaScript中的数组 2.JavaScript中的字符串 一.JavaScript中的数组 1.JavaScript中的数组是什么 数组指的是数据的有序列表,每种语言基本上都有 ...

  9. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

随机推荐

  1. Aizu 2249Road Construction 单源最短路变形《挑战程序设计竞赛》模板题

    King Mercer is the king of ACM kingdom. There are one capital and some cities in his kingdom. Amazin ...

  2. webpack快速入门——集中拷贝静态资源

    工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图.开发文档), 这些静态资源有可能是文档,也有可能是一些额外的图片.项目组长会要求你打包时保留这些静态资源, 直接打包到制 ...

  3. 大白dmeo (转的)

    <!doctype html><html> <head> <meta charset="utf-8"> <title>B ...

  4. js插件实现点击复制内容到粘贴板,兼容IE8

    先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...

  5. Swift 中@available 和 #available

    Swift 2.0 中,引入了可用性的概念.对于函数,类,协议等,可以使用@available声明这些类型的生命周期依赖于特定的平台和操作系统版本.而#available用在判断语句中(if, gua ...

  6. node开发环境配置

    node开发环境配置 用处 NodeJS——后台 JavaScript-前台 后台其他语言 1.PHP 2.Java 3.Pythonnode优势 1.性能高 nodejs php 86 1s 1分半 ...

  7. 用Lingo求解线性规划问题

    第一步:输入目标条件和约束条件.每行以分号隔开.然后点击工具栏上的Solve按钮,或Lingo菜单下的Solve子菜单. 第二步:检查report中的结果. 默认情况下,Lingo不进行灵敏度分析. ...

  8. (转) centos7下创建mysql5.6多实例

    原文:http://blog.csdn.net/a1010256340/article/details/77483504 一.mysql安装目录说明mysql5.6以二进制安装包安装在/data/my ...

  9. tensorflow基础篇-2

    #-*- coding:utf-8 -*- import tensorflow as tf sess=tf.Session() #整流水线单元relu print sess.run(tf.nn.rel ...

  10. mysql RR下不存在则插入

    主要看并发事务中不存在则插入(只有key索引)的阻塞情况. 表定义: mysql> desc user; +-------------+------------------+------+--- ...