javascript中html字符串转化为jquery dom对象的方法


Posted in Javascript onAugust 27, 2015

原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中的方法。

Javascript 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
JS清除选择内容的方法
Jan 29 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
javascript每日必学之多态
Feb 23 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 #Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 #Javascript
javascript引用类型之时间Date和数组Array
Aug 27 #Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 #Javascript
jQuery手机拨号界面特效代码分享
Aug 27 #Javascript
JS实现自动切换文字的导航效果代码
Aug 27 #Javascript
javascript实现自动输出文本(打字特效)
Aug 27 #Javascript
You might like
PHP也可以?成Shell Script
2006/10/09 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
JS动态显示倒计时效果
2019/12/12 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
Python类属性的延迟计算
2016/10/22 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
什么是Rollback Segment
2013/04/22 面试题
业务员岗位职责范本
2013/12/15 职场文书
剪彩仪式主持词
2014/03/19 职场文书
一年级小学生评语
2014/04/22 职场文书
倡议书格式模板
2014/05/13 职场文书
建筑安全责任书范本
2014/07/24 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
Elasticsearch 聚合查询和排序
2022/04/19 Python