javascript - JQuery का उपयोग कर हाइपरलिंक के लिए href को कैसे बदलें




hyperlink (7)

वर्डप्रेस अवदा थीम लोगो छवि के एचआरईएफ बदलें

यदि आप शॉर्टकोड एक्सेक PHP प्लगइन स्थापित करते हैं तो आप इस शोर्ट को बना सकते हैं जिसे मैंने myjavascript कहा था

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

अब आप उपस्थिति / विजेट पर जा सकते हैं और पाद लेख विजेट क्षेत्रों में से एक चुन सकते हैं और निम्न शोर्ट जोड़ने के लिए टेक्स्ट विजेट का उपयोग कर सकते हैं

[myjavascript]

चयनकर्ता आपके द्वारा उपयोग की जाने वाली छवि के आधार पर बदल सकता है और यदि यह रेटिना तैयार है लेकिन आप हमेशा डेवलपर्स टूल का उपयोग कर इसे समझ सकते हैं।

आप jQuery का उपयोग कर हाइपरलिंक के लिए href कैसे बदल सकते हैं?


JQuery 1.6 और ऊपर के साथ आपको इसका उपयोग करना चाहिए:

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

प्रोप और एटीआर के बीच का अंतर यह है कि एटीआर एचटीएमएल विशेषता को पकड़ लेता है जहां प्रोम डीओएम संपत्ति को पकड़ता है।

आप इस पोस्ट में अधिक जानकारी प्राप्त कर सकते हैं: .prop () बनाम .attr ()


इस पर निर्भर करता है कि क्या आप किसी अन्य लिंक के सभी समान लिंक बदलना चाहते हैं या आप पृष्ठ के दिए गए अनुभाग में या प्रत्येक व्यक्ति को व्यक्तिगत रूप से नियंत्रित करना चाहते हैं, आप इनमें से एक कर सकते हैं।

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

दस्तावेज़ में कहां गिरते हैं, इस पर ध्यान दिए बिना व्यक्तिगत लिंक बदलने के लिए, लिंक में एक आईडी जोड़ें और फिर उस आईडी को चयनकर्ता को जोड़ें। यह उदाहरण सामग्री में दूसरा 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/');

ऐसा करने का सरल तरीका यह है:

Attr फ़ंक्शन (jQuery संस्करण 1.0 के बाद से)

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

या

प्रो फ़ंक्शन (jQuery संस्करण 1.6 के बाद से)

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

इसके अलावा, उपरोक्त तरीके का लाभ यह है कि यदि चयनकर्ता एक एंकर का चयन करता है, तो यह केवल एंकर को अपडेट करेगा और यदि चयनकर्ता एंकर के समूह को लौटाता है, तो यह विशिष्ट समूह को केवल एक कथन के माध्यम से अपडेट करेगा।

अब, एंकरों के सटीक एंकर या समूह की पहचान करने के कई तरीके हैं:

काफी सरल लोग:

  1. टैग नाम के माध्यम से एंकर का चयन करें: $("a")
  2. इंडेक्स के माध्यम से एंकर का चयन करें: $("a:eq(0)")
  3. विशिष्ट वर्गों के लिए एंकर का चयन करें (इस श्रेणी में केवल वर्ग active साथ एंकर): $("a.active")
  4. विशिष्ट आईडी के साथ एंकर चुनना (उदाहरण में profileLink आईडी): $("a#proileLink")
  5. पहले एंकर href का चयन करना: $("a:first")

अधिक उपयोगी लोग:

  1. Href विशेषता वाले सभी तत्वों का चयन करना: $("[href]")
  2. विशिष्ट href के साथ सभी एंकर का चयन करना: $("a[href='www..com']")
  3. विशिष्ट एंकर नहीं होने वाले सभी एंकरों का चयन करना: $("a[href!='www..com']")
  4. विशिष्ट यूआरएल युक्त href के साथ सभी एंकरों का चयन करना: $("a[href*='www..com']")
  5. विशिष्ट यूआरएल से शुरू होने वाले href के साथ सभी एंकरों का चयन करना: $("a[href^='www..com']")
  6. विशिष्ट यूआरएल के साथ href समाप्त होने वाले सभी एंकरों का चयन करना: $("a[href$='www..com']")

अब, यदि आप विशिष्ट यूआरएल में संशोधन करना चाहते हैं, तो आप इसे इस तरह कर सकते हैं:

उदाहरण के लिए यदि आप 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);
    });
   });

यह स्निपेट तब आमंत्रित होता है जब वर्ग 'मेनू_लिंक' का एक लिंक क्लिक किया जाता है, और लिंक का टेक्स्ट और यूआरएल दिखाता है। वापसी झूठी लिंक का पालन करने से रोकता है।

<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 उत्तर के लिए कहा था, आपको इन दिनों सबकुछ के लिए jQuery का उपयोग करने की आवश्यकता नहीं है।

JQuery के बिना कुछ तरीकों:

  • यदि आप सभी <a> तत्वों के href मान को बदलना चाहते हैं, तो उन्हें सभी का चयन करें और फिर nodelist माध्यम से पुनरावृत्त करें: (example)

    var anchors = document.querySelectorAll('a');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://.com";
    });
    
  • यदि आप उन सभी <a> तत्वों के href मान को बदलना चाहते हैं जिनमें वास्तव में एक href विशेषता है, तो [href] विशेषता चयनकर्ता ( a[href] ) जोड़कर उन्हें चुनें: (example)

    var anchors = document.querySelectorAll('a[href]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://.com";
    });
    
  • यदि आप <a> तत्वों का href मान बदलना चाहते हैं जिसमें एक विशिष्ट मान है, उदाहरण के लिए google.com , विशेषता चयनकर्ता का उपयोग करें a[href*="google.com"] : (example)

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

    इसी तरह, आप अन्य विशेषता चयनकर्ताओं का भी उपयोग कर सकते हैं। उदाहरण के लिए:

    • a[href$=".png"] का उपयोग <a> तत्वों का चयन करने के लिए किया जा सकता है जिनका href मान .png साथ समाप्त होता है।

    • a[href^="https://"] का उपयोग <a> तत्वों वाले href मानों के साथ करने के लिए किया जा सकता है जो https:// साथ उपसर्ग किए गए हैं।

  • यदि आप <a> तत्वों के href मान को बदलना चाहते हैं जो एकाधिक स्थितियों को पूरा करते हैं: (example)

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

.. ज्यादातर मामलों में, regex के लिए जरूरत नहीं है।


$("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://.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.\.com/, 
         "http://.com");
   });

पहला भाग केवल लिंक का चयन करता है जहां href http://.com शुरू होता है । फिर, एक फ़ंक्शन परिभाषित किया जाता है जो यूआरएल के इस हिस्से को नए के साथ बदलने के लिए एक साधारण नियमित अभिव्यक्ति का उपयोग करता है। ध्यान दें कि यह आपको लचीलापन देता है - लिंक में किसी भी तरह का संशोधन यहां किया जा सकता है।





hyperlink