jQuery를 사용하여 하이퍼링크의 href 속성을 변경하는 방법

jQuery를 사용하여 하이퍼링크의 href 속성을 변경하는 방법

「 」를 해야 합니까?hrefj를 사용한 타깃Query query query query （ 크 query 。

사용.

$("a").attr("href", "http://www.google.com/")

는 모든 하이퍼링크의 href를 Google을 가리키도록 변경합니다.좀 더 세련된 셀렉터를 원하실 겁니다.예를 들어 링크 소스(하이퍼링크)와 링크 타깃(일명 "앵커") 앵커태그가 혼재되어 있는 경우:

<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>

실수로 않을 것입니다...그렇다면 실수로 추가되는 것은 원치 않을 것입니다.href그들의 탓이야.을 위해 할 수 .<a>의 「」가 붙은 href★★★★

$("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가 시작하는 링크만 선택합니다.http://stackoverflow.com그런 다음 간단한 정규 표현을 사용하여 URL의 이 부분을 새 것으로 바꾸는 함수를 정의합니다.링크에 대한 모든 종류의 변경은 여기에서 수행할 수 있으므로 유연성에 유의하십시오.

jQuery 1.6 이상에서는 다음을 사용해야 합니다.

$("a").prop("href", "http://www.jakcms.com")

「 」의 prop ★★★★★★★★★★★★★★★★★」attr라는 것이다.attr하는 반면, 「HTML Atribute」는 「HTML Atribute」를 취득합니다.propDOM ★★★★★★★★★★▼

상세한 것에 대하여는, 이 투고를 참조해 주세요. .prop() vs .attr()

하다를 사용하세요.attr메서드를 참조합니다.아트리뷰트

$("a.mylink").attr("href", "http://cupcream.com");

_{OP가 jQuery의 답변을 명시적으로 요구했지만 요즘은 모든 것에 jQuery를 사용할 필요가 없습니다.}

jQuery를 사용하지 않는 몇 가지 방법:

• 를 href모든 것의 가치 <a>요소를 모두 선택한 다음 노드리스트를 통해 반복: (선택사항)

  var anchors = document.querySelectorAll('a');
  Array.prototype.forEach.call(anchors, function (element, index) {
      element.href = "http://stackoverflow.com";
  });
  

• 를 href '의 값'<a> 「」를 .hrefAttribute를 Attribute를 합니다.[href]Selector(아트리뷰트 셀렉터)a[href]): (표준)

  var anchors = document.querySelectorAll('a[href]');
  Array.prototype.forEach.call(anchors, function (element, index) {
      element.href = "http://stackoverflow.com";
  });
  

• 를 href의 의 값<a>특정 값을 포함하는 요소(예:google.com는, 어트리뷰트 셀렉터 「Selector」를 a[href*="google.com"]: (표준)

  var anchors = document.querySelectorAll('a[href*="google.com"]');
  Array.prototype.forEach.call(anchors, function (element, index) {
      element.href = "http://stackoverflow.com";
  });
  

  마찬가지로 다른 Atribute Selector도 사용할 수 있습니다.예:

  • a[href$=".png"]하여 을 선택할 수 .<a>의 elements whose의 href은 ㄴㄴㄴㄴㄴㄴㄴㄴㄴ데로 ..png.

  • a[href^="https://"]하여 을 선택할 수 .<a>「」가 붙은 href프리픽스에 부가되는 값https://.

• 를 href의 의 값<a>여러 조건을 만족하는 요소: (표준)

  var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]');
  Array.prototype.forEach.call(anchors, function (element, index) {
      element.href = "http://stackoverflow.com";
  });
  

..대부분의 경우 정규식은 필요 없습니다.

모든 동일한 링크를 다른 링크로 변경할지, 페이지의 특정 섹션에 있는 링크만 제어할지에 따라 다음 중 하나를 수행할 수 있습니다.

Google에 대한 모든 링크를 변경하여 Google 지도를 가리킵니다.

<a href="http://www.google.com">

