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 ...
随机推荐
- python爬虫1——获取网站源代码(豆瓣图书top250信息)
# -*- coding: utf-8 -*- import requests import re import sys reload(sys) sys.setdefaultencoding('utf ...
- linux磁盘用满的两种情况
首先查看分区的内存使用情况和inode使用情况 第一种情况,内存用完: 我们拿分区sdb5来做实验 查看内存使用情况和inode使用情况: 第二种情况:inode使用完 我们在该分区下创建很多空文件 ...
- Java虚拟机执行引擎
执行引擎 关于执行引擎相关的部分, 在之前的博文里 Java内存区域中已经有所提及. 回顾一下: 也只有几个概念, JVM方法调用和执行的基础数据结构是 栈帧, 是内存区域中 虚拟机栈中的栈元素, 每 ...
- node 本地静态服务器
直接上代码 const connect = require("connect"); const serveStatic = require("serve-static&q ...
- django框架--底层架构
目录 零.参考 一.对于web服务的理解 二.对于wsgi协议的理解 三.自定义一个简单的基于wsgi协议的web框架 四.django中的server实现 五.django中的application ...
- 获取设备信息——获取客户端ip地址和mac地址
1.获取本地IP(有可能是 内网IP,192.168.xxx.xxx) /** * 获取本地IP * * @return */ public static String getLocalIpAddre ...
- Linux文件目录管理
Linux文件目录管理 文件的路径 路径: . 表示当此层目录 .. 表示上一层目录 - 代表前一个工作目录 ~ 代表"目前用户身份"所在的文件夹 ~account 代表accou ...
- 【C#小知识】C#中一些易混淆概念总结(三)---------结构,GC,静态成员,静态类
目录: [C#小知识]C#中一些易混淆概念总结 [C#小知识]C#中一些易混淆概念总结(二) ---------------------------------------分割线----------- ...
- 【jQuery源码】工具函数
//扩展工具函数 jQuery.extend({ // Unique for each copy of jQuery on the page expando: "jQuery" + ...
- 你误解了Windows的文件后缀名吗?
一.背景说明 有很多的小伙伴对windows下的文件后缀名不能很好地理解作用和区别,更不用说高深的使用了,在这里给大家说一下这些文件后缀名到底有什么区别,有什么作用呢? 二.说明 简单的说来,wind ...