jquery 获取标签内容
效果演示
如图所示，本节讲的是使用jquery获取标签中的内容
- 获取input中的内容
- 获取div中的文本内容
- 点击button标签显示弹框
注意：
- 在使用jquery的时候，首先需要导入jquery的资源文件，可以从网上去下载
- jquery通过
$(“ 选择器名称 或 标签名称 ”)锁定页面中的标签 - 获取
input标签内容的时候，使用的是val() - 获取
div标签内容的时候，使用的是Text() - $ 中直接写标签名，注意该结果是个数组，即所有该标签的内容都被获取到了，要选择单个的话需要用到下标
-
eq()、nth-child() 都是选择器，用于选择单个标签 - 同时 $ 中支持多种选择器的使用：id选择器、类选择器、派生选择器、后代选择器等等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="uname" placeholder="请输入用户名" />
<div class="div1">这是div1中的文本,使用类选择器获取~</div>
<div class="div2">这是div2中的文本,使用派生择器获取~~</div>
<button id="show">显示</button>
<!-- 引入外部jquery资源文件 -->
<script src="./js/jquery-2.1.1.min.js"></script>
<script>$(document).ready(function(){
// $("# id名称") 获取标签
$("#show").click(function(){
// id选择 .val() 获取值
var uname = $("#uname").val();
alert(uname);
// 类选择器 .text() 获取文本内容
var div1_text = $(".div1").text();
alert(div1_text);
// jquery 赋值
var div1_text_change = $(".div1").text("更改后的div1的内容");
alert(div1_text_change.text);
// 派生选择器 ，直接写标签名，注意是个数组要选择下标
// 此时div2_text中的是所有div的内容
let div2_text = $("div").text();
alert(div2_text);
// 选择下标要使用选择器
let d2_1 = $("div:eq(1)").text();
let d2_2 = $("div:nth-child(3)").text();
alert(d2_1);
alert(d2_2);
})
})</script>
</body>
</html>