$("a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

지정된 섹션의 링크를 변경하려면 container div의 클래스를 선택기에 추가합니다.이 예에서는 콘텐츠의 Google 링크를 변경할 수 있지만 바닥글에서는 변경할 수 없습니다.

<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를 실렉터에 추가합니다.이 예에서는 콘텐츠의 두 번째 Google 링크를 변경할 수 있지만 첫 번째 링크나 바닥글의 링크는 변경할 수 없습니다.

<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 버전 1.0 이후)

$("a").attr("href", "https://stackoverflow.com/") 

또는

프로펠러 기능(jQuery 버전 1.6 이후)

$("a").prop("href", "https://stackoverflow.com/")

또한 위의 방법의 장점은 셀렉터가1개의 앵커를 선택했을 경우 해당 앵커만 갱신하고, 셀렉터가 앵커 그룹을 반환했을 경우 1개의 스테이트먼트만으로 특정 그룹을 갱신하는 것입니다.

이제 정확한 앵커 또는 앵커 그룹을 식별하는 방법은 많이 있습니다.

매우 심플한 것:

1. 합니다.$("a")
2. index: " " 를 합니다.$("a:eq(0)")
3. 클래스의 이 """를 만)active : ):$("a.active")
4. ID를 선택(예: ID)profileLink : ID :$("a#proileLink")
5. 선택 : " " " href " :$("a:first")

더 유용한 것:

6. 아트리뷰트 href를 가진 모든 :$("[href]")
7. href를 모든 선택: "href" " " " "$("a[href='www.stackoverflow.com']")
8. href가 : "href" " " " " " " " :$("a[href!='www.stackoverflow.com']")
9. URL이 를 가진 모든 선택:$("a[href*='www.stackoverflow.com']")
10. URL로 를 가진 모든 선택:$("a[href^='www.stackoverflow.com']")
11. URL로 모든 :href URL:$("a[href$='www.stackoverflow.com']")

여기서 특정 URL을 수정하는 경우 다음과 같이 수정할 수 있습니다.

예를 들어, google.com 에의 모든 URL 에 프록시 Web 사이트를 추가하는 경우는, 다음과 같이 실장할 수 있습니다.

$("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);
    });
   });

클래스 'menu_link'의 링크를 클릭하면 호출되며 링크의 텍스트와 URL을 보여줍니다.return 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;
});

jQuery를 사용하지 마십시오.이것은 JavaScript만으로 매우 간단합니다.

document.querySelector('#the-link').setAttribute('href', 'http://google.com');

https://jsfiddle.net/bo77f8mg/1/

이것을 시험해 보세요.

$("#link").attr("href", "https://coenvink.com/")

코드의 기능 내역:

$("#link")

코드의 이 부분은 ID가 "Link"인 요소를 가져옵니다.그 후, 어트리뷰트 「href」(위치는 기본적으로 link-to-url)를 새로운 url로 설정합니다.이 경우 witch는 내 웹사이트입니다.

.attr("href", "https://coenvink.com/")

이제 확실히 됐으면 좋겠어!

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 그에는 jQuery 1을 합니다.JS 둘, 셋, 셋...

 $("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

Wordpress Avada 테마 로고 이미지의 HREF 변경

ShortCode Exec PHP 플러그인을 설치하면 myjavascript라는 쇼트코드를 만들 수 있습니다.

?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>

이제 모양/위젯으로 이동하여 바닥글 위젯 영역 중 하나를 선택하고 텍스트 위젯을 사용하여 다음과 같은 단축 코드를 추가할 수 있습니다.

[myjavascript]

어떤 이미지를 사용하고 있는지, 레티나를 사용할 수 있는지 여부에 따라 셀렉터가 달라질 수 있지만 개발자 도구를 사용하면 언제든지 알 수 있습니다.

해라

link.href = 'https://...'

link.href = 'https://stackoverflow.com'

<a id="link" href="#">Click me</a>

언급URL : https://stackoverflow.com/questions/179713/how-to-change-the-href-attribute-for-a-hyperlink-using-jquery