JavaScript中如何将html字符串转化为Jquery对象或者Dom对象
最近在开发百度地图相关的一个应用,需要从硬编码的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对象的更多相关文章
- 前端开发入门到进阶第三集【JavaScript中如何将html字符串转化为Jquery对象或者Dom对象】
https://www.cnblogs.com/mingjiatang/p/4746845.html
- JavaScript中将html字符串转化为Jquery对象或者Dom对象
实例代码: $('<a href="javascript:void(0);" onclick="showUI(this,"4028f65d5d1bb627 ...
- JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)
一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...
- 【JQuery】jquery对象和javascript对象即DOM对象相互转换
jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $(&quo ...
- 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...
- jQuery对象和DOM对象和字符串之间的转化
jQuery对象和DOM对象和字符串之间的转化 字符串---------->jQuery对象 $(HTML字符串): $('<div>我是祖国的一朵小花</div>') ...
- jquery对象和javascript对象即DOM对象相互转换
jquery对象和javascript对象即DOM对象相互转换 1. DOM 对象转成 jQuery 对象对于已经是一个 DOM 对象,只需要用 $() 把DOM对象包装起来,就可以获得一个 jQue ...
- JavaScript中的数组和字符串
知识内容: 1.JavaScript中的数组 2.JavaScript中的字符串 一.JavaScript中的数组 1.JavaScript中的数组是什么 数组指的是数据的有序列表,每种语言基本上都有 ...
- 6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
随机推荐
- 无法启动此程序,因为计算机中丢失QtCored4.dll。尝试重新安装该程序以解决此问题。
在创建一个win32控制台应用程序时包含了QtCore中的头文件,并且程序编译成功(至少说明属性配置是正确的),运行此程序会出现弹出如下的一个系统错误: 这样的情况该怎么解决?提示说计算机中丢失了Qt ...
- Nginx基本入门
转自:http://blog.csdn.net/u012486840/article/details/53098890 1.静态HTTP服务器 首先,Nginx是一个HTTP服务器,可以将服务器上的静 ...
- python kmeans实战 - 单机一层聚类(小玩具哦),下次再弄个分布式多次聚类
# coding=utf-8 """ #K-means """ import time ...
- 安卓开发——ListView控件(初始化ListView、列表刷新、长按添加menu)
前言: ListView——列表,它作为一个非常重要的显示方式,不管是在Web中还是移动平台中,都是一个非常好的.不开或缺的展示信息的工具.在Android中,ListView控件接管了这一重担,在大 ...
- cat /proc/sys/net/ipv4/ip_forward 0 解决办法
[root@localhost java]# cat /proc/sys/net/ipv4/ip_forward 出于安全考虑,Linux系统默认是禁止数据包转发的. 所谓转发即当主机拥有多于一块的网 ...
- 搭建互联网架构学习--005--框架初步拆分ssm单一框架
经过前边的准备步骤,服务器基本搭建完毕,接下来就开始一步步搭建框架了. 拆分单一结构:拆分的目的是为下一步引入dubbo做准备的. 把下边这个单一maven框架进行拆分 这个就是一个简单的maven项 ...
- spring boot整合RabbitMQ(Fanout模式)
1.Fanout Exchange介绍Fanout Exchange 消息广播的模式,不管路由键或者是路由模式,会把消息发给绑定给它的全部队列,如果配置了routing_key会被忽略. 如上图所示, ...
- Ubuntu14.04安装之后的一些配置
不多说,直接上干货! 主要分为 一.root用户的开启和vim编辑器的安装 二.ssh的安装 三.静态ip的设置 四.中英切换文环境切换 一.root用户的开启和vim编辑器的安装 Ubuntu在默认 ...
- Kubernetes+Flannel 环境中部署HBase集群
2015-12-14注:加入新节点不更改运行节点参数需求已满足,将在后续文章中陆续总结. 注:目前方案不满足加入新节点(master节点或regionserver节点)而不更改已运行节点的参数的需求, ...
- hibernate原生sql封装,报错信息:could not find setter for rownum_
今天用hibernate的时候,用了一个原生态sql做了一个分页查询,结果就报错了... 找到解决方法了:http://shmily2038.iteye.com/blog/1704963