JQuery修改a标签href和文字的值

最新推荐文章于 2023-09-25 22:10:10 发布

转载最新推荐文章于 2023-09-25 22:10:10 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000007968642

文章标签：

#javascript #ViewUI

本文介绍如何使用jQuery的.attr()方法来修改HTML中a标签的链接地址，并结合.text()方法来更新链接文本内容。通过不同场景的应用示例，展示了如何根据条件判断进行链接和文本的动态调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改a标签的链接地址： "姐"记得引用JQuery！！！

场景一：只修改链接地址
用到JQuery的.attr()；
.attr()方法设置或返回被选元素的属性值；(查看方法说明)
.attr()传入多个参数时，需要用花括号包裹起来，属性名不用""，属性和属性值用:隔开，属性与属性直间用,隔开
.attr({属性："值",属性："值"})
.attr({width："100px",height："200px"})

<html>
    <head>
        <meta charset="utf-8" />
        <title>一个有梦想的咸鸭蛋</title>
        <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    </head>
    <body>
        <h1>咸鸭蛋</h1>
        <a href="#" id="Go">咸鸭蛋</a>
    </body>
    <script>
      //使用.attr()方法修改href值
    $("#Go").attr("href","跳转地址");
    </script>
</html>

如果需要判断条件

<html>
    <head>
        <meta charset="utf-8" />
        <title>一个有梦想的咸鸭蛋</title>
        <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    </head>
    <body>
        <h1>咸鸭蛋</h1>
        <a href="#" id="Go">咸鸭蛋</a>
    </body>
    <script>
      //使用.attr()方法修改href值
     if(判断条件){
      $("#Go").attr("href","跳转地址");
     }
    </script>
</html>

情景二:
需要同时修改href和文字的值；
需要用到.text()；(查看方法说明)
text() 方法方法设置或返回被选元素的文本内容。
请注意.text()和.html()的区别

<html>
    <head>
        <meta charset="utf-8" />
        <title>一个有梦想的咸鸭蛋</title>
        <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    </head>
    <body>
        <h1 id="text">咸鸭蛋</h1>
        <a href="#" id="Go">咸鸭蛋</a>
    </body>
    <script>
      //使用.attr()方法修改href值
    $("#text").text("一个有梦想的咸鸭蛋")
    $("#Go").attr("href","dome2.html");
    </script>
</html>

情景三:
根据某个条件修改a标签的href和文字值；
需要用到JavaScript的.test()；(查看方法说明)
test() 方法用于检测一个字符串是否匹配某个模式

这里我根据h1标签的文字内容是否含有“咸鸭蛋”如果有就修改a标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>一个有梦想的咸鸭蛋</title>
        <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    </head>
    <body>
        <h1 id="text">咸鸭蛋</h1>
        <a href="#" id="Go"></a>
    </body>
    <script>
    //保存h1的值;
    var h1Text=$("#text").text();
    //符合的匹配条件
    var xyd=new RegExp("咸鸭蛋");
    if(xyd.test(h1Text)){
        $("#Go").text("一个有梦想的咸鸭蛋");
        $("#Go").attr("href","dome2.html");
    }
    </script>
</html>

页面二：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>咸鸭蛋</title>
        <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    </head>
    <body>
        <h1 id="text">一个有梦想的咸鸭蛋</h1>
        <a href="#" id="Go"></a>
    </body>
    <script>
    //保存h1的值;
    var h1Text=$("#text").text();
    console.log(h1Text)
    //符合的匹配条件
    var xyd=new RegExp("一个有梦想的咸鸭蛋");
    if(xyd.test(h1Text)){
        $("#Go").text("咸鸭蛋");
        $("#Go").attr("href","index.html");
    }
    </script>
</html>