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

jQuery를 사용하여 하이퍼링크의 href를 변경하려면 어떻게 해야 합니까?

질문에 대한 의견 (4)
해결책

사용.

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

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

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

...그러면 아마도 실수로 href 속성을 추가하지 않으려 할 것입니다. 따라서 안전을 위해 선택기가 기존 '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 *가 "https://stackoverflow.com"과 일치하는 링크만 선택합니다. 그런 다음 간단한 정규식을 사용하여 URL의 이 부분을 새 부분으로 바꾸는 함수를 정의합니다. 링크에 대한 모든 종류의 수정이 여기에서 수행될 수 있는 유연성을 제공합니다.

해설 (4)

Jquery 1.6 함께 잔인하니 콩지름에:

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

차이점은 '제안' 와 '속성' '속성' 속성 '제안' 달하는 반면 에로남이네 HTML DOM 재산이잖아 잡습니다

이 게시물에 자세한 내용을 확인할 수 있습니다. https://stackoverflow.com/questions/5874652/prop-vs-attr

해설 (3)

룩업에 "attr" 메서드를 사용합니다. 새 값을 가진 모든 속성을 전환할 수 있습니다.

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

동일한 연결을 모두 다른 연결로 변경할지 또는 페이지의 지정된 섹션에 있는 연결만 제어할지 또는 각 연결을 개별적으로 제어할지 여부에 따라 다음 중 하나를 수행할 수 있습니다.

Google의 모든 링크를 Google 지도를 가리키도록 변경합니다.

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

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

지정된 섹션에서 링크를 변경하려면 선택기에 컨테이너 div's 클래스를 추가합니다. 이 예제는 내용에서 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 링크를 변경하지만 첫 번째 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/');
해설 (0)

비록 명시적으로 주문하신거 sub&gt &lt, OP, jQuery 는 t # 39 라고 너회가 don& 사용해야 하는 요즘, 모든 것에 대해 포함한다. &lt /sub>;

없이 몇 가지 방법을 포함한다.

  • '-' 모든 값을 변경할 경우 href ',' 모든 요소를 a&gt &lt, 이를 선택한 후 반복할 nodelist: [ (예) *] [2]

