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 ...
随机推荐
- <Listener>servletContextListener、httpSessionListener和servletRequestListener使用整理
在java web应用中,listener监听器似乎是不可缺少的.经常常使用来监听servletContext.httpSession.servletRequest等域对象的创建.销毁以及属性的变化等 ...
- yum-Remi源配置
Remi repository 是包含最新版本 PHP 和 MySQL 包的 Linux 源,由 Remi 提供维护. 有个这个源之后,使用 YUM 安装或更新 PHP.MySQL.phpMyAdmi ...
- ubuntu16.04安装最新版docker、docker-compose、docker-machine
安装前说明: 本文将介绍在ubuntu16.04系统下安装和升级docker.docker-compose.docker-machine. docker:有两个版本:docker-ce(社区版)和do ...
- Ubuntu18.04安装网易云音乐
一. 安装 去网易云官网下载对应于ubuntu系统的安装包 安装依赖 dpkg -s libcanberra-gtk-module #检查依赖是否安装 sudo apt install libcanb ...
- 详解Android数据存储技术
前言 学习Android相关知识,数据存储是其中的重点之一,如果不了解数据,那么让你跟一款没有数据的应用玩,你能玩多久呢?答案是这和没有手机几乎是差不多的.我们聊QQ,聊微信,看新闻,刷朋友圈等都是看 ...
- Java学习笔记29（集合框架三：泛型）
泛型的概念: 简单地讲,就是同一个方法(类),可以接受不同的数据类型并运行得到相对应的结果,不会出现安全问题 上一篇有一段这样的代码: 没有定义集合类型.迭代器类型 package demo; imp ...
- ElasticSearch权威指南学习（分布式集群）
空集群 只有一个空节点的集群 一个节点(node)就是一个Elasticsearch实例,而一个集群(cluster)由一个或多个节点组成,它们具有相同的cluster.name,它们协同工作,分享数 ...
- The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar报错
缺少jstl依赖解析xml文件,报错jaspException 添加依赖如下: <dependency> <groupId>jstl</grou ...
- xamarin.Android ImageView 图片圆角（自定义属性、扩展控件）
新增 /values/Attrs.xml 文件 <?xml version="1.0" encoding="utf-8" ?> <resour ...
- [java初探10]__关于数字处理类
前言 在我们的日常开发过程中,我们会经常性的使用到数字类型的数据,同时,也会有众多的对数字处理的需求,针对这个方面的问题,在JAVA语言中.提供解决方法的类就是数字处理类 java中的数字处理类包括: ...