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

修改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/1190000008916828
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