最近在开发百度地图相关的一个应用,需要从硬编码的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. window7下Python安装

    去python官网下载软件,https://www.python.org. 选择dowloads-->windows,选择稳定版python3.5.2,x86表示32位操作系统,x86-64表示 ...

  2. FunDA(11)- 数据库操作的并行运算:Parallel data processing

    FunDA最重要的设计目标之一就是能够实现数据库操作的并行运算.我们先重温一下fs2是如何实现并行运算的.我们用interleave.merge.either这几种方式来同时处理两个Stream里的元 ...

  3. 利用nginx实现负载均衡

    1.安装nginx和tomcat 我这里是使用docker安装的.安装流程可参照 dockerfile 这里安装了两个tomcat,端口分别是42000和42001.第二个tomcat的首页随便加了些 ...

  4. 干货 | 自适应大邻域搜索(Adaptive Large Neighborhood Search)入门到精通超详细解析-概念篇

    01 首先来区分几个概念 关于neighborhood serach,这里有好多种衍生和变种出来的胡里花俏的算法.大家在上网搜索的过程中可能看到什么Large Neighborhood Serach, ...

  5. 【BZOJ2127】happiness 最小割

    题目大意:有一个$n\times m$的矩阵,矩阵的每个位置上有一个同学,经过一个学期的相处,每个同学和前后左右相邻的同学互相成为了好朋友.这学期要分文理科了,每个同学对于选择文科与理科有着自己的喜悦 ...

  6. easyUI制作slider小滑块,可拖动和精确输入

    借助easyUI制作.完善slider小滑块. 可拖动.和在右边输入框精确输入 效果图: html代码: <div class="text_fl" >亮度设置:< ...

  7. jq02--基础函数

    jq是一个js函数库,主要是为事件处理特别设计的,现在我们继续学习一些jq函数. 1.jq效果: 显示与隐藏: $().hide(speed,callback) speed--"slow&q ...

  8. 搜集C++实现的线程池

    现在很多语言都内置了线程池实现,但C++中却没有.本文列举一些C++实现的线程池工具. Boost.Threadpool 项目首页:http://threadpool.sourceforge.net ...

  9. 如何虚拟机里安装win7操作系统

    不多说,直接上干货! Windows Server 2003.2008.2012系统的安装 关于给电脑换系统,很多人会花钱去电脑店里换,或者是下载Ghost系统.但这些系统都不是微软原版的,制作者已经 ...

  10. CharacterRangeTable

    转载:https://github.com/jacoco/jacoco/wiki/CharacterRangeTable This page discusses a not yet available ...