文档章节

jquery获取input、select、span等的值,以及给他们赋值

不打伞的小鱼
 不打伞的小鱼
发布于 2015/03/26 15:31
字数 458
阅读 32
收藏 0
点赞 0
评论 0

    经常要用到jquery取值、赋值的操作,本人记性不好,悟性又太差,所以还是相信古语:好记性不如烂笔头。就把这些都总结一下,以备不时之需。

       html:

                <span id="spanId" name="spanName"></span>

                <table><tr><td id="tdId"></td></tr></table>

                <input id="inputId1" name="inputName1" type="text">

                <input type="radio" name="inputName2" value="N" /> 否
                <input type="radio" name="inputName2" value="Y"  /> 是

                <select id="selectId"><option value="1" selected='selected'>湖南</option></select>

    1.文本框的值(span、td等)

      取值有很多方式,比如根据id取,或者根据name;可以取的值也有很多,比如根据id取name的值,取其中某个属性的值,下面来一一说明。

      1)根据id取span、td、input的值

            $("#spanId").html();    或者 $("#spanId").text();

            $("#tdId").html();        或者 $("#tdId").textl();

      2)根据name取span、td、input的值

            $("span [name='spanName']").html();  或者  $("span [name='spanName']").text();

            $("td[name='']).html();            或者 $("td[name='']).html();

     赋值的方式与取值有点类似:

       3)根据id给span、td、input赋值

            $("#spanId").html("hello");    或者 $("#spanId").text("hello");

            $("#tdId").html("hello");        或者 $("#tdId").textl("hello");

       4)根据name给span、id、input为text赋值

            $("span [name='spanName']").html("hello");  或者  $("span [name='spanName']").text("hello");

            $("td[name='']).html("hello");            或者 $("td[name='']).html("hello");

       5)给span、td、input等添加一些自定义的属性和取值

            例如:给上面的span、input添加一个属性:userName

                        $("#spanId").attr("userName");

                        $("#inputId1").attr("userName");

                      给userName赋值:

                        $("#spanId").attr("userName","河小鱼");

                        $("#inputId1").attr("userName","河小鱼");

                      删除userName属性:

                        $("#spanId").removeAttr("userName");

                        $("#inputId1").removeAttr("userName");


      2.获取input type为radio的选中的值

           由于是单选框,所以给两个radio相同的name,如下:

            $("input[name='inputName2']:checked").val();

      3.获取select的选中值

            $("#selectId").find("option:selected").val();  注意:这里得到的是选中的option的value值,要得到文本值,则需                要:     $("#selectId").find("option:selected").text();


         

© 著作权归作者所有

共有 人打赏支持
不打伞的小鱼
粉丝 72
博文 42
码字总数 24218
作品 0
深圳
程序员
js (jQuery) 之 取值

都是一些老生常谈,没什么新东西,算是开发过程中不知道怎么写去百度的一些东西 。都说程序员写博客是一个好习惯,算是一份保存笔记,以后不用到处百度然后出来的一些答非所问的答案 。 1: ...

architect刘源源 ⋅ 05/07 ⋅ 0

jQuery中,html、val与text的区别与联系

文章作者:Tyan 博客:noahsnail.com | CSDN | 简书 本文主要介绍如何使用jQuery中的html(),text()和val()三种方法,用于读取、修改元素的html结构,元素的文本内容,以及表单元素的value值...

quincuntial ⋅ 2016/11/22 ⋅ 0

jQuery学习笔记--效果,操作html元素,遍历DOM树

参考W3school: http://www.w3school.com.cn/jquery/jqueryhideshow.asp jQuery效果: 隐藏: 基础语句: $(selector).hide(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以...

codingcoge ⋅ 05/19 ⋅ 0

thinkPHP实现瀑布流的方法

thinkPHP实现瀑布流的方法 文章TAG:thinkphp 瀑布流 过期已备案域名,注册就能用!终身VIP会员,畅享源码下载织梦精美仿站,火热预定中! 本文实例讲述了thinkPHP实现瀑布流的方法。分享给大...

thinkyoung ⋅ 2015/10/10 ⋅ 0

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

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

Apirl ⋅ 05/16 ⋅ 0

JavaScript 参考手册

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

chenhao_asd ⋅ 05/25 ⋅ 0

JavaWeb05-HTML篇笔记(一)

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

我是小谷粒 ⋅ 05/10 ⋅ 0

JAVAScript强大的框架:Jquery(一)

一:jQuery是什么 为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并...

architect刘源源 ⋅ 05/08 ⋅ 0

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

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

codingcoge ⋅ 05/17 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

收集自网络的wordpress 分页导航的代码教程(全网最全版)

wordpress 分页导航是用来切换文章的一个功能,添加了 wordpress 分页导航后,用户即可自由到达指定的页面数浏览分类文章,而这样的一个很简单功能却有很多朋友在用插件:WP-PageNavi,插件的...

Rhymo-Wu ⋅ 20分钟前 ⋅ 0

微服务 WildFly Swarm 入门

Hello World 就像前面章节中的其他框架一样,我们希望添加一些基本的 Hello-world 功能,然后在其上逐步添加更多的功能。让我们从在我们的项目中创建一个 HolaResources 开始。您可以使用您的...

woshixin ⋅ 27分钟前 ⋅ 0

Maven的安装和Eclipse的配置

1. 下载Maven 下载地址 2. 解压压缩包,放到自己习惯的硬盘中 此处我将其放到了 D:\Tools 目录下。 3. 配置环境变量 右键此电脑 -> 属性 -> 高级系统设置 -> 环境变量。 在系统变量中新建,变...

影狼 ⋅ 34分钟前 ⋅ 0

python pip使用国内镜像的方法

国内源 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/ 华中理工大学:http://......

良言 ⋅ 35分钟前 ⋅ 0

对于url变化的spa应该如何使用微信jssdk

使用vue单页面碰上微信jssdk config验证失败的坑。第一次成功 之后切换页面全部失败,找到了解决方法,第一次验证成功后保存验证信息 切换页面时验证信息直接拿来用,加一个wx.error() 失败时...

孙冠峰 ⋅ 39分钟前 ⋅ 0

Spring Cloud Gateway 一般集成

SCF发布,带来很多新东西,不过少了点教程,打开方式又和以前的不一样,比如这个SCG,压根就没有入门指导,所以这里写一个,以备后用。 一、集成 pom.xml <dependency> <groupI...

kut ⋅ 43分钟前 ⋅ 0

建造模式

《JAVA与模式》之建造模式

Cobbage ⋅ 57分钟前 ⋅ 0

WePY框架开发的小程序如何在微信web开发者工具中运行起来

一、首先需要安装node.js,安装步骤如下: 首先下载安装包 https://nodejs.org/en/download/ 点击下载相应的zip版本 然后将文件夹解压到任意目录 比如我这里解压到了:C:\Program Files\node...

Helios51 ⋅ 今天 ⋅ 0

使用EnumSet 代替位域(32)

1、位域(Bit field):使用or 运算将几个常量合并到一个集合中 位操作,可以有效地执行 AND 、OR 这样的位操作 但是 位域比int 常量枚举缺点更多 2、java.util 包里面的EnumSet 类是有效的替...

职业搬砖20年 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部