html 改变 a标签的内容,JQuery修改a标签href和文字的值

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

场景一：只修改链接地址

用到JQuery的.attr()；

.attr()方法设置或返回被选元素的属性值；(查看方法说明)

.attr()传入多个参数时，需要用花括号包裹起来，属性名不用""，属性和属性值用:隔开，属性与属性直间用,隔开

.attr({属性："值",属性："值"})

.attr({width："100px",height："200px"})

一个有梦想的咸鸭蛋

咸鸭蛋

咸鸭蛋

//使用.attr()方法修改href值

$("#Go").attr("href","跳转地址");

如果需要判断条件

一个有梦想的咸鸭蛋

咸鸭蛋

咸鸭蛋

//使用.attr()方法修改href值

if(判断条件){

$("#Go").attr("href","跳转地址");

}

情景二:

需要同时修改href和文字的值；

需要用到.text()；(查看方法说明)

text() 方法方法设置或返回被选元素的文本内容。

请注意.text()和.html()的区别

一个有梦想的咸鸭蛋

咸鸭蛋

咸鸭蛋

//使用.attr()方法修改href值

$("#text").text("一个有梦想的咸鸭蛋")

$("#Go").attr("href","dome2.html");

情景三:

根据某个条件修改a标签的href和文字值；

需要用到JavaScript的.test()；(查看方法说明)

test() 方法用于检测一个字符串是否匹配某个模式

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

一个有梦想的咸鸭蛋

咸鸭蛋

//保存h1的值;

var h1Text=$("#text").text();

//符合的匹配条件

var xyd=new RegExp("咸鸭蛋");

if(xyd.test(h1Text)){

$("#Go").text("一个有梦想的咸鸭蛋");

$("#Go").attr("href","dome2.html");

}

页面二：

咸鸭蛋

一个有梦想的咸鸭蛋

//保存h1的值;

var h1Text=$("#text").text();

console.log(h1Text)

//符合的匹配条件

var xyd=new RegExp("一个有梦想的咸鸭蛋");

if(xyd.test(h1Text)){

$("#Go").text("咸鸭蛋");

$("#Go").attr("href","index.html");

}