jquery之获取内容和属性-优快云博客

本文链接：https://blog.youkuaiyun.com/MixedSignals/article/details/106722375

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/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());
  });
	
  $("button").click(function(){
    alert("值为: " + $("#test2").val());
  });
});
</script>
</head>

<body>
<p id="test">这是段落中的 <b><i>粗体</i></b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<p>名称: <input type="text" id="test2" value="哈哈哈哈"></p>
<button>显示值</button>
</body>

在这里插入图片描述

<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#AC").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="Assassin's creed" id="AC">菜鸟教程</a></p>
<button>显示 href 属性的值</button>
</body>

在这里插入图片描述