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

最新推荐文章于 2024-09-06 10:49:39 发布

weixin_34377065

最新推荐文章于 2024-09-06 10:49:39 发布

阅读量123

点赞数

文章标签： json javascript python ViewUI

原文链接：https://my.oschina.net/guopengfei/blog/398652

版权

2019独角兽企业重金招聘Python工程师标准>>>

一、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中了。

转载于:https://my.oschina.net/guopengfei/blog/398652