苏飞论坛

标题: 【零基础学习web前端】jQuery - 获得内容和属性 [打印本页]

作者: Amy    时间: 2019-1-22 17:05
标题: 【零基础学习web前端】jQuery - 获得内容和属性
【零基础学习web前端】jQuery - 获得内容和属性


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

获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容:
[JavaScript] 纯文本查看 复制代码
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
下面的例子演示如何通过 jQuery val() 方法获得输入字段的值:
[JavaScript] 纯文本查看 复制代码
$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
[HTML] 纯文本查看 复制代码
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#sufei").attr("href"));
  });
});
</script>
</head>
<body>
<p><a href="http://www.sufeinet.com/" id="sufei">www.sufeinet.com</a></p>
<button>显示 href 值</button>
</body>
</html>


作者: 范范    时间: 2019-1-22 17:11
强烈支持楼主ing……
作者: liu    时间: 2019-1-22 17:41
强烈支持楼主ing……
作者: 惜    时间: 2019-1-22 20:39
激动人心,无法言表!




欢迎光临 苏飞论坛 (http://www.sufeinet.com/) Powered by Discuz! X3.4