网站首页 > 编程文章 正文
val([val|fn|arr])获得匹配元素的当前值(表单元素中的value值)。
val String
function(index, value) Function 此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。
array Array<String> 用于 check/select 的值
$("[name=radioGroup]:checked").val();以上代码直接获取name属性为"radioGroup"的表单元素中选中项的value值。
对于某些元素(例如<option>>、<button>等),如果没有设置value值将返回由选中项的value值组成的数组。
获取文本框中的值
jQuery 代码:
$("input").val();设定文本框的值
jQuery 代码:
$("input").val("hello world!");jQuery 代码:
$('input:text').val(function() {
return this.value + ' ' + this.className;
});单选框、复选框、下拉式列表操作
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option value="Multiple1" selected="selected">Multiple1</option>
<option value="Multiple2">Multiple2</option>
<option value="Multiple3" selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2jQuery 代码:
$("#single").val("Single2"); //等同于$("#single").val(["Single2"]);
$("#multiple").val(["Multiple2", "Multiple3"])|| []; //因为存在不选的情况
$("input").val(["check2", "radio1"]);
//方法一：
//比如要选中值为wuhan的选项：
$("#select").val("wuhan");
//方法二：
$("#select option[value='wuhan']").prop("selected","selected");注意:
$("select").val(['列表项1','列表项2']); //为下拉列表框设置多选值
全选、反选、全不选
$().attr("checked",true); //设置复选框选中
$().attr("checked",false); //取消复选框选中
$().attr("checked"); //判断复选框选中情况，返回布尔值
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function selAll(){
//全选
//jquery的大部分方法本身有遍历机制，会为匹配到的每个节点设置对应的属性
//例如如下两个方法的使用效果
//$('li').css('color','red') 使得全部li的文字都变为红色
$('.hby').attr('checked',true);//使得class=hby的复选框都选中
}
function notSelAll(){
//全不选
$('.hby').attr('checked',false);
}
function fanSel(){
//反选
//遍历每个复选框，判断是否选中，选中就取消、否则给选中
for(var i=0; i<$('.hby').length; i++){
var flag = $('.hby:eq('+i+')').attr('checked');
$('.hby:eq('+i+')').attr('checked',!flag);
}
}
</script>
</head>
<body>
<h2>全选/全不选/反选操作</h2>
<p>爱好：
<input type="checkbox" name="hobby[]" class="hby" value='a'>篮球
<input type="checkbox" name="hobby[]" class="hby" value='b'>台球
<input type="checkbox" name="hobby[]" class="hby" value='c'>网球
<input type="checkbox" name="hobby[]" class="hby" value='d'>足球
</p>
<input type="button" value="全选" onclick="selAll()" /><br />
<input type="button" value="全不选" onclick="notSelAll()" /><br />
<input type="button" value="反选" onclick="fanSel()" /><br />
</body>
</html>实例1：
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//获取 选中复选框的value值
//获得全部选中的复选框、遍历之、获得value值
//console.log($('.hby:checked'));
var s = "";
for(var i=0; i<$('.hby:checked').length; i++){
//获得当前复选框节点
s += $(".hby:checked:eq("+i+")").val()+","; //attr('value')
}
s = s.substr(0,s.length-1);//去除最后的","逗号
$("#content").html(s);
}
function f2(){
//设置
//例如：篮球、网球、足球选中
//$().val([v1,v2,v3...]);//v1/v2/v3代表选中项目的value值
$('.hby').val(['a','c','d']);//使得a/c/d value值的复选框选中
}
</script>
</head>
<body>
<h2>复选框操作</h2>
<p>爱好：
<input type="checkbox" name="hobby[]" class="hby" value='a'>篮球
<input type="checkbox" name="hobby[]" class="hby" value='b'>台球
<input type="checkbox" name="hobby[]" class="hby" value='c'>网球
<input type="checkbox" name="hobby[]" class="hby" value='d'>足球
</p>
<div id="content"></div>
<input type="button" value="获取" onclick="f1()" /><br />
<input type="button" value="设置" onclick="f2()" /><br />
</body>
</html>实例2：
<html>
<head>
<title>val(value)方法</title>
<style type="text/css">
<!--
input{
border:1px solid #006505;
font-family:Arial, Helvetica, sans-serif;
}
p{
margin:0px; padding:5px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("input[type=button]").click(function(){
var sValue = $(this).val(); //先获取按钮的value值
$("input[type=text]").val(sValue); //赋给文本框
});
});
</script>
</head>
<body>
<p><input type="button" value="Feed">
<input type="button" value="the">
<input type="button" value="Input"></p>
<p><input type="text" value="click a button"></p>
</body>
</html>扩展:$("input[type=text]").val(sValue); 可以设置多个值
$("input[type=text]").val([sValue,'广水']);单击三个按钮后,表单内(<input type="text" value="click a button"> )显示"Feed,广水"、"the,广水"、"click a button,广水"
表单序列化
serialize() 返回值:String
序列表表格内容为字符串。
实例：序列表表格内容为字符串，用于 Ajax 请求。
HTML 代码:
<p id="results"><b>Results: </b> </p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/> check2
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>jQuery 代码:
$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );serializeArray() 返回值:Array<Object>
序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
注意: 此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。
返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对——name参数和value参数（如果value不为空的话）。举例来说：
[
{name: 'firstname', value: 'Hello'},
{name: 'lastname', value: 'World'},
{name: 'alias'}, // this one was empty
]实例：取得表单内容并插入到网页中。
HTML 代码:
<p id="results"><b>Results:</b> </p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/> check2
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>jQuery 代码:
var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
$("#results").append(field.value + " ");
});猜你喜欢
- 2024-09-10 前端程序员要学习的html前端页面的优化方法
- 2024-09-10 如何加载jquery（如何加载字体）
- 2024-09-10 jQuery 功能扩展（jquery的功能）
- 2024-09-10 jquery是干什么的--乐字节前端（jqueryui是干什么的）
- 2024-09-10 超全面!这可能是最全面的 jQuery 知识总结
- 2024-09-10 分享一个通用代码——飘窗(兼容各种浏览器)
- 2024-09-10 JavaScript入门系列:基础知识与语法整理笔记
- 2024-09-10 JS类库Jquery(一):JQuery入门，优雅的使用JQuery
- 2024-09-10 初步认识，JavaScript的超级库jQuery
- 2024-09-10 ejschart 最简便的前端图表框架-入门篇
欢迎 你 发表评论:
- 06-24一个老爸画了超级有爱的365幅画 | 父亲节献礼
- 06-24产品小白看魏则西事件——用产品思维审视百度推广
- 06-24某教程学习笔记(一):13、脚本木马原理
- 06-24十大常见web漏洞——命令执行漏洞
- 06-24初涉内网，提权那些事（内网渗透提权）
- 06-24黑客命令第16集:47种最常见的**网站方法2/2
- 06-24铭说 | 一句话木马的多种变形方式
- 06-24Java隐藏的10倍效率技巧!90%程序员不知道的魔法方法(附代码)
- 最近发表
- 标签列表
-
- spire.doc (70)
- instanceclient (62)
- solidworks (78)
- system.data.oracleclient (61)
- 按键小精灵源码提取 (66)
- pyqt5designer教程 (65)
- 联想刷bios工具 (66)
- c#源码 (64)
- graphics.h头文件 (62)
- mysqldump下载 (66)
- libmp3lame (60)
- maven3.3.9 (63)
- 二调符号库 (57)
- git.exe下载 (68)
- diskgenius_winpe (72)
- pythoncrc16 (57)
- solidworks宏文件下载 (59)
- qt帮助文档中文版 (73)
- satacontroller (66)
- hgcad (64)
- bootimg.exe (69)
- android-gif-drawable (62)
- axure9元件库免费下载 (57)
- libmysqlclient.so.18 (58)
- springbootdemo (64)
本文暂时没有评论，来添加一个吧(●'◡'●)