var 앵커 도쿠망스케리셀레스랄라 (& # 39, a& # 39;), = 아리스프로토티페스포에치스콜 (앵커, 함수 (요소점 인덱스화하여) { http://stackoverflow.com = &quot 엘레망스흐레프 ";; }).

  • ',' 가치 '를 스케쳐내 변경하십시오 모든 요소를 가지고 실제로 &lt href a&gt href 속성을 선택하고', '', ' [href]' 을 추가하여 속성용 선택기를 ('는 [href]'). [ (예) ] [3]

var 앵커 = 도쿠망스케리셀레스랄라 (& # 39, & # 39 는 [href];). 아리스프로토티페스포에치스콜 (앵커, 함수 (요소점 인덱스화하여) { http://stackoverflow.com = &quot 엘레망스흐레프 ";; }).

  • 스케쳐내 값을 변경할 수 있는 요소는 ',', '' href &lt a&gt 'google.com', 예를 들어 특정 값을 선택기를 ' (google.com) 는 [ = &quot, href 속성을 사용하여 "]': [ (예) *] [4]

var 앵커 = 도쿠망스케리셀레스랄라 (& # 39 매핑되며, [href * = &quot, google.com "] & # 39;). 아리스프로토티페스포에치스콜 (앵커, 함수 (요소점 인덱스화하여) { http://stackoverflow.com = &quot 엘레망스흐레프 ";; }).

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

[href = $ .png&quot ";] '-' a ',' 요소 '를 사용할 수 있는' 가치 '와' .png, a&gt &lt href motor1.1end.

  • 'a [href = &quot https://&quot ^,]', ',' 선택 '&lt a&gt 사용될 수 있는 요소는' 와 'https://' href 값은 제작 기업이다.

  • 스케쳐내 값을 변경할 수 있는 요소는 ',', '' href &lt a&gt 충족합니다 여러 조건: [ (예) ] [6]

var 앵커 = 도쿠망스케리셀레스랄라 (& # 39 매핑되며, [href ^ = &quot, https://&quot,] 와 [href = $ .png&quot ";] & # 39;). 아리스프로토티페스포에치스콜 (앵커, 함수 (요소점 인덱스화하여) { http://stackoverflow.com = &quot 엘레망스흐레프 ";; }).

, regex .no 에서 가장 필요한 건.

해설 (0)

39, & # 39 링크를 menu_link& 수업 때 이 스니핏을 호출합니다. 텍스트와 링크를 클릭하면 해당 url 을 논의하고 있다. 링크 다시 거짓값 못하게 할 수 있는 능력이다.

<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;
});
해설 (3)

Jquery 를 사용하여 정지점을 그냥 생각해서라도 it! 이거 정말 간단한 JavaScript 와 뿐입니다.

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

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

해설 (1)

그렇게 간단한 방법이 있다.

  • [속성 함수은] [1] (이후 jQuery 버전 1.0) *
$("a").attr("href", "https://stackoverflow.com/") 

또는

  • [Prop 기능을] [2] (이후 버전 jQuery 1.6) *
$("a").prop("href", "https://stackoverflow.com/")

또 하나의 앵커, 그렇지 않을 경우 활용할 수 있는 방법은 위 선택기를 선택함 업데이트 앵커 국한됨 아웃하기로 선택기를 이를 통해 한 그룹을 되돌려줍니다 앵커 특정 집단을 업데이트하십시오 기술서임을 뿐입니다.

이제 정확히 파악할 수 있는 몇 가지 롯이여 앵커 또는 그룹 앵커:

  • 아주 간단한 Ones:*
  1. 앵커 선택 통해 태그번호 이름: '' $ (&quot a";)
  2. 앵커 선택 통해 인덱스화할: '$ (&quot &quot eq (0), a:;)'
  3. 특정 클래스 (class only 이처럼 아나운서 앵커 선택 함께 클래스 'active'). '' $ (&quot a.active";)
  4. 앵커, 특정 ID (이곳 프로피레링크 '예' 선택 ID): '' $ (&quot 매핑되며, # proileLink")
  5. 첫 번째 선택 앵커 href: '' $ (&quot a:first";)
  • 더 유용한 ones:*
  1. 사용하는 모든 요소가 href 속성을 선택하면. '' $ (" [href] ")
  2. 모든 앵커가 선택할 수 있는 특정 href: $ (&quot 매핑되며, [href = & # 39, 'www.stackoverflow.com', & # 39] ")
  3. 모든 앵커가 없다는 선택하면 특정 href: $ (&quot [href! = & # 39, 매핑되며, 'www.stackoverflow.com', & # 39] ")
  4. 선택할 수 있는 모든 앵커가 href redboot용 특정 URL: '$ (&quot 매핑되며, [href = & # 39, (www.stackoverflow.com)', & # 39] ")
  5. Href 특정 URL 로 시작하는 모든 앵커가 선택. '$ (&quot 매핑되며, [href = & # 39; ^ (www.stackoverflow.com)', & # 39] ")
  6. 선택할 수 있는 모든 앵커가 href 끝나는 특정 URL: '$ (&quot 매핑되며, [href = & # 39, $ (www.stackoverflow.com)', & # 39] ")

이제 스케쳐내 특정 url 수정, 당신이 할 수 있다.

예를 들어 가는 모든 url google.com 웹 사이트를 추가할 경우 가상본 구축해도 됩니다 이를 다음과 같이 표현하였다.

$("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

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

wordpress 의 테마 濡쒓퀬 Image&lt /h1&gt 아바다 HREF 변경하십시오 h1&gt <;;; Php 를 설치할 경우 어떤 난 이 단축 코드 미하바스크리프트 불렀으매 단축 코드 실행 플러그인에는 만들 수 있습니다.

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

이제 gnu. orghttp://www. 모양 / 위젯 및 위젯 영역 및 텍스트 위젯을 사용하여 다음 중 하나를 선택할 바닥글에 단축 코드 추가

[myjavascript]

어떤 이미지가 선택기를 따라 변경될 수 있습니다 # 39 의 레티나 준비됐어들 아웃하기로 it& 너회의 flexlm*용 수 없지만 항상 사용하여 그림 아웃해야 개발 툴.

해설 (0)

'에서' href 속성을 사용하여 JavaScript, 만일 너희가 이미 jQuery 투입될 수 있도록 순결케 변경하십시오 don& 우려가 있는 표시, t # 39 페이지에 내아기마저도 다 다음과 같습니다.

당신은 이 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 의 화질을 한 경우, 아마도 더 짧고 검색하기를 내가 아닌 다른 cross-browser.but 포착하십시오 jQuery 를 'JS' one.

해설 (0)