文档章节

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

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






© 著作权归作者所有

码上中国博客

码上中国博客

粉丝 61
博文 76
码字总数 73492
作品 1
北京
后端工程师
私信 提问
加载中

评论(0)

jQuery零基础入门——(四)查找和过滤

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

JandenMa
2018/07/11
42
0
Jquery AJAX 框架的使用方法

刚开始学了 JQuqery, 众多的 $get(),...等等符号早已把我搞晕了。暂时就放弃了。 后来学习 ASP.NET AJAX ,在微软的领导下,逐渐由服务器端转向客户端编程。 激起我客户端编程的兴趣, 才想...

osc_0xf6ethk
2019/07/29
2
0
详解JS与Jquery获得的对象的区别与联系

世上无难事只怕有心人,敲代码也一样只要你用心去搞懂一件事,即使一个小小的用法对你以后也会有很大的作用; 项目虽然赶得紧但是有些问题百度找完答案解决之后,也要自己梳理一遍做到心领神...

osc_msovf13n
2019/08/12
1
0
有关getElementById,getElementsByClassName和$的区别和互通性

延伸话题:如何获取标签名称(js,jquery) 1.原生js:document.getElementById("archivie_scheme").tagName     document.getElementById("archivie_scheme").nodeName 2.Jquery:$(".ar......

osc_f4gmzqne
2018/05/03
2
0
前端面试题整理—jQuery篇

1、为什么使用jquery,他有哪些好处?   1)轻量级、代码简洁   2)强大的选择器,出色的DOM操作封装   3)有可靠的事件处理机制   4)浏览器兼容性好   5)支持链式操作   6)支...

osc_8mj3ztvg
2019/03/30
5
0

没有更多内容

加载失败,请刷新页面

加载更多

君子动手不动口,阿里云喊你做云上体验官啦!

想要免费搭建云上博客?想要玩转全云端开发?想要挑战AI经典命题?想要7天进阶成为云计算专家?想要初始化你的云原生工程?快来阿里云 Hands-on Labs! Hands-on Labs 是阿里云全新推出的云上...

osc_18ydlfr7
20分钟前
16
0
CAD图纸转换成图片格式后,如何快速分享给同事?

我们常见的图片格式有PNG与JPG两种,这两种图片在很多平台上都能兼容,所以使用的几率特别高,很多办公室人员都会遇到把CAD图纸转换成PNG与JPG格式的工作。那么我们把CAD图纸转换成图片格式后...

真不莲
22分钟前
25
0
测试真的是一个无聊又没前途的岗位吗?是吗?不是吗?

同事小王:你第一份工作同事咋样?为什么离职? 测试小张:第一份工作就是测试,微软外包。别人在测试完了以后不知道干嘛,我抓紧时间看vs的源代码,抓紧时间看pheonix的源代码,抓紧时间看微...

osc_3zq7ptf4
22分钟前
13
0
怎么在电脑上进行视频截图?视频截图的简单步骤介绍

怎么在电脑上进行视频截图?小编最近在网上看到不少关于郑爽的话题文章,而不少文章都是通过视频截图的形式把她以前的影视作品截图下来,然后对她的演技和人品进行议论和评判。如果大家也想对...

玛哈菲亚
22分钟前
20
0
CAAI云课堂丨第十三期,北京交通大学人工智能研究院院长于剑开讲

     开启云端互动,CAAI带你与名师面对面。中国人工智能学会积极探索学术交流创新模式,围绕AI+学术、AI+技术以屏幕架起连接智能科技知识的桥梁,探索新型模式,开设CAAI云课堂等系列活...

osc_j5pkc521
23分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部