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

질문자 :Brian Boatright

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 속성을 추가하고 싶지 않을 것입니다. 그런 다음 안전을 위해 선택기가 기존 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 가 http://stackoverflow.com 시작하는 링크만 선택합니다. 그런 다음 간단한 정규식을 사용하여 URL의 이 부분을 새 것으로 바꾸는 함수가 정의됩니다. 이것이 제공하는 유연성에 유의하십시오. 여기에서 링크에 대한 모든 수정을 수행할 수 있습니다.

Shog9

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

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

차이 prop 과 attr 점이다 attr 반면 HTML 특성을 잡고 prop DOM에 속성을 잡는다.

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

Jerome

조회 시 attr 메소드를 사용하십시오. 새 값으로 모든 속성을 전환할 수 있습니다.

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

Peter Shinners

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

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/');

flamingLogos

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

jQuery가 없는 몇 가지 방법:

• 모든 <a> href 값을 변경하려면 모두 선택한 다음 노드 목록 을 반복합니다. (예)

   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"] href 값이 .png <a> 요소를 선택하는 데 사용할 수 있습니다.

  • a[href^="https://"] https:// 접두사 href 값이 있는 <a> 요소를 선택하는 데 사용할 수 있습니다.

• 당신은 변경하려면 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"; });

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

Josh Crozier

그렇게 하는 간단한 방법은 다음과 같습니다.

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. 특정 URL로 끝나는 href가 있는 모든 앵커 선택: $("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); }); });

Aman Chhabra

이 스니펫은 '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; });

crafter

그것을 위해 jQuery 사용을 중지하십시오! 이것은 JavaScript만으로 매우 간단합니다.

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

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

Pawel

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 사용합니다...

Alireza

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

Anup

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]

선택기는 사용하는 이미지와 레티나 준비 여부에 따라 변경될 수 있지만 개발자 도구를 사용하여 항상 확인할 수 있습니다.

Cooper

노력하다

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

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

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

Kamil Kiełczewski

<a class="link">My Link</a> <script> $(document).ready(function(){ $("a.link").attr("href", "https://toptruyenfull.com/") }) </script>

Đọc truyện hay

출처 : http:www.stackoverflow.com/questions/179713/how-to-change-the-href-attribute-for-a-hyperlink-using-jquery