文档章节

JQuery:各种操作表单元素方法小结

dwqs
 dwqs
发布于 2014/12/15 16:56
字数 868
阅读 8
收藏 0


表单元素无处不在,已然成了Web应用不可或缺的一个部分。对表单最最最常见的操作就是获取表单元素的值或者更改表单元素的值。那在JQuery和JavaScript中怎么操作表单元素的值?

JQuery操作表单总结:

1、文本框、密码框、隐藏域、文本域(id换成对应的,value属性存在,才能利用attr(‘value’) 获取值,否则返回undefined):

1.1 获取—>$(“#text”).val()或者$(“#text”).attr(‘value’)

1.2 设置—>$(“#text”).val(‘test’)或者$(“#text”).attr(‘value’,’test’)

2、按钮:普通按钮、重置按钮和提交按钮(id换成对应的,value属性存在,才能利用attr(‘value’) 或者val()获取值,否则attr返回undefined,val返回空

2.1 获取—>$(“#btn”).val()或者$(“#btn”).attr(‘value’)

2.2 设置—>$(“#btn”).val(‘test’)或者$(“#btn”).attr(‘value’,’test’)

3、复选框、单选框:(id换成对应的,value属性存在,才能利用attr(‘value’) 或者val()获取值,否则attr返回undefined,val返回on(不管是否存在checked属性)

3.1 获取—>$(“#check”).val()或者$(“#check”).attr(‘value’)

3.1 设置—>$(“#check”).val(‘test’)或者$(“#check”).attr(‘value’,’test’)

3.3 获取选中的复选框的值:$(“input[type=checkbox][checked]“).attr(‘value’)或者$(“input[type=checkbox][checked]“).val()【ps:只会返回第一个被选中的值】

//获取全部选中的复选框的值
$(“input[type=checkbox][checked]“).each(function(){
alert($(this).val());
})

//若要将全选中的值传递给后台,则将复选框的name属性命名为namevalue[]形式

3.4 全选、取消全选和反选(单选框不能全选,可以反选

//全选,checked的值可以是true或者checked,后者是w3c给出的值
$(“[name='test1']“).attr(“checked”,‘checked’);
//取消全选
$(“[name='test1']“).removeAttr(“checked”)//反选

$(“[name='test1']“).each(function()
{
if($(this).attr(“checked”))
{
$(this).removeAttr(“checked”);
}
else
{
$(this).attr(“checked”,’true’);
}
});

3.5 判断选中状态:$(“#test1″).attr(“checked”) :未选中返回undefined,选中返回checked。所以,$(“#test1″).attr(“checked”) == true不能作为是否选中的判断,$(“#test1″).attr(“checked”) == undefined可以作为未选中的判断。

3.6取消选择—>$(“#test1″).attr(“checked”,false)或者$(“#test1″).removeAttr(“checked”)(ps:$(“#test1″).attr(“checked”,””)在FireFox中有效,在Google中无效)

3.7 选中某个复选框(单选框)–>$(“#test2″).attr(“checked”,true)或者$(“#test2″).attr(“checked”,”checked”)

4、下拉框:

4.1 获取选中选项的值—>$(“#slt”).val()(ps:$(“#slt”).attr(‘value’)会返回undefined

4.2 设置—>$(“#slt”).val(‘audi’)(ps:如果select中有值为audi的选项,该选项就会被选中,如果不存在,则select不做任何变动

4.3 获取选中选项的文本—>$(“#slt option:selected”).text()或者$(“#slt”).find(“option:selected”).text()

4.4 设置选中选项的文本—>$(“#slt”).find(“option:selected”).text(‘test’)或者$(“#slt option:selected”).text(‘test’);

4.5 获取选中项的索引—>$(“#slt”).get(0).selectedIndex

4.6 设置索引—>$(“#slt”).get(0).selectedIndex = index(ps:索引从0开始,index的最大值不能超过option的最大索引,否则$(“#slt”).get(0).selectedIndex 返回-1)

4.7 清空select—>$(“#slt”).html(”) 或者$(“#slt”).empty()

4.8 添加option—>$(‘<option value=”1″>1</option>’).appendTo($(“#slt”))  或者  $(“#slt”).append(‘<option value=”3″>2</option>’);

4.9 删除option—>$(“#slt option[value='opel']“).remove():删除值是opel的option(value属性要存在,同样可以根据存在的text/index属性删除option

5、元素的可用性(disabled的官方值是disabled)

5.1 禁用元素—>$(“#text”).attr(“disabled”,true)或者$(“#text”).attr(“disabled”,”disabled”);

5.2 启用元素—>$(“#text”).attr(“disabled”,false) 或者$(“#text”).removeAttr(“disabled”);

5.3 是否可用—>$(“#text”).attr(“disabled”) 返回disabled则不可用,返回undefined则可用(ps:可以根据$(“#text”).attr(“disabled”) ==undefined的返回值判断


原文首发:http://www.ido321.com/1220.html


© 著作权归作者所有

dwqs
粉丝 3
博文 20
码字总数 24979
作品 0
广州
程序员
私信 提问
jQuery零基础入门——(五)操作DOM

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

JandenMa
2018/07/14
0
0
jQuery ajax - serialize()方法以及常见问题

使用ajax时,常常需要拼装input数据为'name=abc&sex=1'这种形式,用JQuery的serialize方法可以轻松的完成这个工作! jQuery ajax - serialize() 方法定义和用法 serialize() 方法通过序列化表...

freedonn
2014/05/10
0
0
JavaWeb05-HTML篇笔记(一)

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

我是小谷粒
2018/05/10
0
0
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/82530844 网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系 在项目开发过...

孙华强
2018/09/08
0
0
jQuery之validate验证表单

访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 vali...

codingcoge
2018/05/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

抽离css以及公共js

分离css 分离css:为何要把 CSS 文件分离出来,而不是直接一起打包在 JS 中。最主要的原因是我们希望更好地利用缓存。 extract-text-webpack-plugin > 1. 假设我们原本页面的静态资源都打包成...

莫西摩西
40分钟前
1
0
面向对象的7大原则

https://blog.csdn.net/u010355144/article/details/44940171

南桥北木
59分钟前
2
0
Jenkins的配置从节点中默认没有Launch agent via Java Web Start,该如何配置使用

Jenkins的配置从节点中默认没有Launch agent via Java Web Start,如下图所示,而这种启动方式在Windows上是最方便的。 如何设置才能让出来呢? 1:打开"系统管理"——"Configure Global Sec...

shzwork
今天
2
0
BAT面试必问HashMap源码分析

HashMap 简介 HashMap 主要用来存放键值对,它基于哈希表的Map接口实现,是常用的Java集合之一。 JDK1.8 之前 HashMap 由 数组+链表 组成的,数组是 HashMap 的主体,链表则是主要为了解决哈...

别打我会飞
今天
10
0
RISC-V双周简报0x1f:一晚上写个RISC-V处理器玩玩(2018-09-01)

https://cnrv.io/bi-week-rpts/2018-09-01 https://blog.csdn.net/zoomdy/article/details/82914730...

whoisliang
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部