设置和获取HTML、文本和值
html()方法：获得或设置某个元素的html元素 $(selector).html()
text()方法： 获得或设置某个元素的文本值 $(selecotr).text()
val()方法：获得或设置某个元素的值，如果元素值是多选则以数组形式返回
$(selector).val()
val()方法的不仅能操作input，最重要的一个用途用于select、checkbox、radio
案例源码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置和获取HTML、文本和值</title>
<style>
.login {
width: 500px;
height: 200px;
margin: 10px auto;
border: 1px solid black;
}
.register {
width: 500px;
height: 200px;
margin: 0px auto;
border: 1px solid black;
}
p {
text-align: center;
}
.field {
width: 400px;
height: 30px;
margin: 10px auto;
text-align: center;
}
label {
display: inline-block;
width: 70px;
}
</style>
<script src="../js/jquery-3.1.1.js"></script>
<script>
$(function(){
// 1.给p标签添加一个文本值"用户登录"
$("p").html("用户登录");
// 2.获取账号的默认值
//alert($("#userName").val());
// 3.给密码框添加一个默认值123456
$("#userPwd").val("123456");
// 4.使下拉按钮的'选择3号'被选中
$(":button:eq(0)").click(function(){
$("#select").val("选择3号");
});
// 使多选下拉框的2、4被选中
$(":button").eq(1).click(function(){
$("#select1").val(["选择2号","选择4号"]);
});
// 使多选框的2、4被选中
$(":button").eq(2).click(function(){
$(":checkbox").eq(1).attr("checked","checked");
$(":checkbox").eq(3).attr("checked","checked");
});
$(":button").eq(3).click(function(){
$(":radio").eq(1).attr("checked","checked");
});
$(":button").eq(4).click(function(){
alert($("#select").val());
// jQuery提供了遍历方法each()
$("input[name='c']:checked").each(function(){
alert($(this).val());
});
});
})
</script>
</head>
<body>
<div class="login">
<p id="title">
</p>
<form>
<div class="field">
<label for="userName">账号:</label>
<input type="text" name="username" id="userName" value="请输入用户名" />
</div>
<div class="field">
<label for="userPwd">密码:</label>
<input type="password" name="userpwd" id="userPwd" />
</div>
<div class="field">
<input type="submit" name="submit" id="btnSubmit" value="登录" />
<input type="submit" name="reset" id="btnReset" value="重置" />
</div>
</form>
</div>
<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="select">
<option>选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
</select>
<select id="select1" 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>