设置和获取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中苹果和香蕉两项被选中

案例源码：

<!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、文本和值相关推荐

php cookie expires,php cookie类(设置、获取、删除cookie值)
分享一个php cookie操作的类,可以设置cookie.获取cookie.删除cookie. 代码: /** * php cookie类 * class:PHP_COOKIE * by www.j ...
datatable隐藏列设置及获取隐藏列的值
原文:原文链接设置隐藏列: "columns": [ { "data": "name" }, { "data": &q ...
js获取html文本框值，判断，跳转
//html: <input type="text" id="user"/> <button onClick="beat()&quo ...
datatables隐藏列设置及获取隐藏列的值
https://blog.csdn.net/bingguang1993/article/details/84649674
Js获取input文本框值的几种方法
首先编写一个HTML,代码如下: <form id="form1"><table border="0"><tr><td ...
html 获取文本框值,html - 如何在JavaScript中获取文本框值
html - 如何在JavaScript中获取文本框值我正在尝试使用JavaScript从HTML文本框中获取值,但值不是在空格之后例如: 我只得到:上面的"软件". 我正在使 ...
jQuery—常用API（jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作）
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href,比如 <input> ...
jQuery设置和获取HTML、文本和值
<script type="text/javascript">//<![CDATA[ $(function(){//获取<p>元素的HTML代码$(& ...
js设置和获取html和文本,JS---DOM---设置和获取---标签内容和文本内容
设置和获取---标签内容和文本内容总结---设置: 使用innerText主要是设置文本的, 设置标签内容, 是没有标签的效果的 innerHTML是可以设置文本内容 innerHTML主要的作用是 ...

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

设置和获取HTML、文本和值

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

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

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

$(selector).val()

案例源码：

JQueryDOM之设置和获取HTML、文本和值相关推荐

最新文章

热门文章

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

设置和获取HTML、文本和值

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

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

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

$(selector).val()

案例源码：

JQueryDOM之设置和获取HTML、文本和值相关推荐

最新文章

热门文章

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