JQuery修改a標籤href和文字的值

時間 2019-12-05

原文原文鏈接

修改a標籤的連接地址： "姐"記得引用JQuery！！！javascript

場景一：只修改連接地址
用到JQuery的.attr()；
.attr()方法設置或返回被選元素的屬性值；(查看方法說明)
.attr()傳入多個參數時，須要用花括號包裹起來，屬性名不用""，屬性和屬性值用:隔開，屬性與屬性直間用,隔開
.attr({屬性："值",屬性："值"})
.attr({width："100px",height："200px"})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值
    $("#Go").attr("href","跳轉地址");
    </script>
</html>

若是須要判斷條件java

<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()的區別jquery

<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() 方法用於檢測一個字符串是否匹配某個模式dom

這裏我根據h1標籤的文字內容是否含有「鹹鴨蛋」若是有就修改a標籤code

<!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>

頁面二：regexp

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。