JQuery修正a标签href和笔墨的值

2024年4月11日 133次阅读 来源: 有梦想的咸鸭蛋

修正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>
    原文作者：有梦想的咸鸭蛋
    原文地址: https://segmentfault.com/a/1190000007968642
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