文档章节

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

码上中国博客
 码上中国博客
发布于 2015/04/10 17:03
字数 1039
阅读 51
收藏 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的一些用法 有用的用法。

AJAX 框架 用Asp.net ajax 还是 Jquery? AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NETAJAX 并不包括在 AJAX 框架之中。 刚开始学了 JQuqery,众多的 $g...

雪中漫步
2010/03/29
0
0
jQuery对象与DOM对象的相互转换

下面介绍jquery对象和DOM对象的相互转换: 在使用jquery框架进行处理时,当我们使用$(expression)方法时,如:获取id="jquery_a"的div元素对象时,实际上获取到的值不是DOM对象,而是jquery对...

Sandy_wu
2013/03/27
0
1
DOM对象与jquery对象的区别

jQuery对象和DOM对象使用说明,需要的朋友可以参考下。 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它...

zwjjap
2015/07/23
0
0
Query对象和DOM对象使用说明

Query对象和DOM对象使用说明,需要的朋友可以参考下。 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它...

谢晓斌!!
2012/10/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python3.6 取余运算

python中取余运算逻辑如下: 如果a 与d 是整数,d 非零,那么余数 r 满足这样的关系: a = qd + r , q 为整数,且0 ≤ |r| < |d|。 经过测试可发现,python3.6中取余运算得到的 r 是正整数;...

colinux
10分钟前
1
0
[雪峰磁针石博客]软件测试专家工具包1web测试

web测试 本章主要涉及功能测试、自动化测试(参考: 软件自动化测试初学者忠告) 、接口测试(参考:10分钟学会API测试)、跨浏览器测试、可访问性测试和可用性测试的测试工具列表。 安全测试工具...

python测试开发人工智能安全
今天
3
0
JS:异步 - 面试惨案

为什么会写这篇文章,很明显不符合我的性格的东西,原因是前段时间参与了一个面试,对于很多程序员来说,面试时候多么的鸦雀无声,事后心里就有多么的千军万马。去掉最开始毕业干了一年的Jav...

xmqywx
今天
3
0
Win10 64位系统,PHP 扩展 curl插件

执行:1. 拷贝php安装目录下,libeay32.dll、ssleay32.dll 、 libssh2.dll 到 C:\windows\system32 目录。2. 拷贝php/ext目录下, php_curl.dll 到 C:\windows\system32 目录; 3. p...

放飞E梦想O
今天
1
0
谈谈神秘的ES6——(五)解构赋值【对象篇】

上一节课我们了解了有关数组的解构赋值相关内容,这节课,我们接着,来讲讲对象的解构赋值。 解构不仅可以用于数组,还可以用于对象。 let { foo, bar } = { foo: "aaa", bar: "bbb" };fo...

JandenMa
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部