手册

jQuery 教程

jQuery 教程 jQuery简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件

jQuery 效果

jQuery 隐藏和显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery - Chaining

jQuery HTML

jQuery 捕获 jQuery - 设置 jQuery - 添加元素 jQuery - 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸

jQuery 遍历

jQuery 遍历 jQuery 祖先 jQuery 遍历 - 后代 jQuery 同胞 jQuery 过滤

jQuery Ajax

jQuery - AJAX 简介 jQuery load() 方法 jQuery - AJAX get()/post() 方法

jQuery 其他

jQuery noConflict() 方法 jQuery JSONP

jQuery 实例

jQuery 参考手册

jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性

jQuery 插件

jQuery Validate jQuery Accordion jQuery Autocomplete jQuery Message jQuery 密码验证 jQuery Prettydate jQuery Tooltip jQuery Treeview

首页大前端 jQuery jQuery中文参考手册

jQuery 捕获

阅读37808

更新时间2022-04-12

jQuery - 设置

jQuery - 获取内容和属性

jQuery 拥有可操作 HTML 元素和属性的强大方法。

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

注：DOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。"

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>

<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：

实例

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("值为: " + $("#test").val());
  });
});
</script>
</head>

<body>
<p>名称: <input type="text" id="test" value="php中文网"></p>
<button>显示值</button>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="http://www.php.cn" id="runoob">php中文网</a></p>
<button>显示 href 属性的值</button>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

jQuery - 设置