文档章节

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

码上中国博客
 码上中国博客
发布于 2015/04/10 17:03
字数 1039
阅读 47
收藏 1
点赞 0
评论 0

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






© 著作权归作者所有

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

码上中国博客

粉丝 52
博文 72
码字总数 70310
作品 1
北京
后端工程师
jQuery中$.each()方法的使用

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

architect刘源源 ⋅ 05/02 ⋅ 0

jQuery函数attr()和prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。 但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别...

Apirl ⋅ 05/16 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

JavaScript 参考手册

JavaScript 参考手册 http://www.w3school.com.cn/jsref/index.asp 本部分提供完整的 JavaScript 参考手册: JavaScript 本地对象和内置对象 Browser 对象(BOM) HTML DOM 对象 JavaScript...

chenhao_asd ⋅ 05/25 ⋅ 0

3个简单的事情,使你的jQuery代码变得更加棒

     jQuery是现存最流行的(如果不是最多的)JavaScript库之一,并且大量的人使用它来做一些令人惊叹的事情。就个人而言,jQuery让我对学习JavaScript感到兴奋。问题是很多程序员不明白...

webstack前端栈 ⋅ 04/14 ⋅ 0

Python自动化开发学习17-jQuery

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块。 jQuery在线手册:http://jquery.cuishifeng.cn/ 官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x...

骑士救兵 ⋅ 今天 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

强大的JQuery-自定义插件

====jQuery插件编写原则===== 1.命名 jQuery..js 2.插件内部,this指向的是当前选择器取得的JQuery对象,不是内部对象, 例如click(), 内部的this指向的是DOM元素 3.this.each可以遍历所有元素...

chengfei_liu ⋅ 05/25 ⋅ 0

vue获取input输入框的数据

用惯了jQuery,突然使用vue感觉很不习惯,有很多不同的地方,感觉是两个不同的思想来写前端的代码。jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作。而Vue则是通过...

王子城 ⋅ 今天 ⋅ 0

javascript中查看元素事件函数的一些技巧

在分析一些网页的时候,经常会发现点击某个按钮会触发某个动作,当页面比较复杂,包含的js文件又多,这时候要找到这段触发函数的代码写在哪里就比较困难。比如,在某个html页面中,发现如下一...

技术小甜 ⋅ 2017/11/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

NFS介绍 NFS服务端安装配置 NFS配置选项

NFS介绍 NFS是Network File System的缩写;这个文件系统是基于网路层面,通过网络层面实现数据同步 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netapp公司参与并主导...

lyy549745 ⋅ 15分钟前 ⋅ 0

Spring AOP 源码分析 - 筛选合适的通知器

1.简介 从本篇文章开始,我将会对 Spring AOP 部分的源码进行分析。本文是 Spring AOP 源码分析系列文章的第二篇,本文主要分析 Spring AOP 是如何为目标 bean 筛选出合适的通知器(Advisor...

java高级架构牛人 ⋅ 38分钟前 ⋅ 0

HTML-标签手册

标签 描述 <!--...--> 定义注释。 <!DOCTYPE> 定义文档类型。 <a> 定义锚。超链接 <abbr> 定义缩写。 <acronym> 定义只取首字母的缩写。 <address> 定义文档作者或拥有者的联系信息。 <apple......

ZHAO_JH ⋅ 39分钟前 ⋅ 0

SylixOS在t_main中使用硬浮点方法

问题描述 在某些使用场景中,应用程序不使用动态加载的方式执行,而是跟随BSP在 t_main 线程中启动,此时应用代码是跟随 BSP 进行编译的。由于 BSP 默认使用软浮点,所以会导致应用代码中的浮...

zhywxyy ⋅ 47分钟前 ⋅ 0

JsBridge原理分析

看了这个Github代码 https://github.com/lzyzsd/JsBridge,想起N年前比较火的Hybrid方案,想看看现在跨平台调用实现有什么新的实现方式。代码看下来之后发现确实有点独特之处,这里先把核心的...

Kingguary ⋅ 59分钟前 ⋅ 0

Intellij IDEA神器常用技巧五-真正常用快捷键(收藏级)

如果你觉得前面几篇博文太啰嗦,下面是博主多年使用Intellij IDEA真正常用快捷键,建议收藏!!! sout,System.out.println()快捷键 fori,for循环快捷键 psvm,main方法快捷键 Alt+Home,导...

Mkeeper ⋅ 59分钟前 ⋅ 0

Java 静态代码分析工具简要分析与使用

本文首先介绍了静态代码分析的基本概念及主要技术,随后分别介绍了现有 4 种主流 Java 静态代码分析工具 (Checkstyle,FindBugs,PMD,Jtest),最后从功能、特性等方面对它们进行分析和比较,...

Oo若离oO ⋅ 今天 ⋅ 0

SpringBoot自动配置小记

spring-boot项目的特色就在于它的自动配置,自动配置就是开箱即用的本源。 不过支持一个子项目的自动配置,往往比较复杂,无论是sping自己的项目,还是第三方的,都是如此。刚接触会有点乱乱...

大_于 ⋅ 今天 ⋅ 0

React jsx 中写更优雅、直观的条件运算符

在这篇文字中我学到了很多知识,同时结合工作中的一些经验也在思考一些东西。比如条件运算符 Conditional Operator condition ? expr_if_true : expr_if_false 在jsx中书写条件语句我们经常都...

开源中国最帅没有之一 ⋅ 今天 ⋅ 0

vim编辑模式与命令模式

5.5 进入编辑模式 从编辑模式返回一般模式“Esc” 5.6 vim命令模式 命令 :“nohl”=no high light 无高亮,取消内容中高亮标记 "x":保存退出,和wq的区别是,当进入一个文件未进行编辑时,使...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部