文档章节

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

码上中国博客
 码上中国博客
发布于 2015/04/10 17:03
字数 1039
阅读 55
收藏 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
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
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

没有更多内容

加载失败,请刷新页面

加载更多

wordpress 汉化

在 wp-config.php 添加 define('WPLANG','zh_CN'); 在后台,更新 now ,即可。

james_laughing
23分钟前
0
0
Android JNI开发系列(十一) JNI 访问父类的构造方法和父类实例方法

JNI 访问父类的构造方法和父类实例方法 构造方法和父类实例方法 先看一段Java代码, Java package org.professor.jni.animal;import android.util.Log;public class Animal {protecte...

蔡小鹏
30分钟前
1
0
腾讯投资最高1.75亿美元正式进军菲律宾移动支付市场

菲律宾长途电话公司(PLDT)公司今日宣布,中国互联网巨头腾讯和私募股权公司KKR将获得该公司旗下金融科技公司Voyager Innovations的少数股权。 PLDT在一份声明中称:“腾讯和KKR最多将分别收...

linuxCool
57分钟前
2
0
正则介绍及grep/egrep用法

10月16日任务 9.1 正则介绍_grep上 9.2 grep中 9.3 grep下 扩展 把一个目录下,过滤所有*.php文档中含有eval的行 grep -r --include="*.php" 'eval' /data 正则介绍 正则就是一串有规律的字符...

hhpuppy
今天
3
0
J2Cache 中使用 Lettuce 替代 Jedis 管理 Redis 连接

一直以来 J2Cache 都是使用 Jedis 连接 Redis 服务的。Jedis 是一个很老牌的 Redis 的 Java 开发包,使用很稳定,作者维护很勤勉,社区上能搜到的文章也非常非常多。算是使用范围最广的 Redi...

红薯
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部