jQuery学习二-捕获

最新推荐文章于 2023-04-17 19:47:12 发布

Mr丶M

最新推荐文章于 2023-04-17 19:47:12 发布

阅读量246

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_34390576/article/details/78236402

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这里简单说一下jQuery的捕获，jQuery可以通过.text() , .html() , .val() , .attr()来获取内容
下面来通过代码来进行说明。

布局代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="test.js"></script>
    <!--<link type="text/css" rel="stylesheet" href="test.css">-->
</head>
<body>
   <p id="test" >捕获的内容<a>这是一个a标签</a></p>
    <button id="btn">捕获</button>
</body>
</html>

js的内容

$(document).ready(function () {
     $("#btn").click(function () {
        alert("text:"+$("#test").text());
     });

});

执行上面的代码会出现一个弹窗，内容是“捕获的内容这是一个a标签”

下面使用html来获取内容

$(document).ready(function () {

    $("#btn").click(function () {
        alert("text:"+$("#test").html());
    });

});

通过执行上面的代码可以看到弹窗里面的内容是“捕获的内容 < a >这是一个a标签< / a >”，由此可以看到.text()与.html()区别在于.text()方法只会获取到文本的内容，而.html()方法不仅会获取文本内容连同标签也会获取下来。

.val()一般会用于获取输入框和文本的内容，下面用一下.val()方法来获取值来看看它有什么不同

布局的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="test.js"></script>
    <!--<link type="text/css" rel="stylesheet" href="test.css">-->
</head>
<body>
   <input type="text" id="text" value="测试 .val()方法的使用">
    <button id="btn">val捕获</button>
</body>
</html>

js的代码：

$(document).ready(function () {  
     $("#btn").click(function () {
         alert("input:"+$("#text").val());
    });   
});

执行上面的代码可以知道通过.val()方法，弹窗获取到了input中的内容。

最后说一下.attr()方法，它能获取到标签的任意的属性，也包括获取到标签的超链接和ID。

布局代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="test.js"></script>
    <!--<link type="text/css" rel="stylesheet" href="test.css">-->
</head>
<body>
   <a id="http" href="http://www.baidu.com">百度</a>
   </br>
    <button id="btn">attr使用</button>
</body>
</html>

js.代码

$(document).ready(function () {

    $("#btn").click(function () {
        alert("http:"+$("#http").attr("id"))
    });
});

执行的结果是a标签的ID，也可以把js中的”id”换成”href”来获取到a标签中的超链接。

Mr丶M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习二-捕获

这里简单说一下jQuery的捕获，jQuery可以通过.text() , .html() , .val() , .attr()来获取内容下面来通过代码来进行说明。布局代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <script src="jquery
复制链接

扫一扫