jQuery的DOM操作之设置和获取HTML、文本和值 html（）text（）val（）
1. html()方法:
此方法类似于JavaScript中的innerHTML属性，可以用来读取或者设置某个元素中的html内容。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($("p").html());
});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?"><strong>你最喜欢的水果是?</strong></p>
</body>
</html>
如果需要设置某元素的html代码，也可以使用该方法，不过需要传入一个参数：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").html("<strong>你最喜欢的水果是?</strong>");
});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?"></p>
</body>
</html>
2. text()方法：
次方法类似于javascript中的innerText属性，可以用来读取或者设置某个元素中的文本内容。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($("p").text());
});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?"><strong>你最喜欢的水果是?</strong></p>
</body>
</html>
如果需要为某元素设置文本内容，那么需要传递一个参数：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").text("你最喜欢的水果是?");
});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?"></p>
</body>
</html>
3. val()方法：
此方法类似于JavaScript中的value属性，可以用来设置或获取元素的值。无论元素是文本框，下拉列表还是单选框，它都可以发回元素的值。
如果元素为多选，则返回一个包含所有选择的值的数组。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#address").focus(function(){
var txt_value=$(this).val();
if(txt_value=="请输入邮箱地址"){
$(this).val("");
}
});
$("#address").blur(function(){
var txt_value=$(this).val();
if(txt_value==""){
$(this).val("请输入邮箱地址");
}
});
$("#pwd").focus(function(){
var txt_value=$(this).val();
if(txt_value=="请输入邮箱密码"){
$(this).val("");
}
});
$("#pwd").blur(function(){
var txt_value=$(this).val();
if(txt_value==""){
$(this).val("请输入邮箱密码");
}
});
});
</script>
</head>
<body>
<input type="text" id="address" value="请输入邮箱地址" style="color:gray"><br>
<input type="text" id="pwd" value="请输入邮箱密码" style="color:gray"><br>
<input type="button" value="登录">
</body>
</html>
通过上面的例子可以发现val()方法不仅能设置元素的值，还能获取元素的值。而且val()方法还有另外一个用处，就是它能使select，checkbox和radio相应的选项被选中，在表单操作中经常会用到。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>
<body>
<select id="single">
<option>选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
</select>
<select id="multiple" multiple="multiple" style="height:130px">
<option selected="selected">选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
<option>选择4号</option>
<option selected="selected">选择5号</option>
</select>
<br>
<input type="checkbox" value="check1"/>多选1
<input type="checkbox" value="check2"/>多选2
<input type="checkbox" value="check3"/>多选3
<input type="checkbox" value="check4"/>多选4
<br>
<input type="radio" value="radio1"/>单选1
<input type="radio" value="radio2"/>单选2
<input type="radio" value="radio3"/>单选3
</body>
</html>
该网页中的一些元素是默认选中的，可以通过val()方法来改变它们的选中项。
<script type="text/javascript">
$(document).ready(function(){
$("#single").val("选择2号");
$("#multiple").val(["选择2号","选择3号"]);
$(":checkbox").val(["check2","check3"]);
$(":radio").val(["radio2"]);
});
</script>
效果如下：
jQuery的DOM操作之设置和获取HTML、文本和值 html（）text（）val（）的更多相关文章
- jQuery中DOM操作
1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作 2 分类: 1)DOM Core(核心):用途广泛 支持多种编程语言 2)HTML DOM:代码简短 只用于处理web ...
- HTML 学习笔记 JQuery（DOM 操作3）
设置和获取HTML 文本 和 值 1.html()方法 类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容 例子 <html> <he ...
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
- jQuery – 3.JQuery的Dom操作
3.1 JQuery的Dom操作 1.使用html()方法读取或者设置元素的innerHTML 2.使用text()方法读取或者设置元素的innerText 3.使用attr() ...
- js，jQuery和DOM操作的总结（二）
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
- 03-老马jQuery教程-DOM操作
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
- 解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
- jQuery的DOM操作小案例
案例一:下拉列表左右选择 <body> <div> <select style="width:60px" multiple size="10 ...
随机推荐
- ubuntu下搭建一个数据化处理的开发环境
1.搭建matplotlib环境 构建matplotlib运行环境,需要满足相关软件环境. numpy库提供大数据集的数据的数据结构和数学方法.诸如元组.列表或字典等python的默认数据结构同样可以 ...
- UniDBGrid增加显示记录数的label及隐藏refresh按钮
1. 在UniDBgrid的extEvent属性中写入以下代码: function OnAfterCreate(sender){ var toolbar=sender.getDockedItems() ...
- MVC身份验证及权限管理（转载）
from https://www.cnblogs.com/asks/p/4372783.html MVC自带的ActionFilter 在Asp.Net WebForm的中要做到身份认证微软为我们提供 ...
- C#+ZXing.dll生成手机路径导航二维码
1.原谅我先写点废话哈 这两天用C#写一个C端的软件,甲方提出一个很无理的需求(在C端的程序中实现路径导航,关键是这个程序最终是运行在物理隔绝的电脑上的……),头疼了好几天,领导突然想到可以把坐标+百 ...
- 你应该这么理解TCP的三次握手和四次挥手
前言: TCP协议是计算机的基础,他本身是一个非常非常复杂的协议. 本文只是蜻蜓点水,将从网络基础以及TCP的相关概念介绍开始,之后再将三次握手,四次挥手这些内容来阐述. 最后介绍一些常见问题,并给出 ...
- Android开发 - 掌握ConstraintLayout（一）传统布局的问题
在传统的Android开发中,页面布局占用了我们很多的开发时间,而且面对复杂页面的时候,传统的一些布局会显得非常复杂,每种布局都有特定的应用场景,我们通常需要各种布局结合起来使用来实现复杂的页面.随着 ...
- maya2017卸载/安装失败/如何彻底卸载清除干净maya2017注册表和文件的方法
maya2017提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装maya2017失败提示maya2017安装未完成,某些产品无法安装,也有时候想重新安装maya ...
- 设计模式总结（Java）—— 单例模式
1. 定义 为了确保一个类有且仅有一个实例,而且自行实例化并向整个系统提供这个实例. 2. 使用场景 确保某个类有且只有一个对象的场景,避免产生多个对象消耗过多的资源,或者某种类型的对象只应该有且只有 ...
- Javascript高级编程学习笔记（2）—— Script标签
script标签 js在浏览器中的使用,肯定会涉及到script标签. 那么script标签有哪些属性呢? 1.async:异步加载(不让页面等待该脚本的加载执行,异步加载页面的其他部分) 2.cha ...
- JS禁用键盘浏览器退格键
我们在真实的项目开发中经常会使用JS 对键盘上的一些按键进行禁用,常见的比如说退格键(backspace/ 后退键),我在一个项目中就遇到过在页面编辑的时候禁用掉退格键,因为退格键会发生页面后退,这样 ...