jquery对象和DOM对象的相互转换详解

jquery对象和DOM对象的相互转换

在讨论jquery对象和DOM对象的相互转换之前,先约定好定义变量的风格如果获取的是jquery对象,那么在变量前面加上$,例如

var $varible = jquery对象;

如果获取的是DOM对象,则定义如下:

var varible = DOM对象;

1.jquery对象转成DOM对象:

jquery对象不能使用DOM中的方法,但如果对jquery对象所提供的方法不熟悉,或者没有jquery想封装的方法,不得不使用DOM对象,即【index】和get[index].

(1)jquery对象是一个数组对象,可以通过【index】的方法得到相应的DOM对象。

jquery的代码如下

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var $cr = $("p");  //jquery对象
  var cr = $cr[1];  //dom对象
  var ct = $cr.get(0)  //第二种转换为DOM对象的方式
  cr.innerHTML = "you"  //检测是否转换成功,可以用DOM方法 输出结果为第二个my改成了you
  ct.innerHTML = 'fuck'  //输出结果第一个my改成了fuck
</script>
</body>

(2).DOM对象转换为jquery对象:

对于一个DOM对象,只需要用$()把DOM对象给包装起来,就可以获得一个jquery对象了,方式为$(DOM对象)。

jquery代码如下:

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var cr = document.getElementsByTagName("p") //DOM对象
  var $cr = $(cr);   //jquery对象
  $cr.eq(0).("fuck"); //检测是否转换成功,可以用jquery方法 输出结果为第二个my改成了fuck
  $cr.eq(1).html("you"); //输出结果为my改成you
</script>
</body>

转换后,可以任意使用jquery方法。

通过以上方法,可以任意的相互转换jquery对象和DOM对象。

最后再次强调,DOM对象才能使用DOM方法,jquery对象不能使用DOM中的方法,但jquery对象提供了一套更加完善的工具用于操作DOM。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

时间: 2016-10-16

jquery对象和DOM对象的任意相互转换

什么是jQuery对象? ---就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法. 比如: $("#test").html() 意思是指:获取ID为test的元素内的html代码.其中html()是jQuery里的方法 这段代码等同于用DOM实现代码: document.getElementById("id").innerHTML; 虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法

浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)

