복붙노트

[JQUERY] jQuery를 사용하여 하이퍼 링크의 HREF를 변경하는 방법

JQUERY

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

해결법


  1. 1.사용

    사용

    $("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[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의 부품을 교체하는 간단한 정규 표현식을 사용하는 정의된다. 여기에 수행 할 수있는 링크 수정의 어떤 종류 -이 당신을 제공하는 유연성을합니다.


  2. 2.jQuery를 1.6로하고 사용해야 위 :

    jQuery를 1.6로하고 사용해야 위 :

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

    소품과 ATTR 차이는 버팀대는 DOM 속성을 잡고 반면 ATTR는 HTML 특성을 잡고 있다는 것이다.

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


  3. 3.당신 조회에 ATTR 방법을 사용합니다. 새 값으로 모든 속성을 전환 할 수 있습니다.

    당신 조회에 ATTR 방법을 사용합니다. 새 값으로 모든 속성을 전환 할 수 있습니다.

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

  4. 4.당신이 뭔가 다른 모든 동일한 링크를 변경하려면 또는 개별적으로 페이지 또는 각각의 주어진 섹션에 바로 사람을 제어 할 것인지 여부에 따라 다음 중 하나를 수행 할 수있다.

    당신이 뭔가 다른 모든 동일한 링크를 변경하려면 또는 개별적으로 페이지 또는 각각의 주어진 섹션에 바로 사람을 제어 할 것인지 여부에 따라 다음 중 하나를 수행 할 수있다.

    Google지도를 가리 키도록 구글에 대한 모든 링크를 변경합니다 :

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

  5. 5.영업 명시 적으로 jQuery를 대답을 요구하더라도, 당신은 요즘 모든 것을 jQuery를 사용할 필요가 없습니다.

    영업 명시 적으로 jQuery를 대답을 요구하더라도, 당신은 요즘 모든 것을 jQuery를 사용할 필요가 없습니다.

    대부분의 경우 정규식에 대한 ..no 필요.


  6. 6.이 조각 클래스 'menu_link'의 링크를 클릭 할 때 호출하고 쇼 링크의 텍스트와 URL입니다. 반환 거짓은 다음되는 링크를 방지 할 수 있습니다.

    이 조각 클래스 '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;
    });
    

  7. 7.그렇게 할 수있는 간단한 방법은 다음과 같습니다

    그렇게 할 수있는 간단한 방법은 다음과 같습니다

    함수 ATTR (사람의 jQuery 버전 1.0)

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

    또는

    프로스 기능 (버전 1.6 jQuery를 보낸)

    $("a").prop("href", "https://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);
        });
       });
    

  8. 8.단지를 위해 jQuery를 사용하여 그만! 이것은 단지 자바 스크립트를 너무 간단하다.

    단지를 위해 jQuery를 사용하여 그만! 이것은 단지 자바 스크립트를 너무 간단하다.

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

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


  9. 9.

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

  10. 10.속성에서 HREF, 당신은 순수 자바 스크립트를 사용하여 변경할 수 있지만, 당신이 이미 가지고있는 경우 jQuery를 당신의 페이지에 주입하므로 걱정하지 않습니다, 나는 그것을 두 가지를 표시합니다 :

    속성에서 HREF, 당신은 순수 자바 스크립트를 사용하여 변경할 수 있지만, 당신이 이미 가지고있는 경우 jQuery를 당신의 페이지에 주입하므로 걱정하지 않습니다, 나는 그것을 두 가지를 표시합니다 :

    아래이 HREF이 상상 :

    <a id="ali" alt="Ali" href="http://dezfoolian.com.au">Alireza Dezfoolian</a>
    

    그리고 당신은 그것을 링크를 변경하려면 ...

    당신이 할 수있는 라이브러리없이 순수 자바 스크립트를 사용 :

    document.getElementById("ali").setAttribute("href", "https://stackoverflow.com");
    

    뿐만 아니라 jQuery를에 당신이 할 수 있습니다 :

    $("#ali").attr("href", "https://stackoverflow.com");
    

    또는

    $("#ali").prop("href", "https://stackoverflow.com");
    

    당신이 이미있는 경우이 경우, jQuery를, 나는이 JS 하나 같이 갈 것을보다 짧은 더 크로스 브라우저 ...하지만 다른 아마 jQuery를 한 모습을 주입 ...


  11. 11.당신이 플러그인 단축 코드 Exec에서 PHP를 설치하는 경우 당신은 내가 myjavascript이라는 단축 코드를 만들 수 있습니다

    당신이 플러그인 단축 코드 Exec에서 PHP를 설치하는 경우 당신은 내가 myjavascript이라는 단축 코드를 만들 수 있습니다

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

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

    [myjavascript]
    

    선택기는 당신이 사용하는 어떤 이미지에 그것의 망막 준비 여부에 따라 변경 될 수 있지만, 당신은 항상 개발자 도구를 사용하여 그것을 알아낼 수 있습니다.


  12. 12.시험

    시험

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

    link.href = 'https://stackoverflow.com' 클릭 나

  13. from https://stackoverflow.com/questions/179713/how-to-change-the-href-for-a-hyperlink-using-jquery by cc-by-sa and MIT license