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 ...
随机推荐
- Integer Array Ladder questions
1.这个题不难,关键在于把题目意思理解好了.这个题问的不清楚.要求return new length,很容易晕掉.其实就是return 有多少个单独的数. import java.util.Array ...
- 从零开始学习渗透Node.js应用程序
本文来源于i春秋学院,未经允许严禁转载 0x01 介绍 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一 ...
- 漏洞应急响应之批量poc验证
1.文章难易度 [★★★] 2.文章知识点: python,poc验证; 3.文章作者: 野驴 4.本文参与 i春秋学院原创文章奖励计划,未经许可禁止转载! 0x01前言 当互联网爆出高危漏洞,或者团 ...
- jsp页面跳转页面的几中方式（同步更新）
1. 通过<a>标签跳转网页a) 通过<a>标签直接跳转b) 通过<a>标签调用JavaScript函数,然后再进行跳转 2. 通过表单形式跳转网页a) 通过表单跳 ...
- 第四篇：断路器（Hystrix）
一.断路器简介. 在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调用(RPC),在Spring Cloud可以用RestTemplate+Ribbon和Feign来调用.为了保证 ...
- Windows Azure开发之Linux虚拟机
Windows Azure是微软的云服务集合,用来提供云在线服务所需要的操作系统与基础存储与管理的平台,是微软的云计算的核心组成组件之一.其中windows azure提供的最重要的一项服务就是 ...
- js学习笔记----JavaScript中DOM扩展的那些事
什么都不说,先上总结的图~ Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...
- GNum试用体验
只需在GNum上注册一个用户名,填上自己的电话号码,它就会自动生成一个URL,你的朋友(可以不注册GNum)在浏览器上进入这个 URL,就可以给你的手机打电话,目前可以免费通话200分钟,而且如果你邀 ...
- Android_GLSurfaceView
使用open GL ES 绘制三角形 首先自定义一个GLSurfaceView class MyGLSurceView extends GLSurfaceView { public MyGLSurce ...
- Mysql 用户权限管理
1. MySQL 权限介绍 mysql中存在4个控制权限的表,分别为user表,db表,tables_priv表,columns_priv表,我当前的版本mysql 5.7.22 . mysql权限表 ...