首先,准备新建一个js文件.以下是JSON2.js的内容,把内容拷到js文件中,以便调用: 复制代码 代码如下: /*    http://www.JSON.org/json2.js    Public Domain.    NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.    See http://www.JSON.org/js.html    This code should be minified before deploym

jquery中实现时间戳与日期相互转换

直接看代码: 提醒:不要忘记了引用jquery的类库 (function($) { $.extend({ myTime: { /** * 当前时间戳 * @return <int> unix时间戳(秒) */ CurTime: function(){ return Date.parse(new Date())/1000; }, /** * 日期 转换为 Unix时间戳 * @param <string> 2014-01-01 20:20:20 日期格式 * @return <

jquery实现将获取的颜色值转换为十六进制形式的方法

本文实例讲述了jquery实现将获取的颜色值转换为十六进制形式的方法.分享给大家供大家参考.具体分析如下: 大家或许已经注意到了,在谷歌.火狐和IE8以上浏览器中,获取的颜色值是RGB形式,例如rgb(255,255,0),感觉非常不适应,或者在实际编码中不方便使用,这个时候就需要进行转换,下面就提供一段相关转换代码. 具体代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf

Jquery中增加参数与Json转换代码

在jquery中,使用$("#myform").serialize()可以将表单的内容构造成一个querystring,例如width=1680&height=1050这样的表达式,可以转化为json 表达式{"width":"1680","height":"1050"}. 有时候,我们需要进一步转化为json表达式,参考Ext中的Ext.urlDecode函数,我们可以实现一个相应的jquery中

基于jQuery.Hz2Py.js插件实现的汉字转拼音特效

可以实现基于jQuery实现汉字转换成拼音代码.这是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效.插件自行下载.使用方法如下(注意修改jq的引入路径). <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>基于jQuery实现汉字转换成拼音代码</title> <

通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件

复制代码 代码如下: //潇湘博客 //http://blog.csdn.net/fkedwgwy //PHP 技术群:37304662 //时间:2010-06-13 //版本 v3.0.0.0 //任意字符.中文与拼音综合查询 //方向键选择option //优化下拉框显示效果 //jquery超级select插件 $.fn.selectseach = function() { String.prototype.trim = function() { return this.replace(

jquery如何把参数列严格转换成数组实现思路

如果某参数的列只有一个参数,那么each是失败,请看下面的例子 Java代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <style> p { margin: 8px; font-size:16px; } .selected { color:red; } .highlight { background:yellow; } </style> <script src="http://code.

jQuery实现QQ空间汉字转拼音功能示例

本文实例讲述了jQuery实现QQ空间汉字转拼音功能.分享给大家供大家参考,具体如下: html: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>QQ空间的汉字转拼音代码</title> <scrip

jquery 将当前时间转换成yyyymmdd格式的实现方法

如题: function nowtime(){//将当前时间转换成yyyymmdd格式 var mydate = new Date(); var str = "" + mydate.getFullYear(); var mm = mydate.getMonth()+1 if(mydate.getMonth()>9){ str += mm; } else{ str += "0" + mm; } if(mydate.getDate()>9){ str +=

基于jquery的使ListNav兼容中文首字拼音排序的实现代码

效果图如下所示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>中

获取字符中中文首字字符

复制代码 代码如下: <% '获取字符中中文首字字符     '返回:A-Z ;123 ; ###     Public Function GetSpellChar(str)         Dim tmp         GetSpellChar = "@"         tmp = 65536 + Asc(str)         If (tmp >= 45217 And tmp <= 45252) Or (tmp = 65601) Or (tmp = 6563

JS实现中文汉字按拼音排序的方法

本文实例讲述了JS实现中文汉字按拼音排序的方法.分享给大家供大家参考,具体如下: 代码1,拼音排序: var array = ['武汉', '北京', '上海', '天津']; var resultArray = array.sort( function compareFunction(param1, param2) { return param1.localeCompare(param2,"zh"); } ); console.log(resultArray); 火狐浏览器 resu

两种方法基于jQuery实现IE浏览器兼容placeholder效果

placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有略微不同的显示效果: 在Chrome( v31.0.1650.63 m).Firefox( v21.0 ).360安全( v6.3 极速模式 )中,输入栏获得焦点后,提示文字并不消失,如图( Chrome ): 获得焦点前: 获得焦点时: 偏偏IE11要搞点特殊: 获得焦点前: 获得焦点时: 也就是说获得焦点时提示的文字会消失. 非现代浏览器( 例如 IE6-IE9 )是不支持pl

mysql的中文数据按拼音排序的2个方法

客服那边需要我对一些酒店进行中文拼音排序,以前没有接触过,在php群里问了一些大牛..得到了2种答案,都可以.哈哈·~ 以下既是msyql 例子,表结构是utf-8的 方法一. 复制代码 代码如下: SELECT `hotel_name` FROM `hotel_base` ORDER BY convert( `hotel_name` USING gbk ) COLLATE gbk_chinese_ci 方法二. 复制代码 代码如下: SELECT `hotel_id` , `hotel_nam

基于jQuery的合并表格中相同文本的相邻单元格的代码

ONE 已经生成的数据表格大致内容如下: 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 广东 深圳 00028 红花油               广东 深圳 00028 红花油               广东 深圳 00028 红花油               广东 广州 00027 白花油               广东 广州 00028 红花油               广东 深圳 00028 红花油               广东

基于Jquery的将DropDownlist的选中值赋给label的实现代码

jquery代码 复制代码 代码如下: $(function() { $("#DropDownList1").bind("change", function() { $("#Label1").text($("#DropDownList1 option:selected").text()); }); 或者 复制代码 代码如下: $("#DropDownList1").bind("change&quo

基于jquery的高性能td和input切换并可修改内容实现代码

在之前的基础上,添加方向键左右支持. 在实际工作中,我们会碰到这样一个情况.在页面中显示着100个数据,同时用户还希望他可以更改其中的数据,普通的方式可能如下, 这种方式会出现一个问题,就是页面显示的时候有点慢,同时如果有滚动条的话,会有些卡.下面给出我的一个解决方法,显示的时候全是td的,没有input标签,如下 当你点击其中一个td时,就会出现下面这样 当你点击td的时候,会在td动态加入一个input同时把td的值赋给input,当你鼠标离开input时,会把input的值赋给td.同时支

基于jquery的禁用右键、文本选择功能、复制按键的实现代码

同时适合IE.firefox.谷歌浏览器下适用,经过筛选代码如下: 复制代码 代码如下: //禁用右键.文本选择功能.复制按键$(document).bind("contextmenu",function(){return false;});$(document).bind("selectstart",function(){return false;});$(document).keydown(function(){return key(arguments[0])}