如何用jQuery改变超链接的href?
使用
$("a").attr("href", "http://www.google.com/")
将修改所有超链接的href,使之指向谷歌。不过,你可能想要一个更精细的选择器。例如,如果你有一个混合的链接源(超链接)和链接目标(又称"锚")锚标签。
<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>
...那么你可能不想意外地给它们添加href
属性。为了安全起见,我们可以指定我们的选择器只匹配已有href
属性的<a>
标签。
$("a[href]") //...
当然,你可能会有一些更有趣的想法。如果你想匹配一个有特定的`href'的锚,你可以使用这样的方法。
$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')
这将找到href
与字符串http://www.google.com/
完全匹配的链接。一个更复杂的任务可能是匹配,然后只更新href
的一部分。
$("a[href^='http://stackoverflow.com']")
.each(function()
{
this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/,
"http://stackoverflow.com");
});
第一部分只选择href*开头为https://stackoverflow.com
的链接。然后,定义一个函数,使用一个简单的正则表达式,用一个新的URL替换这部分内容。注意这给你带来的灵活性--对链接的任何形式的修改都可以在这里完成。
在jQuery 1.6及以上版本中,你应该使用。
$("a").prop("href", "http://www.jakcms.com")
prop "和 "attr "的区别在于,"attr "抓取的是HTML属性,而 "prop "抓取的是DOM属性。
你可以在这篇文章中找到更多细节。 https://stackoverflow.com/questions/5874652/prop-vs-attr
根据你是想把所有相同的链接都改成别的东西,还是想只控制页面某一部分的链接或每个链接,你可以做其中的一个。
把所有的链接都改成谷歌,使它们指向谷歌地图。
<a href="http://www.google.com">
$("a[href='http://www.google.com/']").attr('href',
'http://maps.google.com/');
要改变某个部分的链接,请在选择器中添加容器div'的类。这个例子将改变内容中的谷歌链接,但不会改变页脚中的链接。
<div class="content">
<p>...link to <a href="http://www.google.com/">Google</a>
in the content...</p>
</div>
<div class="footer">
Links: <a href="http://www.google.com/">Google</a>
</div>
$(".content a[href='http://www.google.com/']").attr('href',
'http://maps.google.com/');
要改变单个链接而不考虑其在文档中的位置,可以给链接添加一个ID,然后将该ID添加到选择器中。这个例子将改变内容中的第二个谷歌链接,但不会改变第一个链接或页脚中的链接。
<div class="content">
<p>...link to <a href="http://www.google.com/">Google</a>
in the content...</p>
<p>...second link to <a href="http://www.google.com/"
id="changeme">Google</a>
in the content...</p>
</div>
<div class="footer">
Links: <a href="http://www.google.com/">Google</a>
</div>
$("a#changeme").attr('href',
'http://maps.google.com/');
虽然上位者明确要求jQuery的答案,但现在你不需要什么都用jQuery。
<a>
元素的ref
值,把它们全部选中,然后在[nodelist][1]中迭代。
[(example)][2]var anchors = document.querySelectorAll('a'); Array.prototype.forEach.call(anchors, function (element, index) { element.href = "https://stackoverflow.com"。 });
href
属性的<a>
元素的href
值,可以通过添加[href]
属性选择器(a[href]
)来选择它们。
[(示例)][3]var anchors = document.querySelectorAll('a[href]')。 Array.prototype.forEach.call(anchors, function (element, index) { element.href = "https://stackoverflow.com"。 });
<a>
元素的href
值,这些元素包含一个特定的值,例如google.com
,使用属性选择器a[href*="google.com"]
。
[(例子)][4]var anchors = document.querySelectorAll('a[href*="google.com"]')。 Array.prototype.forEach.call(anchors, function (element, index) { element.href = "https://stackoverflow.com"。 });
同样,你也可以使用其他[属性选择器][5]。 例如,你可以使用
a[href$=".png"]
可以用来选择href
值以.png
结尾的<a>
元素。
a[href^="https://"]
可以用来选择<a>
元素的href
值以https://
为*前缀。
如果你想改变满足多个条件的<a>
元素的href
值。
[(example)][6]
var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]')。 Array.prototype.forEach.call(anchors, function (element, index) { element.href = "https://stackoverflow.com"。 });
...不需要regex,在*大多数情况下。
[1]: https://developer.mozilla.org/en-US/docs/Web/API/NodeList [2]:
[3]: http://jsfiddle.net/pLkr9497/ [4]: http://jsfiddle.net/eLw5svh2/ [5]: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors [6]: http://jsfiddle.net/8fxekxLu/当一个类为'menu_link'.的链接被点击时,这个片段就会被调用,并显示出链接的文本和url。 的链接时调用,并显示该链接的文本和url。 返回false可以防止链接被跟踪。
<a rel='1' class="menu_link" href="option1.html">Option 1</a>
<a rel='2' class="menu_link" href="option2.html">Option 2</a>
$('.menu_link').live('click', function() {
var thelink = $(this);
alert ( thelink.html() );
alert ( thelink.attr('href') );
alert ( thelink.attr('rel') );
return false;
});
简单的方法是......[Attr函数][1](自jQuery 1.0版本)**。
[Attr函数][1](自jQuery 1.0版起)。
$("a").attr("href", "https://stackoverflow.com/")
或
[道具函数][2](从jQuery 1.6版开始)。
$("a").prop("href", "https://stackoverflow.com/")
另外,上述方法的优点是,如果选择器选择了一个锚,它将只更新该锚,而如果选择器返回一组锚,它将只通过一条语句更新特定的组。
现在,有很多方法可以识别准确的锚或锚组。
很简单的方法:。
$("a")
。通过索引选择锚点。
$("a:eq(0)")
。
为特定的类选择锚点(如本类中只有锚点
with class active
) :
$("a.active")
。
选择特定ID的锚点(这里以profileLink
为例。
ID).$("a#proileLink")$("a#proileLink")
:
$("a#proileLink")
。
选择第一个锚点href。
$("a:first")
6.
更多有用的:
$("a:first")
更多有用的: 6:
$("[href]")
。选择所有带有特定href属性的锚点。
$("a[a href='www.stackoverflow.com']")
。
选择所有没有特定href的锚点。
$("a[href!='www.stackoverflow.com']")
。
选择所有包含特定URL的href的锚点,选择:$("a[href!=']")
9:
$("a[href*='www.stackoverflow.com']")
。
选择所有href以特定URL开头的锚点,选择:$("a[href*=']")
10:
$("a[href^='www.stackoverflow.com']")
11.
选择所有以特定URL结尾的href的锚点,选择:$("a[href^=']")
11:
$("a[href$='www.stackoverflow.com']")
。
现在,如果你想修改特定的URL,你可以这样做。
例如,如果你想为所有去google.com的URL添加代理网站,你可以按以下方式实现。
$("a[href^='http://www.google.com']")
.each(function()
{
this.href = this.href.replace(/http:\/\/www.google.com\//gi, function (x) {
return "http://proxywebsite.com/?query="+encodeURIComponent(x);
});
});
[1]: http://api.jquery.com/attr/#attr2 [2]: http://api.jquery.com/prop/#prop2
?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>
您现在可以到外观/小工具,选择一个页脚小工具区域,并使用文本小工具添加以下短码。
[myjavascript]
选择器可能会改变,这取决于你使用的图像,如果它'的视网膜准备,但你总是可以通过使用开发人员的工具找出它。
href
在一个属性中,所以你可以使用纯JavaScript来改变它,但如果你已经在你的页面中注入了jQuery,不要担心,我会展示两种方式。
想象一下,你有下面这个href
。
<a id="ali" alt="Ali" href="http://dezfoolian.com.au">Alireza Dezfoolian</a>
你喜欢改变它的链接......
使用纯JavaScript,不需要任何库就可以做到。
document.getElementById("ali").setAttribute("href", "https://stackoverflow.com");
但在jQuery中也可以做到。
$("#ali").attr("href", "https://stackoverflow.com");
或
$("#ali").prop("href", "https://stackoverflow.com");
在这种情况下,如果你已经注入了jQuery,可能jQuery看起来更短,更跨浏览器......但除此之外,我选择JS
的......。