文档章节

Dom 和 Jquery,json对象的使用方法

码上中国博客
 码上中国博客
发布于 2015/04/10 17:03
字数 1039
阅读 59
收藏 1

一、dom对象和jquery的互相转化

比如有以下代码

<div id="fir">
    <input type="text" />
</div>

那么我们通常获取这个文本输入框的方式有两种,一种使用jquery方式

<script type="text/javascript">
    function getValue(){
       var text = $("#inputArea");
       alert(text.val());
    }
</script>

一种使用dom(document)方法

<script type="text/javascript">
    function getValue(){
       var text = document.getElementById("inputArea");
       alert(text.value);
    }
</script>

由于使用不同方法获取的对象类型的不同,那么对其进一步操作的函数也不同,比如上面获取输入框的值的方式。由于我们经常需要在jquery对象和dom对象之间相互使用,那么我就来说一种方法。

1.jquery对象转为dom对象

对于使用jquery获取的text对象,它是一个jquery对象,我们把它转化成dom对象的方法是在其后面加上数组,如下

<script type="text/javascript">
    function getValue(){
       var text = $("#inputArea");
       var domText = text[0];
       alert(text.value);
    }
</script>

数组内的数字必须写为0才可以正常的将这个jquery对象转为dom对象,转化为dom对象后,就可食用dom对象的方法了。

当然,还可以使用下面的方式转化

var domText =text.get(0); //DOM对象

2.dom对象转为jquery对象

dom对象转为jquery对象很简单,只需要将一个dom对象用$()包裹起来,就可以转为jquery对象,如下

<script type="text/javascript">
    function getValue(){
        var text = document.getElementById("inputArea");
        var jqueryText = $(text);
        alert(jqueryText.val());
    }
</script>

二、dom对象中的nextSibling和jquery中的next()方法的比较

在jquery的官方api中是这样解释它的next()方法的:取得一个包含匹配的元素集合中每一个元素紧邻的后面的同辈元素的元素集合。这个函数只返回后面的的那个紧邻的同辈元素,而不是所有的同辈元素(可以使用nextAll)。

dom官方中api对它的nextSibling解释和jquery差不多,那么他们之间到底有什么不同呢?

通常来说,如果想遍历同辈的子节点,那么,我强烈建议使用dom中的这个方法,它有一个好处,就是不会让你的代码陷入无限死循环,如下

var thisNode = op.parent()[0].nextSibling;    //后面的紧邻的同辈的子节点
while(thisNode){
    var tempValue = thisNode.value;
    thisNode = thisNode.nextSibling;
}

当它遍历玩所有的同辈子节点后,变回跳出while循环,但是当你使用jquery中的next()方法遍历时,你就会返现,它不停的在跑啊跑,跑啊跑,然后没日没夜的跑,程序始终不能跳出这个wihle循环,代码如下

var thisNode = op1.next();    //后面的相邻的同辈的子节点
while(thisNode){
    var tempValue = thisNode.val();
    thisNode = thisNode.next();
}

原因如下,在jquery中,当遍历到最后一个同辈子节点时,此子节点的next()是它的父节点的末尾。比如,一个div包裹着所有的子节点,那么,它遍历到最后将会碰到</div>这个tag,那么它就会发现,咦?<div>不也是一个节点么?好吧,那我接着遍历,好吧,这就是它停不下来的原因。坑爹的jquery。

当然,你也可以通过一系列的判断来消除这个影响,但是这不属于目前的讨论范畴。

三、json追加数组的方法

在前端的操作中,我们经常需要json作为一个中间变量在不同的方法之间传递,而json本身具有很好的延展性,那么如何向一个json对象中追加一个新的json数组呢?如下

<script type="text/javascript" >
    function addJson(){
        var j =[{"name":"caocao","sex":"男"}];
        var newJson = '{"name":"liubei","sex":"男"}';
        j.push(JSON.parse(newJson));
        alert(JSON.stringify(j));
    }
</script>

在上述代码中,j为一个json对象,而newJson为一个json结构的字符串,那么如果想往j中添加这个字符串,就必须先把它转化为json对象才可以,然后就可以通过push方法追加到j中了。






© 著作权归作者所有

共有 人打赏支持
码上中国博客

码上中国博客

粉丝 53
博文 74
码字总数 70310
作品 1
北京
后端工程师
私信 提问
jQuery零基础入门——(四)查找和过滤

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 通常情况下选择器可以直接定位到...

JandenMa
07/11
0
0
jQuery中$.each()方法的使用

$.each()是对数组,json和dom结构等的遍历,说一下他的使用方法吧。 1、遍历一维数组 var arr1=['aa','bb','cc','dd'];$.each(arr1,function(i,val){ //两个参数,第一个参数表示遍历的数组的...

architect刘源源
05/02
0
0
Zepto.js简介(第二章)

接着上章的继续记录。 zepto 特点: 1、体积8kb 2、针对移动端的框架 3、语法同jquery大部分一样,都是$为核心函数 4、目前功能完善的框架体积最小的左右 zepto同jquery不同的API attr同pro...

张靖bibibi
06/22
0
0
Python全栈 Web(jQuery 一条龙服务)

jQuery 1.jQuery介绍 jQuery是一个轻量级的JS库 - 是一个被封装好的JS文件,提供了更为简便的元素操作方式 核心理念:Write Less Do More jQuery版本: jQuery 2.x 不再支持IE6.7.8 jQuery 1.11...

巴黎香榭
09/17
0
0
dom对象和jQuery对象的区别

1.jQuery对象和DOM对象 在第一次学习Jquery的时候也许大家都不是很清楚Jquery对象和DOM对象两者之间的关系,下面就解释两点,便于对Jquery和Dom加深理解 DOM对象,即是我们用传统的方法(java...

DockOne
2014/07/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Supplier函数式接口

Supplier接口的不传入参数,返回一个值。真是一个无私奉献的接口,还没有default方法。 下面就想用一个接口试试,其实我本来用的是IntSupplier,但是发现在使用方法引用的时候,不好把Math....

woshixin
14分钟前
0
0
MyBaties一级缓存

一、一级缓存简介 在系统代码的运行中,我们可能会在一个数据库会话中,执行多次查询条件完全相同的Sql,鉴于日常应用的大部分场景都是读多写少,这重复的查询会带来一定的网络开销,同时sel...

嘴角轻扬30
21分钟前
0
0
jquery

语法 描述 实例 $("*") 选取所有元素 在线实例 $(this) 选取当前 HTML 元素 在线实例 $("p.intro") 选取 class 为 intro 的 <p> 元素 在线实例 $("p:first") 选取第一个 <p> 元素 在线实例 ...

mskk
26分钟前
1
0
微信红包设计方案

前言 微信红包一经推出,春节期间微信用户红包总发送量达80.8亿,红包峰值40.9w/秒,在如此量级下,系统设计存在各种变数,稍有闪失会功亏一篑。 红包系统 红包系统有三部分组成:信息流,业...

春哥大魔王的博客
36分钟前
1
0
微信开发-正式号的配置

1、设置相关 业务域名的设置(不设置的话,相关页面会显示防欺诈盗号信息提示) JS接口安全域名设置 网页授权域名设置 注意:以上三个设置中都有下载文件的提示,此文件内容一样,下载一个即可...

Code辉
41分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部