2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

Jquery中如何获取元素的文本,值,属性和内容

jQuery作者:猿2048志愿者

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()遇新是直朋能到 方法来获得内容:
实例
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值:
实例
$("button").click(function(){
  alert($("#w3s").attr("href"));
});

完整代码

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });

$("#btn3").click(function(){
  alert("Value: " + $("#test").val());
});

$("button").click(function(){
    alert($("#w3s").attr("href"));
  });

</script>
</head>

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

<p>姓名:<input type="text" id="test" value="米老鼠"></p>
<button id="btn3">显示值</button>

<p><a href=http://www.hello-code.com id="w3s">W3School.com.cn</a></p>
<button>显示 href 值</button>
</body>

</html>新直能分支调二浏页器朋代说;

本文来源于网络:查看 >
« 上一篇:Jquery中如何实现一个对象同事执行多个事件
» 下一篇:jquery给dom元素赋值的方法
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
相关博文

分享“案例”中大奖

开始分享 中奖规则
分享链接:
联系方式:
2021-04-11中奖名单(每日10名)
×添加代码片段