jQuery를 사용하여 하이퍼 링크의 href를 어떻게 변경할 수 있습니까?

사용

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

Google을 가리 키도록 모든 하이퍼 링크의 href를 수정합니다. 그래도 좀 더 세련된 선택기를 원할 것입니다. 예를 들어, 링크 소스 (하이퍼 링크)와 링크 대상 (일명 "앵커") 앵커 태그가 혼합 된 경우 :

<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 속성 움켜 prop잡는다 DOM 속성.

이 게시물에서 자세한 내용을 찾을 수 있습니다 : .prop () vs .attr ()

attr조회 에서 방법을 사용하십시오 . 새로운 값으로 속성을 전환 할 수 있습니다.

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

동일한 링크를 모두 다른 것으로 변경 하려는지 또는 페이지의 특정 섹션에있는 링크 만 또는 개별적으로 링크를 제어 하려는지에 따라 이들 중 하나를 수행 할 수 있습니다.

Google지도를 가리 키도록 Google에 대한 모든 링크를 변경하십시오.

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

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

주어진 섹션에서 링크를 변경하려면 컨테이너 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/');

_{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>요소 의 값 을 변경 href하려면 [href]속성 선택기 ( 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, 속성 선택 사용 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";
  });

  마찬가지로 다른 속성 선택기를 사용할 수도 있습니다 . 예를 들어 :

  • a[href$=".png"]값이로 끝나는 <a>요소 를 선택하는 데 사용할 수 있습니다 .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";
  });

.. 대부분의 경우 정규 표현식이 필요하지 않습니다 .

이 스 니펫은 'menu_link'클래스의 링크를 클릭하면 호출되며 링크의 텍스트와 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 함수 (jQuery 버전 1.0부터)

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

또는

prop 함수 (jQuery 버전 1.6부터)

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

또한 위 방법의 장점은 선택기가 단일 앵커를 선택하면 해당 앵커 만 업데이트하고 선택자가 앵커 그룹을 리턴하면 하나의 명령문을 통해서만 특정 그룹을 업데이트한다는 것입니다.

이제 정확한 앵커 또는 앵커 그룹을 식별하는 방법에는 여러 가지가 있습니다.

아주 간단한 것 :

1. 태그 이름을 통해 앵커를 선택하십시오. $("a")
2. 인덱스를 통해 앵커를 선택하십시오. $("a:eq(0)")
3. 특정 클래스에 대한 앵커를 선택하십시오 (이 클래스에서 클래스가있는 앵커 만 active).$("a.active")
4. 특정 ID (여기서는 profileLink ID)로 앵커 선택 :$("a#proileLink")
5. 첫 번째 앵커 href 선택 : $("a:first")

더 유용한 것들 :

6. href 속성을 가진 모든 요소 선택 : $("[href]")
7. 특정 href를 가진 모든 앵커 선택 : $("a[href='www.stackoverflow.com']")
8. 특정 href가없는 모든 앵커 선택 : $("a[href!='www.stackoverflow.com']")
9. 특정 URL을 포함하는 href가있는 모든 앵커 선택 : $("a[href*='www.stackoverflow.com']")
10. 특정 URL로 시작하는 href가있는 모든 앵커 선택 : $("a[href^='www.stackoverflow.com']")
11. href가 특정 URL로 끝나는 모든 앵커 선택 : $("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);
    });
   });

jQuery 사용을 중지하십시오! 이것은 JavaScript에서만 매우 간단합니다.

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

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

 $("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라는이 Shortcode를 만들 수 있습니다

?><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.