1、代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery的val()方法的两个练习</title>
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1. 为 #address 添加 focus(获取焦点), blur(失去焦点) 响应函数
$(":text").focus(function(){
//2. 当获取焦点时, 若 #address 中是默认值
//(defaultValue 属性, 该属性是 DOM 对象的属性), 就使其值置为 ""
var val = $(this).val();
if(val == this.defaultValue){
$(this).val("");
}
}).blur(function(){
//3. 失去焦点是, 若 #address 的值在去除前后空格后等于 ""
//则为其恢复默认值.
var val = this.value;
if($.trim(val) == ""){
this.value = this.defaultValue;
}
});
//2.使单选下拉框的'选择3号'被选中
$(":button:eq(1)").click(function(){
$("#single").val("选择3号");
});
//3.使多选下拉框选中的'选择2号'和'选择4号'被选中
$(":button:eq(2)").click(function(){
$("#multiple").val(["选择2号", "选择4号"]);
});
//4.使多选框的'多选2'和'多选4'被选中
$(":button:eq(3)").click(function(){
$(":checkbox[name='c']").val(["check2", "check4"]);
});
//5.使单选框的'单选2'被选中
$(":button:eq(4)").click(function(){
//即便是为一组 radio 赋值, val 参数中也应该使用数组.
//使用一个值不起作用。
$(":radio[name='r']").val(["radio2"]);
});
//6.打印已经被选中的值
$(":button:eq(5)").click(function(){
//val() 可以直接获取 select 的被选择的值.
alert($("#single").val());
alert($("#multiple").val());
//val 不能直接获取 checkbox 被选择的值
//若直接获取, 只能得到第一个被选择的值.
//因为 $(":checkbox[name='c']:checked") 得到的是一个
//数组. 而使用 val() 方法只能获取数组元素的第一个值
//若希望打印被选择的所有制, 需要使用 each 遍历.
//alert($(":checkbox[name='c']:checked").val());
$(":checkbox[name='c']:checked").each(function(){
alert(this.value);
});
//而 raido 被选择的只有一个, 所以可以直接使用 val() 方法.
alert($(":radio[name='r']:checked").val());
});
})
</script>
</head>
<body>
<input type="text" id="address" value="请输入邮箱地址"><br>
<input type="text" id="password" value="请输入邮箱密码"><br>
<input type="button" value="登录">
<br><br><br>
<input type="button" value="使单选下拉框的'选择3号'被选中"/>
<input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br>
<input type="button" value="使多选框的'多选2'和'多选4'被选中"/>
<input type="button" value="使单选框的'单选2'被选中"/><br>
<input type="button" value="打印已经被选中的值"><br>
<br/>
<select id="single">
<option>选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
<option selected="selected">选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
<option>选择4号</option>
<option selected="selected">选择5号</option>
</select>
<br/><br/>
<input type="checkbox" name="c" value="check1"/> 多选1
<input type="checkbox" name="c" value="check2"/> 多选2
<input type="checkbox" name="c" value="check3"/> 多选3
<input type="checkbox" name="c" value="check4"/> 多选4
<br/>
<input type="radio" name="r" value="radio1"/> 单选1
<input type="radio" name="r" value="radio2"/> 单选2
<input type="radio" name="r" value="radio3"/> 单选3
</body>
</html>
2、原始界面
相关推荐
后端 核心框架：Spring Framework 4.2.5.RELEASE 安全框架：Apache Shiro 1.3.2 视图框架：Spring MVC 4.2.5.RELEASE 数据库连接池：Tomcat JDBC 缓存框架：Ehcache ORM框架：Spring Data ...表单验证 ：jquery.vali
要进行这个实验，需要有一个网络拓扑，其中有至少两个不同的VLAN，每个VLAN中都有至少一个计算机。接下来是进行跨VLAN实验的步骤： 1. 配置交换机的VLAN。将每个计算机添加到相应的VLAN中。 2. 配置每个计算机的IP...
主要介绍了jQuery中val()方法用法,以实例形式分析了val()方法的两种常见用法,具有一定的参考借鉴价值,需要的朋友可以参考下
jQuery的validate验证插件使用方法源码
2、在响应函数中，this 是一个 DOM 对象，若想使用 jQUery 对象的方法，需要把其包装为 jQuery 对象：使用 $() 把 this 包起来。 3、text() 方法是一个读写的方法：不加任何参数，读取文本值；加参数为属性节点...
用jquery获取元素内容需要分两个情况： input 用val(); var value = $(‘#test’).val(); 是否为空的判断方法： if(value.length == 0){} 如果value为空执行的操作 if(value!=”){} 如果value不为空执行的操作 ...
主要介绍了Jquery使用val方法读写value值,实例分析了jQuery中val方法获取value值与赋值操作的相关技巧,需要的朋友可以参考下
定义一个开关组件，挂载到jquery后， $('#el').switch()就可以将#el变成一个开关组件，和$('#el').val()可以获取值（ js也能取），放进form也能直接提交，专门解决老旧jquery项目维护难的问题。 支持环境 边缘 火狐...
瓦拉林特 检查Vala代码文件中的代码样式错误 小型命令行工具和库，用于检查... 默认情况下，您可以按以下方式刷新当前目录中的每个Vala文件以及所有子目录： io.elementary.vala-lint 此外，vala-lint使用来匹配文件
isFunction(val) ：如果val是一个函数，则返回true isString(val) ：如果val是一个字符串，则返回true isValidString(val) ：如果val是非空字符串，则返回true isObjectLike(val) ：如果val不为null且属于
fn hello (req valval.Request) valval.Response { return valval. response_ok ( ' hello world ' ) } fn main () { mut app := valval. new_app ( true ) app. route ( ' / ' , hello) valval. runserver (app...
快速资金编辑-jQuery插件 输入框货币格式 用法示例 <input type="text" id="price" name="price" value="1234.56"> $('#price').quickMoneyEdit(); 获取/设置 //Set $('#price').val('1234.56'); $('#price'...
NULL 博文链接：https://jeemygrow.iteye.com/blog/1271174
本文实例讲述了jQuery延迟执行的实现方法。分享给大家供大家参考，具体如下： 做一个控件时碰到的一些无法同步处理的事件，可以用这样的延迟方法。 <html> [removed][removed] [removed] $(function(){ $('#...
jQuery.BEM jQuery.BEM 有助于处理 BEM 实体。 您可以与交互：设置、删除和检查修改器。应用程序接口设置模式 var $b = $ ( '.block' ) ;// .block_mod$b . setMod ( 'mod' ) ;// .block_mod_val$b . setMod ( 'mod'...
JQUERY 常用方法大全 JQUERY 常用方法大全 $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值，参数是map $(”img...
Flapper是一个jQuery插件，可复制火车站和飞机场中常见的裂口（或“ Solari”）显示，以及70年代爸爸的闹钟。 要使用，只需将Flapper附加到页面上的任何输入即可。 每当触发输入的change事件时，Flapper都会更新...
本文实例讲述了jQuery判断自定义属性data-val用法。分享给大家供大家参考，具体如下： jquery判断自定义属性data-val 1.css .active { color: red; } 2.html <li data-val=1>1 <li data-val=2>2 <li data-...
coco数据集真实有效，coco2017数据集，数据集。