首页 > 代码库 > JQuery学习笔记-JQuery的html()方法和val()方法
JQuery学习笔记-JQuery的html()方法和val()方法
<!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>Untitled Document</title>
<script type="text/javascript" src="http://www.mamicode.com/js/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号");
});
//使多选下拉框选中的‘选择2号‘和‘选择4号‘被选中
$(":button:eq(2)").click(function(){
$("#multiple").val(["选择2号", "选择4号"]);
});
//使多选框的‘多选2‘和‘多选4‘被选中
$(":button:eq(3)").click(function(){
$(":checkbox[name=‘c‘]").val(["check2", "check4"]);
});
//使单选框的‘单选2‘被选中
$(":button:eq(4)").click(function(){
//即便是为一组 radio 赋值, val 参数中也应该使用数组.
//使用一个值不起作用。
$(":radio[name=‘r‘]").val(["radio2"]);
});
//打印已经被选中的值
$(":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="http://www.mamicode.com/请输入邮箱地址"><br>
<input type="text" id="password" value="http://www.mamicode.com/请输入邮箱密码"><br>
<input type="button" value="http://www.mamicode.com/登录">
<br><br><br>
<input type="button" value="http://www.mamicode.com/使单选下拉框的‘选择3号‘被选中"/>
<input type="button" value="http://www.mamicode.com/使多选下拉框选中的‘选择2号‘和‘选择4号‘被选中"/><br>
<input type="button" value="http://www.mamicode.com/使多选框的‘多选2‘和‘多选4‘被选中"/>
<input type="button" value="http://www.mamicode.com/使单选框的‘单选2‘被选中"/><br>
<input type="button" value="http://www.mamicode.com/打印已经被选中的值"><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="http://www.mamicode.com/check1"/> 多选1
<input type="checkbox" name="c" value="http://www.mamicode.com/check2"/> 多选2
<input type="checkbox" name="c" value="http://www.mamicode.com/check3"/> 多选3
<input type="checkbox" name="c" value="http://www.mamicode.com/check4"/> 多选4
<br/>
<input type="radio" name="r" value="http://www.mamicode.com/radio1"/> 单选1
<input type="radio" name="r" value="http://www.mamicode.com/radio2"/> 单选2
<input type="radio" name="r" value="http://www.mamicode.com/radio3"/> 单选3
</body>
</html>本文出自 “阿凡达” 博客，请务必保留此出处http://shamrock.blog.51cto.com/2079212/1565145
JQuery学习笔记-JQuery的html()方法和val()方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。