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

jQuery对象与dom对象相互转换方法介绍

刚开始学习jQuery，可能一时会分不清楚哪些是jQuery对象，哪些是DOM对象。至于DOM对象不多解释，我们接触的太多了，下面重点介绍一下jQuery，以及两者相互间的转换。

什么是jQuery对象？

---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。

比如：

$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码：

document.getElementById("id").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如：$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。

还有一个要注意的是：用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象，这两者并不等价。请参看如下说的两者间的转换。

既然jQuery有区别但也有联系，那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定：如果一个获取的是 jQuery对象，那么我们在变量前面加上$，如：var $variab = jQuery对象；如果获取的是DOM对象，则与习惯普通一样：var variab = DOM对象；这么约定只是便于讲解与区别，实际使用中并不规定。

jQuery对象转成DOM对象：

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：

var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：

var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

如：

var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象

转换后，就可以任意使用jQuery的方法了。

通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。

赞 (0)

相关推荐

  • js Html结构转字符串形式显示代码

    复制代码 代码如下: //Html结构转字符串形式显示 支持<br>换行 function ToHtmlString(htmlStr) { return toTXT(htmlStr).replace(/\&lt\;br[\&ensp\;|\&emsp\;]*[\/]?\&gt\;|\r\n|\n/g, "<br/>"); } //Html结构转字符串形式显示 function toTXT(str) { var RexStr = /

  • javascript中拼接HTML字符串的最快、最好的方法

    javascript中拼接HTML字符串的最快、最好的方法

    第一种:逐个字符串相加 复制代码 代码如下: var arr = ['item 1', 'item 2', 'item 3', ...];list = '';for (var i = 0,l = arr.length; i < l; i++) {    list += '' + arr[i] + '';}list = '' + list + ''; 这种最常见的,但是效率最低!代码逻辑相对来说复杂. 第二种:逐个 push 进数组 复制代码 代码如下: var arr = ['item 1',

  • JavaScript检测字符串中是否含有html标签实现方法

    功能代码 复制代码 代码如下: /**  * 字符串是否含有html标签的检测  * @param htmlStr  */ function checkHtml(htmlStr) {     var  reg = /<[^>]+>/g;     return reg.test(htmlStr); } demo script: 复制代码 代码如下: /**  * 字符串是否含有html标签的检测  * @param htmlStr  */ function checkHtml(htmlSt

  • js拼接html字符串的注意事项

    +加好拼接如果不换行,是不会出现执行一段一段执行的情况,但是字符串太长了,换行之后会出现一段一段执行的情况,这样页面生成的div等就不是想要的结果了. 换行要这样拼接 var s='<li class="todetail" data-id="'+ one.id+'"><p class="dd_time">'+ one.leasetime+'</p><div class="info-box&quo

  • 根据json字符串生成Html的一种方式

    根据json字符串生成Html的一种方式

    文章说明:本文介绍了根据Json串生成Html的一种方式(只是简单实现了文本框,密码框,下拉框).只是觉得好玩才这样做,如果觉得没有任何价值,请忽略.不足指出希望各位大牛指点.后续将根据各位的指点继续完善. 功能说明: 在左侧输入框中输入Json串,点击执行时根据输入的Json串在右侧展示区显示出相应的Html(使用Jquery1.4.4) HTML: 复制代码 代码如下: <table style="width:100%; "> <col width="2

  • 对字符串进行HTML编码和解码的JavaScript函数

    编码函数: 复制代码 代码如下: function HtmlEncode(str) { var t = document.createElement("div"); t.textContent ? t.textContent = str : t.innerText = str; return t.innerHTML; } 解码函数: 复制代码 代码如下: function HtmlDecode(str) { var t = document.createElement("di

  • 在JS中解析HTML字符串示例代码

    在js中直接添加html语句,js会将html字符串解析成相应的HTML语句,并在前端进行显示. 复制代码 代码如下: <span style="font-size:14px;">var el = document.createElement( 'div' ); el.innerHTML = "<html><head><title>titleTest</title></head><body>&

  • 如何使用JS在HTML中自定义字符串格式化

    如何使用JS在HTML中自定义字符串格式化

    Python中支持字符串格式化,其基本形式如下: str = "I'm %s, %s years old." % ('jack', 19) print(str) #结果: I'm jack, 19 years old. 在JavaScript中虽没有类似的方法,但我们可以利用字符串的replace方法自定义字符串的格式化方法: <script> $(function () { /*自定义字符串格式化*/ String.prototype.Format = function

  • javascript中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

  • JavaScript中ES6字符串扩展方法

    es6这个String对象倒是扩展了不少方法,但是很多都是跟字符编码相关,个人选了几个感觉比较常用的方法: includes 搜索字符的神器 还记得我们之前如何判断某个字符串对象是否包含特地字符的吗? var str='google'; if(str.indexOf('o')>-1){ console.log('yes'); }else{ console.log('no'); } indexOf本来只是一个获取字符对应位置的方法,因为找到不到会返回-1这个值,就成了判断是否包含的方法,inclu

  • 在JavaScript中查找字符串中最长单词的三种方法(推荐)

    本文基于Free Code Camp基本算法脚本"查找字符串中最长的单词". 在此算法中,我们要查看每个单词并计算每个单词中有多少个字母.然后,比较计数以确定哪个单词的字符最多,并返回最长单词的长度. 在本文中,我将解释三种方法.首先使用FOR循环,其次使用sort()方法,第三次使用reduce()方法. 算法挑战 返回提供的句子中最长单词的长度. 您的回复应该是一个数字. 提供的测试用例 findLongestWord("The quick brown fox jumpe

  • javascript中获取元素标签中间的内容的实现方法

    使用ajax,通过会把服务器端响应获取到reponseText或者reponseXML中的信息,以某种方法动态的写到div和span标记中,这样,可以在无刷新的情况下,改变页面内容的显示. 通过javascript进行动态的修改,修改的方法有两种: 1. 一种是使用html的每个标记的innerHTML属性,使用此属性,只要为它提供一个有意义的html代码片段,那么html解释器就可以将其中的内容进行解释,并显示在页面上,使用这种方式比较简单,每次修改前不需要先把原来的内容清除掉,而可以直接进行

  • Javascript中prototype属性实现给内置对象添加新的方法

    本文实例讲述了Javascript中prototype属性实现给内置对象添加新的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>prototype

  • python 将列表中的字符串连接成一个长路径的方法

    今天实习公司分配了一个数据处理的任务.在将列表中的字符串连接成一个长路径时,我遇到了如下问题: import os path_list = ['first_directory', 'second_directory', 'file.txt'] print os.path.join(path_list) 发现 os.path.join 之后,依然是字符串列表.这我就纳闷了: ['first_directory', 'second_directory', 'file.txt'] 细思后想明白了,os

  • 在C++中把字符串转换为整数的两种简单方法

    目录 C++中的数据类型 如何在C++中声明和初始化 int s 如何在C++中声明和初始化 string s 如何使用 stoi() 函数将字符串转换为int 如何使用stringstream 类将一个字符串转换为一个int 总结 当你用C++编码时,经常会有这样的时候,你会想把一种数据类型转换为另一种. 在这篇文章中,你将看到两种最流行的方法来学习如何在C++中把字符串转换为整数. 让我们开始吧! C++中的数据类型 C++编程语言有一些内置的数据类型. int,用于整数(整数)(例如10,

  • JavaScript中的字符串操作详解

    一.概述    字符串在JavaScript中几乎无处不在,在你处理用户的输入数据的时候,在读取或设置DOM对象的属性时,在操作cookie时,当然还有更 多....JavaScript的核心部分提供了一组属性和方法用于通用的字符串操作,如分割字符串,改变字符串的大小写,操作子字符串等.    当前的大部分浏览器也能从强大的正则表达式获益,因为它极大地简化了大量的字符串操作任务,不过它也需要你克服一条有些陡峭的学习曲线.在这里,主要是介绍字符串本身的一些操作,正则表达式会在以后的随笔中涉及. 二

  • JavaScript中操作字符串小结

    最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信你也跟我一样,发现字符串的处理是前端招聘过程中最常见的题型之一. 这些题有一个特点,站在考官的角度去考虑,它考的不是你会不会,而是你能不能在不借用XX手册或者XX指南再或者百度谷歌的情况下,用比较简洁的方式写出答案来. 可惜的是,很多开发人员,当然我也是其中一员,对于很多经常用到的字符串处理函数却不能牢牢记住他们的用法,总不得不去求助于XX手册或者

  • 解析JavaScript中的字符串类型与字符编码支持

    定义 字符串就是零个或多个排在一起的字符,放在单引号或双引号之中. 'abc' "abc" 单引号字符串的内部,可以使用双引号.双引号字符串的内部,可以使用单引号. 'key = "value"' "It's a long journey" 上面两个都是合法的字符串. 如果要在单引号字符串的内部,使用单引号(或者在双引号字符串的内部,使用双引号),就必须在内部的单引号(或者双引号)前面加上反斜杠,用来转义. 'Did she say \'Hell

随机推荐