JQuery භාවිතා කරමින් හයිපර්ලින්ක් සඳහා වන href වෙනස් කරන්නේ කෙසේද?
JQuery භාවිතා කරමින් හයිපර්ලින්ක් සඳහා වන href වෙනස් කරන්නේ කෙසේද?
Answers:
භාවිතා කිරීම
$("a").attr("href", "http://www.google.com/")
ගූගල් වෙත යොමු කිරීම සඳහා සියලු අධි-සබැඳි වල හරය වෙනස් කරයි. ඔබට තරමක් පිරිපහදු කළ තේරීම් කාරකයක් අවශ්ය විය හැක. උදාහරණයක් ලෙස, ඔබ සතුව සබැඳි ප්රභවයක් (හයිපර්ලින්ක්) සහ සම්බන්ධක ඉලක්කය (හෝ "නැංගුරම") නැංගුරම් ටැග් තිබේ නම්:
<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");
});
එහි පළමු කොටස තේරීම පමණක් සබැඳි කොහෙද තියෙන <a> ආරම්භ සමඟ http://stackoverflow.com
. URL හි මෙම කොටස නව එකක් සමඟ ප්රතිස්ථාපනය කිරීම සඳහා සරල නිත්ය ප්රකාශනයක් භාවිතා කරන ශ්රිතයක් අර්ථ දැක්වේ. මෙය ඔබට ලබා දෙන නම්යශීලී බව සැලකිල්ලට ගන්න - සබැඳියේ ඕනෑම ආකාරයක වෙනස් කිරීමක් මෙහි කළ හැකිය.
each
- පහත සඳහන් දෑ දැන් කළ හැකි වනු ඇත:$(selector).attr('href', function() { return this.replace(/.../, '...'); });
href
: ...return this.href.replace(/.../, '...'); });
JQuery 1.6 සහ ඊට ඉහළින් ඔබ භාවිතා කළ යුත්තේ:
$("a").prop("href", "http://www.jakcms.com")
අතර වෙනස prop
හා attr
බවයි attr
HTML වලින් විශේෂණය ෙහයින්ද, සතුටින් පුරවමින්prop
විශ්ලේෂණයට DOM දේපල පුරවමින්.
ඔබට මෙම ලිපියෙන් වැඩි විස්තර සොයාගත හැකිය: .prop () එදිරිව .attr ()
prop
වැඩිපුර භාවිතා කළ යුත්තේ ඇයිද යන්න පැහැදිලි කිරීමක් attr
අගය කරනු ඇත, මන්ද attr
prop
වේගවත් වේ attr
. jsfiddle.net/je4G5
attr
ඔබගේ බැලීමේ ක්රමය භාවිතා කරන්න . ඔබට නව අගයක් සහිත ඕනෑම ලක්ෂණයක් මාරු කළ හැකිය.
$("a.mylink").attr("href", "http://cupcream.com");
ඔබට සමාන සියලුම සබැඳි වෙනත් දෙයකට වෙනස් කිරීමට අවශ්යද යන්න හෝ පිටුවේ යම් කොටසක ඇති ඒවා පමණක් හෝ එක් එක් ඒවා තනි තනිව පාලනය කිරීමට ඔබට අවශ්යද යන්න මත පදනම්ව, ඔබට මේවායින් එකක් කළ හැකිය.
ගූගල් වෙත සියලු සබැඳි වෙනස් කරන්න එවිට ඒවා ගූගල් සිතියම් වෙත යොමු කරයි:
<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/');
ලේඛනයේ කොතැනට වැටුණත් තනි සබැඳි වෙනස් කිරීමට, සබැඳියට හැඳුනුම්පතක් එකතු කර තේරීම් කාරකයට එම හැඳුනුම්පත එක් කරන්න. මෙම උදාහරණය අන්තර්ගතයේ දෙවන ගූගල් සබැඳිය වෙනස් කරයි, නමුත් පළමු එක හෝ පාදකයේ ඇති එක නොවේ:
<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 භාවිතා කිරීම අවශ්ය නොවේ.
ඔබට සියලු මූලද්රව්යවල 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";
});
බොහෝ අවස්ථාවලදී රීජෙක්ස් අවශ්ය නොවේ .
පංතියේ 'මෙනු_ලින්ක්' සබැඳියක් ක්ලික් කළ විට මෙම ස්නිපටය ක්රියාත්මක වන අතර සබැඳියේ පෙළ සහ යූආර්එල් පෙන්වයි. නැවත පැමිණීම අසත්යය සබැඳිය අනුගමනය කිරීමෙන් වළක්වයි.
<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/")
හෝ
මුක්කු ක්රියාකාරිත්වය (jQuery අනුවාදය 1.6 සිට)
$("a").prop("href", "https://stackoverflow.com/")
ඉහත ක්රමයේ ඇති වාසිය නම්, තේරීම්කරු තනි නැංගුරමක් තෝරා ගන්නේ නම්, එය එම නැංගුරම පමණක් යාවත්කාලීන කරනු ඇති අතර තේරීම්කරු නැංගුරම් කණ්ඩායමක් ආපසු ලබා දෙන්නේ නම්, එය එක් ප්රකාශයක් මගින් පමණක් නිශ්චිත කණ්ඩායම යාවත්කාලීන කරනු ඇත.
දැන්, නිශ්චිත නැංගුරම හෝ නැංගුරම් සමූහය හඳුනා ගැනීමට බොහෝ ක්රම තිබේ:
ඉතා සරල අය:
$("a")
$("a:eq(0)")
active
):$("a.active")
profileLink
ID):$("a#proileLink")
$("a:first")
වඩාත් ප්රයෝජනවත් ඒවා:
$("[href]")
$("a[href='www.stackoverflow.com']")
$("a[href!='www.stackoverflow.com']")
$("a[href*='www.stackoverflow.com']")
$("a[href^='www.stackoverflow.com']")
$("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 භාවිතා කිරීම නවත්වන්න. මෙය ජාවාස්ක්රිප්ට් සමඟ පමණක් සරල ය.
document.querySelector('#the-link').setAttribute('href', 'http://google.com');
ඔබ ෂෝට්කෝඩ් එක්සෙක් පීඑච්පී ප්ලගිනය ස්ථාපනය කළහොත් ඔබට මෙම කෙටි කේතය නිර්මාණය කළ හැකිය.
?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>
ඔබට දැන් පෙනුම / විජට් වෙත ගොස් පාදක විජට් ප්රදේශවලින් එකක් තෝරා පෙළ විජට් එකක් භාවිතා කර පහත කෙටිමං කේතය එක් කළ හැකිය
[myjavascript]
ඔබ භාවිතා කරන රූපය මත පදනම්ව තේරීම් කාරකය වෙනස් විය හැකි අතර එය දෘෂ්ටි විතානය සූදානම් නමුත් සංවර්ධකයින්ගේ මෙවලම් භාවිතයෙන් ඔබට එය සැමවිටම හඳුනාගත හැකිය.
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 එන්නත් කර ඇත්නම්, බොහෝ විට jQuery එක පෙනුම කෙටි හා හරස් බ්රව්සරයක් විය හැකිය ... නමුත් ඒ හැරෙන්නට මම JS
එක සමඟ යන්නෙමි ...