Ajax-පාදක යෙදුමක් නිර්මාණය කිරීම jQuery සමඟ ඉතා සරල සහ වේගවත් වේ.
jQuery 2006 වසරේ මුල් භාගයේදී John Resig විසින් නිර්මාණය කරන ලදී. jQuery ව්‍යාපෘතිය දැනට විවෘත මූලාශ්‍ර ව්‍යාපෘතියක් ලෙස බෙදා හරින ලද සංවර්ධකයින් පිරිසක් විසින් නඩත්තු කර පවත්වාගෙන යනු ලබයි.
jQuery සමඟ ඔබට විශාල කාලයක් සහ ශ්‍රමයක් ඉතිරි කර ගත හැකිය. එබැවින් මෙම අඩවිය ඔබගේ ප්‍රියතමයන් වෙත එක් කර දිගටම කියවන්න
jQuery වලින් තව ගොඩක් දේවල් කරන්න පුලුවන්.
ලැයිස්තුව එතැනින් අවසන් නොවේ, jQuery සමඟ ඔබට කළ හැකි තවත් බොහෝ රසවත් දේවල් තිබේ.
යමෙකු jQuery භාවිතා කිරීමට තෝරා ගත යුතු වාසි කිහිපයක් තිබේ:
ආරම්භ කිරීම සඳහා, අපි මුලින්ම jQuery පිටපතක් බාගත කර එය අපගේ ව්‍යාපෘතියට ඇතුළත් කරමු. jQuery හි අනුවාද දෙකක් බාගත කිරීම සඳහා තිබේ: කඩිමුඩියේ e සම්පීඩිත නොවේ .
සංකෝචනය නොකළ ගොනුව සංවර්ධනය හෝ නිදොස්කරණය සඳහා වඩාත් සුදුසු වේ; අතර, කුඩා කළ සහ සම්පීඩිත ගොනුව නිෂ්පාදනය සඳහා නිර්දේශ කරනුයේ එය කලාප පළල සුරකින අතර කුඩා ගොනු ප්‍රමාණය හේතුවෙන් කාර්ය සාධනය වැඩි දියුණු කරන බැවිනි.
අපට මෙතැනින් jQuery බාගත කළ හැක: https://jquery.com/download/
ඔබ jQuery ගොනුව බාගත කළ පසු, එහි js දිගුවක් ඇති බව ඔබට පෙනෙනු ඇත, එනම් එය JavaScript ගොනුවකි. ඇත්ත වශයෙන්ම JQuery යනු JavaScript පුස්තකාලයක් මිස අන් කිසිවක් නොවේ, එබැවින් ඔබට jQuery ගොනුව මූලද්රව්ය සමඟ HTML ලේඛනයට ඇතුළත් කළ හැකිය. ඔබ සාමාන්‍ය JavaScript ගොනු ඇතුළත් කරනවා වගේ.
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>අභිරුචි ස්ක්‍රිප්ට් වලට පෙර සැමවිටම jQuery ගොනුව ඇතුළත් කිරීමට මතක තබා ගන්න; එසේ නොමැති නම්, ඔබේ jQuery කේතය ඒවාට ප්‍රවේශ වීමට උත්සාහ කරන විට jQuery API ලබා ගත නොහැක.
ඔබ දැක ඇති පරිදි, අපි පෙර උදාහරණයේ ගුණාංගය මඟ හැරියෙමු type="text/javascript" ටැග් එක ඇතුලේ . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiHTML5 සහ සියලුම නවීන බ්‍රව්සර් වල nited කර ඇත.
විකල්පයක් ලෙස, ඔබට නොමිලේ ලබා ගත හැකි CDN (අන්තර්ගත බෙදා හැරීමේ ජාලය) සබැඳි හරහා jQuery ඔබේ ලේඛනයට ඇතුළත් කළ හැකිය, ඔබ ගොනුව බාගැනීමෙන් වැළකී සිටීමට කැමති නම්.
CDN වලට පැටවීමේ කාලය අඩු කිරීමෙන් කාර්ය සාධන වාසියක් ලබා දිය හැක, මන්ද ඔවුන් ලොව පුරා බහුවිධ සේවාදායකයන් මත jQuery සත්කාරකත්වය සපයන අතර පරිශීලකයෙකු ගොනුව ඉල්ලා සිටින විට, එය ළඟම ඇති සේවාදායකයෙන් ලබා දෙනු ඇත.
ඔබේ වෙබ් පිටු නරඹන්නා වෙනත් වෙබ් අඩවිවලට පිවිසීමේදී එම CDN වෙතින් jQuery පිටපතක් දැනටමත් බාගත කර ඇත්නම්, එය දැනටමත් ඔවුන්ගේ බ්‍රවුසරයේ හැඹිලියේ ඇති බැවින් ඔවුන්ට එය නැවත බාගත කිරීමට අවශ්‍ය නොවන බව මෙහි වාසිය ද ඇත.
මෙම අවස්ථාවේදී, ඔබට ලිවිය යුතුය:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>jquery ව්‍යාපෘතිය මඟින් සපයන CDN වලට අමතරව, ඔබට jQuery හරහා ඇතුළත් කළ හැක ගූගල් e මයික්රොසොෆ්ට් සීඩීඑන්.
jQuery පුස්තකාලයේ අරමුණු සහ එය ඔබගේ ලේඛනයට ඇතුළත් කරන්නේ කෙසේද යන්න දැකීමෙන්, දැන් jQuery ප්‍රායෝගිකව ක්රියාත්මක කිරීමට කාලයයි.
දැන් අපි ශීර්ෂ පාඨයේ වර්ණය පෙර වර්ණයෙන් වෙනස් කිරීමෙන් සරල jQuery මෙහෙයුමක් කරමුdefiකළු සිට කොළ දක්වා nited.
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>කේතයේ අපි ශීර්ෂයේ එනම් මූලද්‍රව්‍යයේ වර්ණය වෙනස් කිරීමෙන් සරල jQuery මෙහෙයුමක් සිදු කළෙමු ලේඛනය සූදානම් වන විට jQuery මූලද්‍රව්‍යයේ තේරීම්කාරකය සහ css() ක්රමය භාවිතා කිරීම, ලේඛනය සූදානම් සිදුවීම ලෙස හැඳින්වේ.
jQuery ප්‍රකාශයක් සාමාන්යයෙන් ඩොලර් ලකුණකින් ආරම්භ වේ ( $) සහ අර්ධ කොමාවකින් අවසන් වේ ( ;).
jQuery හි, ඩොලර් ලකුණ ( $) යනු jQuery සඳහා අන්වර්ථයක් පමණි. සරලම jQuery ප්‍රකාශය පෙන්වන පහත නියැදි කේතය සලකා බලන්න.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>උදාහරණය හුදෙක් අනතුරු ඇඟවීමේ පණිවිඩයක් පෙන්වයි "Hello I'm a JQuery sign” පරිශීලකයාට. සමහර විශේෂාංග බලමු:
<script>: jQuery යනු JavaScript පුස්තකාලයක් පමණි, jQuery කේතය මූලද්රව්යය තුළ තැබිය හැක <script>, හෝ ඔබට එය බාහිර JavaScript ගොනුවක තැබිය හැකිය;$(document).ready(handler); සූදානම් සිදුවීමක් ලෙස හැඳින්වේ. එය කොහේ ද handler එය ලේඛනය සූදානම් වූ විගස, එනම් DOM ධුරාවලිය සම්පූර්ණයෙන්ම ගොඩනගා ඇති විට ක්රියාත්මක කළ යුතු ක්රමය වෙත පැවරෙන ශ්‍රිතයකි.jQuery ක්රමය ready() එය සාමාන්යයෙන් නිර්නාමික ශ්‍රිතයක් සමඟ භාවිතා වේ. එබැවින්, ඉහත උදාහරණය මෙලෙස කෙටිකතා අංකනයකින් ද ලිවිය හැකිය:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>ශ්‍රිතයක් තුළ ඔබට මූලික වාක්‍ය ඛණ්ඩය අනුගමනය කරමින් ඕනෑම ක්‍රියාවක් කිරීමට jQuery ප්‍රකාශ ලිවිය හැක, වැනි:
$(selector).action();එය කොහේ ද, $(selector) එය මූලික වශයෙන් DOM ගසෙන් HTML මූලද්රව්ය තෝරන බැවින් එය හැසිරවිය හැක action() CSS ගුණාංගයේ අගය වෙනස් කිරීම, හෝ මූලද්‍රව්‍යයේ අන්තර්ගතය සැකසීම වැනි තෝරාගත් මූලද්රව්ය මත සමහර ක්‍රියා යොදන්න.
දැන් අපි ඡේද පෙළ සකසන තවත් උදාහරණයක් බලමු:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>jQuery උදාහරණය තේරීම්කාරකයට යොමු කරයි p, සහ මෙය සියලු ඡේද, පසුව ක්රමය තෝරා ගනී text() ඡේදයේ පෙළ අන්තර්ගතය සකසන්න "Hello World!".
ලේඛනය සූදානම් වන විට පෙර උදාහරණයේ ඡේද පෙළ ස්වයංක්රීයව ප්රතිස්ථාපනය වේ. නමුත් jQuery කේතය ධාවනය කිරීමට පෙර, ඡේදයේ පෙළ ප්රතිස්ථාපනය කිරීමට ඔබට ක්‍රියාවක් කිරීමට අවශ්‍ය නම් එය කරන්නේ කෙසේදැයි බලමු.
අපි අවසාන උදාහරණයක් සලකා බලමු:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>මෙම උදාහරණයේ දී ඡේද පෙළ ප්රතිස්ථාපනය වන්නේ බොත්තම මත ක්ලික් කිරීමේ සිදුවීමක් සිදු වූ විට පමණි.Replace Text“, එයින් අදහස් කරන්නේ පරිශීලකයෙකු මෙම බොත්තම ක්ලික් කළ විටය.
පිටුවේ ඇති අනන්‍ය ID සහිත තනි අයිතමයක් තේරීමට ඔබට ID තේරීම්කාරකය භාවිතා කළ හැක.
උදාහරණයක් ලෙස, පහත jQuery කේතය ID ගුණාංගය සහිත මූලද්‍රව්‍යයක් තෝරාගෙන ඉස්මතු කරයි id="markid", ලේඛනය සූදානම් වන විට.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>විශේෂිත පන්තියක් සහිත මූලද්රව්ය තෝරා ගැනීමට පන්ති තේරීම්කාරකය භාවිතා කළ හැක.
උදාහරණයක් ලෙස, පහත jQuery කේතය පන්ති ගුණාංගය සමඟ මූලද්රව්ය තෝරාගෙන ඉස්මතු කරයි class="markclass", ලේඛනය සූදානම් වන විට.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>අයිතමයේ නම අනුව අයිතම තේරීමට අයිතම තේරීම්කාරකය භාවිතා කළ හැක.
උදාහරණයක් ලෙස, පහත jQuery කේතය මඟින් සියලුම ඡේදය, එනම් මූලද්රව්ය තෝරාගෙන ඉස්මතු කරයි "<p>" ලේඛනය සූදානම් වන විට.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>සබැඳි උපලක්ෂණයක් වැනි, එහි HTML ගුණාංගවලින් එකක් මත පදනම්ව මූලද්‍රව්‍යයක් තේරීමට ඔබට උපලක්ෂණ තේරීම්කාරකය භාවිතා කළ හැක. targetහෝ ආදානයක ගුණාංගය type, ආදිය.
උදාහරණයක් ලෙස, පහත jQuery කේතය මූලද්රව්ය වැනි සියලුම පෙළ ආදාන තෝරාගෙන ඉස්මතු කරයි "<input>" සමඟ type="text", ලේඛනය සූදානම් වන විට.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>ඔබේ තේරීම වඩාත් නිවැරදි කිරීමට ඔබට CSS තේරීම් ඒකාබද්ධ කළ හැකිය.
උදාහරණයක් ලෙස, ඔබට කිසියම් වර්ගයක් සහ පන්තියක් ඇති ලේඛනයක මූලද්රව්ය සොයා ගැනීමට පන්ති තේරීම් කාරකය මූලද්රව්ය තේරීමක් සමඟ ඒකාබද්ධ කළ හැකිය.
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>තේරීම්කරුවන්ට අමතරව definited, jQuery පිටුවක ඇති මූලද්රව්ය තෝරාගැනීමේ හැකියාව තවදුරටත් වැඩිදියුණු කිරීම සඳහා තමන්ගේම අභිරුචි තේරීමක් සපයයි.
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>සබැඳියක් හෝ බොත්තමක් ක්ලික් කරන විට, ආදාන කොටුවකට හෝ පෙළ ප්‍රදේශයකට පෙළ ඇතුළු කරන විට, තේරීම් පෙට්ටියක තේරීමක් කිරීම, යතුරුපුවරුවේ යතුරක් එබීම, මවුස් පොයින්ටරය ගෙනයාම වැනි වෙබ් පිටුව සමඟ පරිශීලක අන්තර්ක්‍රියා මගින් සිදුවීම් බොහෝ විට අවුලුවනු ලැබේ. , ආදිය. සමහර අවස්ථාවලදී, බ්‍රවුසරයටම පිටු පැටවීම සහ සිදුවීම් බාගත කිරීම වැනි සිදුවීම් ක්‍රියාරම්භ කළ හැක.
බොහෝ ස්වදේශීය බ්‍රවුසර සිදුවීම් සඳහා සිදුවීම් ක්‍රම ඉදිරිපත් කිරීමෙන් jQuery මූලික සිදුවීම් හැසිරවීමේ යාන්ත්‍රණයන් වැඩිදියුණු කරයි, මෙම ක්‍රමවලින් සමහරක් ready(), click(), keypress(), focus(), blur(), change(), ආදිය.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>සාමාන්යයෙන්, සිදුවීම් ප්රධාන කණ්ඩායම් හතරකට වර්ග කළ හැකිය:
පරිශීලකයා අයිතමයක් මත ක්ලික් කිරීම, මූසික දර්ශකය චලනය කිරීම යනාදිය මත මූසික සිදුවීමක් ආරම්භ වේ.
මූසික සිදුවීම් හැසිරවීමට බහුලව භාවිතා වන jQuery ක්‍රම කිහිපයක් මෙන්න.
click()ක්රමය click() සිදුවීම සඳහා තෝරාගත් මූලද්‍රව්‍යවලට සිදුවීම් හසුරුවන්න කාර්යයක් අමුණන්න "click". පරිශීලකයා එම අයිතමය මත ක්ලික් කළ විට සම්බන්ධිත ශ්‍රිතය ක්රියාත්මක වේ. පහත උදාහරණය මඟින් මූලද්රව්ය සඟවනු ඇත <p> ක්ලික් කළ විට පිටුවක.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()ක්රමය dblclick() සිදුවීම සඳහා තෝරාගත් මූලද්‍රව්‍යවලට සිදුවීම් හසුරුවන්න කාර්යයක් අමුණන්න "dblclick". පරිශීලකයා එම අයිතමය දෙවරක් ක්ලික් කළ විට සම්බන්ධිත ශ්‍රිතය ක්රියාත්මක වේ. පහත උදාහරණය මඟින් මූලද්රව්ය සඟවනු ඇත <p> ඒවා දෙවරක් ක්ලික් කරන විට.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()ක්රමය hover() මූසික දර්ශකය මූලද්රව්ය තුළට සහ ඉන් පිටතට ගමන් කරන විට ක්රියාත්මක වන තෝරාගත් මූලද්‍රව්‍යවලට සිද්ධි හසුරුවන්න කාර්යයන් එකක් හෝ දෙකක් අමුණන්න. පරිශීලකයා යම් අයිතමයක් මත මවුස් පොයින්ටරය තැබූ විට පළමු කාර්යය ක්රියාත්මක වන අතර, පරිශීලකයා එම අයිතමයෙන් මූසික දර්ශකය ඉවත් කළ විට දෙවන කාර්යය ක්රියාත්මක වේ.
පහත උදාහරණය අයිතම උද්දීපනය කරනු ඇත <p> ඔබ එය මත කර්සරය තැබූ විට, ඔබ කර්සරය ඉවත් කරන විට උද්දීපනය ඉවත් කරනු ලැබේ.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()ක්රමය mouseenter() මූසිකය මූලද්‍රව්‍යයකට ඇතුළු වූ විට ක්රියාත්මක වන තෝරාගත් මූලද්‍රව්‍යවලට සිද්ධි හසුරුවන්න ශ්‍රිතයක් අමුණන්න. පහත උදාහරණය මූලද්‍රව්‍යයට පන්ති උද්දීපනය එක් කරයි <p> ඔබ කර්සරය එය මත තැබූ විට.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()ක්රමය mouseleave() මූසිකය අයිතමයක් හැර ගිය විට ක්රියාත්මක වන තෝරාගත් අයිතමවලට සිද්ධි හසුරුවන ශ්‍රිතයක් අමුණන්න. පහත උදාහරණය මූලද්‍රව්‍යයෙන් පන්ති උද්දීපනය ඉවත් කරයි <p> ඔබ කර්සරය එයින් ඉවත් කරන විට.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>පරිශීලකයා යතුරුපුවරුවේ යතුරක් එබූ විට හෝ මුදා හරින විට යතුරුපුවරු සිදුවීමක් මතු වේ. යතුරුපුවරු සිදුවීම් හැසිරවීමට බහුලව භාවිතා වන jQuery ක්‍රම කිහිපයක් බලමු.
keypress()ක්රමය keypress() පරිශීලකයාගෙන් යතුරුපුවරු ආදානය බ්‍රවුසරයට ලැබෙන විට ක්රියාත්මක වන තෝරාගත් මූලද්රව්ය (සාමාන්යයෙන් ආකෘති පාලන) වෙත සිදුවීම්-හැසිරවීමේ ශ්‍රිතයක් අමුණයි. පහත උදාහරණය මඟින් සිදුවීම ක්රියාත්මක වූ විට පණිවිඩයක් පෙන්වනු ඇත keypress සහ ඔබ ඔබේ යතුරුපුවරුවේ යතුර එබූ විට එය කොපමණ වාර ගණනක් ක්‍රියා විරහිත වේද යන්න.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Shift, Esc, Backspace හෝ Delete, arrow keys වැනි විකරණකාරක සහ මුද්‍රණ නොවන යතුරු හැර, යතුරු එබීම සිදුවීම යතුරුපුවරු සිදුවීමට සමාන වේ. ඔවුන් Keydown සිද්ධීන් වෙඩි තබන නමුත් keypress events නොවේ.
keydown()ක්රමය keydown() පරිශීලකයා ප්‍රථමයෙන් යතුරුපුවරුවේ යතුරක් එබූ විට ක්රියාත්මක වන තෝරාගත් අයිතමවලට (සාමාන්යයෙන් පාලන ආකෘති පත්‍ර) සිදුවීම් හසුරුවීමේ ශ්‍රිතයක් අමුණයි. පහත උදාහරණය මඟින් සිදුවීම ක්රියාත්මක වූ විට පණිවිඩයක් පෙන්වනු ඇත keydown සහ ඔබ ඔබේ යතුරුපුවරුවේ යතුර එබූ විට එය කොපමණ වාර ගණනක් ක්‍රියා විරහිත වේද යන්න.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()ක්රමය keyup() පරිශීලකයා යතුරුපුවරුවේ යතුරක් මුදා හරින විට ක්රියාත්මක වන තෝරාගත් මූලද්රව්ය (සාමාන්යයෙන් ආකෘති පාලන) වෙත සිදුවීම්-හැසිරවීමේ ශ්‍රිතයක් අමුණන්න. පහත උදාහරණය මඟින් සිදුවීම ක්රියාත්මක වූ විට පණිවිඩයක් පෙන්වනු ඇත keyup සහ ඔබ ඔබේ යතුරුපුවරුවේ යතුරක් ඔබා මුදා හරින විට එය කොපමණ වාර ගණනක් ක්‍රියා විරහිත වේද යන්න.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>පෝරම පාලනයකට අවධානය යොමු වූ විට හෝ නැති වූ විට, හෝ පරිශීලකයා පෙළ ආදානයකට පෙළ ටයිප් කිරීම, තෝරාගත් කොටුවක විකල්පයක් තේරීම යනාදී පෝරම පාලන අගයක් වෙනස් කරන විට පෝරම සිදුවීමක් ක්රියාත්මක වේ. ආකෘති සිදුවීම් හැසිරවීමට බහුලව භාවිතා වන jQuery ක්‍රම කිහිපයක් මෙන්න.
change()ක්රමය change() මූලද්‍රව්‍යවලට සිද්ධි හසුරුවන කාර්යයක් අමුණන්න <input> සහ එහි අගය වෙනස් වන විට ක්රියාත්මක වේ. පහත උදාහරණය පතන තේරීම් කොටුවේ විකල්පයක් තෝරාගැනීමේදී අනතුරු ඇඟවීමේ පණිවිඩයක් පෙන්වනු ඇත.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>ක්ලික් කොටු, පිරික්සුම් කොටු සහ රේඩියෝ බොත්තම් සඳහා, පරිශීලකයා මූසිකය තේරීමක් කරන විට සිදුවීම ක්ෂණිකව ක්‍රියා කරයි, නමුත් පෙළ ආදානය සහ පෙළ ප්‍රදේශය සඳහා මූලද්‍රව්‍යයේ අවධානය නැති වූ පසු සිදුවීම ගිනි ගනී.
focus()ක්රමය focus() එය අවධානයට ලක් වූ විට ක්රියාත්මක වන තෝරාගත් මූලද්‍රව්‍යවලට (සාමාන්යයෙන් පාලන සහ ආකෘති බන්ධන) සිදුවීම් හසුරුවන්න ශ්‍රිතයක් අමුණයි. පෙළ ආදානයට අවධානය යොමු වූ විට පහත උදාහරණය පණිවිඩයක් පෙන්වයි.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()ක්රමය blur() වැනි මූලද්රව්ය සෑදීමට සිද්ධි හසුරුවන ශ්‍රිතයක් අමුණන්න <input>, <textarea>, <select> අවධානය නැති වූ විට ක්රියාත්මක වේ. පෙළ ආදානයේ අවධානය නැති වූ විට පහත උදාහරණය පණිවිඩයක් පෙන්වයි.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()ක්රමය submit() මූලද්‍රව්‍යවලට සිද්ධි හසුරුවන කාර්යයක් අමුණන්න <form> පරිශීලකයා පෝරමයක් ඉදිරිපත් කිරීමට උත්සාහ කරන විට ධාවනය වන. පෝරමය ඉදිරිපත් කිරීමට උත්සාහ කරන විට ඇතුළත් කළ අගය මත පදනම්ව පහත උදාහරණය පණිවිඩයක් පෙන්වනු ඇත.
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>DOM (ලේඛන වස්තු ආකෘතිය) පිටුව සුදානම් වූ අවස්ථාවක හෝ පරිශීලකයා බ්‍රවුසර කවුළුව ප්‍රමාණය වෙනස් කරන විට හෝ අනුචලනය කරන විට, සිදුවීම් ද සිදු කෙරේ. මෙවැනි සිදුවීම් හැසිරවීමට බහුලව භාවිතා වන jQuery ක්‍රම කිහිපයක් මෙන්න.
ready()ක්රමය ready() DOM සම්පූර්ණයෙන්ම පූරණය වූ විට ක්රියාත්මක කිරීමට ශ්‍රිතයක් නියම කරයි.
DOM ධුරාවලිය සම්පූර්ණයෙන් ගොඩනඟා හැසිරවීමට සූදානම් වූ වහාම පහත උදාහරණය ඡේද පෙළ ප්රතිස්ථාපනය කරයි.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()ක්රමය resize() බ්‍රවුසර කවුළුවේ ප්‍රමාණය වෙනස් වන විට ක්රියාත්මක වන කවුළු මූලද්‍රව්‍යයට සිදුවීම් හසුරුවන්න ශ්‍රිතයක් අමුණන්න.
පහත උදාහරණය මඟින් බ්‍රවුසර කවුළුවෙහි කොන් ඇදගෙන එහි ප්‍රමාණය වෙනස් කිරීමට උත්සාහ කරන විට එහි වත්මන් පළල සහ උස පෙන්වනු ඇත.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()ක්රමය scroll() සිදුවීම් හසුරුවන්නෙහි කාර්යයක් කවුළුව වෙත හෝ වෙත අමුණන්න iframe සහ අයිතමයේ අනුචලන ස්ථානය වෙනස් වන සෑම විටම ධාවනය වන අනුචලනය කළ හැකි අයිතම.
පහත උදාහරණය බ්‍රවුසර කවුළුව අනුචලනය කරන විට පණිවිඩයක් පෙන්වනු ඇත.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Apple Vision Pro වාණිජ නරඹන්නා භාවිතයෙන් අක්ෂි ශල්‍යකර්මයක් Catania Polyclinic හි සිදු කරන ලදී.
වර්ණ ගැන්වීම හරහා සියුම් මෝටර් කුසලතා වර්ධනය කිරීම ලිවීම වැනි වඩාත් සංකීර්ණ කුසලතා සඳහා දරුවන් සූදානම් කරයි. වර්ණ ගැන්වීමට...
නාවික අංශය සැබෑ ගෝලීය ආර්ථික බලවතෙකු වන අතර එය බිලියන 150 ක වෙළඳපලක් කරා ගමන් කර ඇත.
පසුගිය සඳුදා ෆිනෑන්ෂල් ටයිම්ස් OpenAI සමඟ ගිවිසුමක් නිවේදනය කළේය. FT එහි ලෝක මට්ටමේ පුවත්පත් කලාවට බලපත්‍ර ලබා දෙයි…