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

最新推荐文章于 2022-08-16 20:53:52 发布

luck-dog

最新推荐文章于 2022-08-16 20:53:52 发布

阅读量297

点赞数

分类专栏：前端文章标签： JQuerDOM

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

设置和获取HTML、文本和值

html()方法：获得或设置某个元素的html元素 $(selector).html()
$(“p”).html(); 该示例获得元素p的html内容
$(“p”).html(“添加html内容”); 该示例设置p的html内容为”添加html内容
text()方法：获得或设置某个元素的文本值 $(selecotr).text()
$(“p”).text(); 该示例获得元素p的text文本内容
$(“p”).text(“重新设置的文本内容”); 该示例设置元素p的text文本为"重新设置的文本内容"
val()方法：获得或设置某个元素的值，如果元素值是多选则以数组形式返回
$(selector).val()
例:文本元素
$("#userName").val(); 获得input元素的值
$("#userName").val(‘zhangsan’); 设置input元素的值为’zhangsan’
val()方法的不仅能操作input，最重要的一个用途用于select、checkbox、radio

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

苹果
香蕉
西瓜

$("#fruits").val([‘苹果’,‘香蕉’]); 该示例使select中苹果和香蕉两项被选中
案例源码：

<!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>

luck-dog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQueryDOM之设置和获取HTML、文本和值

设置和获取HTML、文本和值html()方法：获得或设置某个元素的html元素 $(selector).html()$(“p”).html(); 该示例获得元素p的html内容$(“p”).html(“添加html内容”); 该示例设置p的html内容为”添加html内容text()方法：获得或设置某个元素的文本值 $(selecotr).text...
复制链接

扫一扫