最近在开发百度地图相关的一个应用,需要从硬编码的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. ESP8266 wifi干扰、钓鱼实现

    说明:绝大部分都是对着下面的参考文章来做的.这里只把基本流程和我自己遇到的问题写一下.如有其他问题可以访问文章末的参考文章进行查找! esp8266模块 我们需要购买一块esp8266模块,如下图所示 ...

  2. OS之内存管理 ---基本的内存管理策略(二)

    分段 基本方法 分段就是基于用户视图的内存管理方案.逻辑地址空间是由一组段构成的,每个段都有名称和长度.地址指定了段名称和段内偏移.因此用户通过两个量来指定地址:段名称和段偏移. 为了简单,进行对段的 ...

  3. Swift 4.0 废弃的柯里化

    // 柯里化 // http://www.jianshu.com/p/6eaacadafa1a                               Swift 2.0 柯里化方法 (废弃) / ...

  4. [原创] rtrim() 格式化中文问题

    先看以下代码 var_dump(rtrim("互联网产品.", ".")); 我们以为会得到结果 "互联网产品", 但实际上获得的是 &qu ...

  5. eolinker接口测试平台的安装部署

    1.从GitHub下载安装包: https://github.com/eolinker/CHN-EOLINKER-AMS-Lite-4.0-For-Java 使用 git clone https:// ...

  6. Spring Security构建Rest服务-1401-权限表达式

    Spring Security 的权限表达式 用法,在自定义的BrowserSecurityConfig extends WebSecurityConfigurerAdapter 配置文件里,每一个a ...

  7. Gen中的switch分析及lookupswitch与tableswitch指令

    int chooseNear(int i) { switch (i) { case 0: return 0; case 1: return 1; case 2: return 2; default: ...

  8. wap尝试调取app(网易新闻为例)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Java虚拟机(七):JVM调优案列

    Eclispe启动优化 概述 什么是jvm调优呢?jvm调优就是根据gc日志分析jvm内存分配.回收的情况来调整各区域内存比例或者gc回收的策略:更深一层就是根据dump出来的内存结构和线程栈来分析代 ...

  10. 用企业微信实现预警(shell + python)

    目录 一 注册企业微信 注册企业微信必备条件 注册 二 创建消息 创建部门 邀请成员加入 创建应用 关注微工作平台 三 实现预警 通过shell 脚本实现监控预警 通过python 脚本实现监控预警 ...