您的位置：首页 > Web前端 > JQuery

JQueryDOM之设置和获取HTML、文本和值

2019-02-23 20:51 232 查看

设置和获取HTML、文本和值

html()方法：获得或设置某个元素的html元素 $(selector).html()

$("p").html(); 该示例获得元素p的html内容

$("p").html("<strong>添加html内容</strong>"); 该示例设置p的html内容为”<strong>添加html内容</strong>

text()方法：获得或设置某个元素的文本值 $(selecotr).text()

$("p").text(); 该示例获得元素p的text文本内容

$("p").text("重新设置的文本内容"); 该示例设置元素p的text文本为"重新设置的文本内容"

val()方法：获得或设置某个元素的值，如果元素值是多选则以数组形式返回

$(selector).val()

例:文本元素 <input type="text" id="userName" value="请输入用户名" />

$("#userName").val(); 获得input元素的值

$("#userName").val('zhangsan'); 设置input元素的值为'zhangsan'

val()方法的不仅能操作input，最重要的一个用途用于select、checkbox、radio

例：在下拉框下的多选赋值应用

<select id="fruits" multiple="multiple">
<option>苹果</option>
<option>香蕉</option>
<option>西瓜</option>
</select>
$("#fruits").val(['苹果','香蕉']); 该示例使select中苹果和香蕉两项被选中

案例源码：

[code]<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

JQueryDOM之设置和获取HTML、文本和值

设置和获取HTML、文本和值

html()方法：获得或设置某个元素的html元素 $(selector).html()

text()方法： 获得或设置某个元素的文本值 $(selecotr).text()

val()方法：获得或设置某个元素的值，如果元素值是多选则以数组形式返回

$(selector).val()

案例源码：

text()方法：获得或设置某个元素的文本值 $(selecotr).text()