Ajax تي ٻڌل ايپليڪيشن ٺاهڻ تمام سادو ۽ تيز ٿي وڃي ٿو jQuery سان.
jQuery اصل ۾ جان ريسگ پاران 2006 جي شروعات ۾ ٺاهي وئي. jQuery پروجيڪٽ هن وقت ڊولپرز جي ورهايل گروپ طرفان هڪ اوپن سورس پروجيڪٽ جي طور تي برقرار رکيو ويو آهي.
توھان jQuery سان گھڻو وقت ۽ ڪوشش بچائي سگھو ٿا. تنھنڪري ھن سائيٽ کي پنھنجي پسند ۾ شامل ڪريو ۽ پڙھڻ جاري رکو
اتي ڪيتريون ئي شيون آھن جيڪي توھان ڪري سگھوٿا jQuery سان.
فهرست اتي ختم نه ٿي ٿئي، اتي ٻيون ڪيتريون ئي سٺيون شيون آھن جيڪي توھان ڪري سگھوٿا jQuery سان.
اتي ڪيترائي فائدا آھن ڇو ھڪڙي کي چونڊڻ گھرجي jQuery استعمال ڪرڻ لاءِ:
شروع ڪرڻ لاءِ، اچو ته پهرين ڊائون لوڊ ڪريون jQuery جي ڪاپي ۽ پوءِ ان کي اسان جي پروجيڪٽ ۾ شامل ڪريو. jQuery جا ٻه نسخا ڊائون لوڊ لاءِ موجود آهن: تڪڙ ۾ e دٻايل نه .
اڻ سڌريل فائل ترقي يا ڊيبگنگ لاءِ بهتر آهي؛ جڏهن ته، ننڍي ۽ ڪمپريسر ٿيل فائل پيداوار لاءِ سفارش ڪئي وئي آهي ڇاڪاڻ ته اها بينڊوڊٿ بچائي ٿي ۽ ننڍي فائل سائيز جي ڪري ڪارڪردگي بهتر بڻائي ٿي.
اسان هتي کان jQuery ڊائون لوڊ ڪري سگھون ٿا: https://jquery.com/download/
هڪ دفعو توهان jQuery فائل ڊائون لوڊ ڪريو ٿا ته توهان ڏسي سگهو ٿا ته ان ۾ js ايڪسٽينشن آهي، يعني اها جاوا اسڪرپٽ فائل آهي. حقيقت ۾ JQuery هڪ جاوا اسڪرپٽ لائبريري کانسواءِ ڪجهه به ناهي، تنهنڪري توهان عنصر سان HTML دستاويز ۾ jQuery فائل شامل ڪري سگهو ٿا. جيئن توهان باقاعده 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 APIs موجود نه هوندا جڏهن توهان جو jQuery ڪوڊ انهن تائين رسائي جي ڪوشش ڪندو.
جيئن توهان محسوس ڪيو هوندو، اسان پوئين مثال ۾ وصف کي ڇڏي ڏنو type="text/javascript" ٽيگ جي اندر . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiHTML5 ۽ سڀني جديد برائوزرن ۾ ختم.
متبادل طور، توھان jQuery کي پنھنجي دستاويز ۾ آزاد طور تي دستياب CDN (Content Delivery Network) لنڪ ذريعي شامل ڪري سگھو ٿا، جيڪڏھن توھان فائل کي ڊائون لوڊ ڪرڻ کان پاسو ڪندا.
سي ڊي اينز لوڊ وقت گھٽائڻ سان ڪارڪردگي جو فائدو پيش ڪري سگھن ٿا، ڇاڪاڻ ته اھي jQuery کي ھوسٽ ڪندا آھن دنيا جي گھڻن سرورن تي، ۽ جڏھن ڪو صارف فائل جي درخواست ڪندو، اھو سڀ کان ويجھي سرور مان پيش ڪيو ويندو.
ان ۾ اهو به فائدو آهي ته جيڪڏهن توهان جي ويب پيج جو دورو ڪندڙ ٻين سائيٽن جو دورو ڪندي ساڳئي CDN مان jQuery جي ڪاپي ڊائون لوڊ ڪري چڪو آهي، انهن کي ان کي ٻيهر ڊائون لوڊ ڪرڻ جي ضرورت نه پوندي ڇاڪاڻ ته اهو پهريان ئي انهن جي برائوزر جي ڪيش ۾ آهي.
انهي حالت ۾ توهان کي لکڻو پوندو:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>jquery پروجيڪٽ پاران مهيا ڪيل CDN جي اضافي ۾، توھان jQuery ذريعي شامل ڪري سگھو ٿا گوگل e Microsoft جي سي ڊي اين.
jQuery لائبريري جي مقصدن کي ڏسڻ ۽ ان کي توهان جي دستاويز ۾ ڪيئن شامل ڪيو وڃي، هاڻي وقت آهي jQuery کي عملي طور تي رکڻ جو.
ھاڻي اچو ته ھڪ سادي jQuery آپريشن ڪريون ھيڊر ٽيڪسٽ رنگ کي اڳئين رنگ مان تبديل ڪنديdefiڪارو کان سائو رنگ.
<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 صرف هڪ جاوا اسڪرپٽ لائبريري آهي، jQuery ڪوڊ عنصر جي اندر رکي سگھجي ٿو <script>، يا توھان ان کي خارجي JavaScript فائل ۾ رکي سگھو ٿا؛$(document).ready(handler)؛ تيار ٿيل واقعي طور سڃاتو وڃي ٿو. اهو ڪٿي آهي handler اهو هڪ فنڪشن آهي جيڪو طريقي سان عمل ڪيو وڃي ٿو، جيئن ئي دستاويز تيار ٿئي ٿي، يعني جڏهن ڊوم جي جوڙجڪ مڪمل طور تي ٺهيل آهي.jQuery جو طريقو ready() اهو عام طور تي هڪ گمنام فنڪشن سان استعمال ڪيو ويندو آهي. تنهن ڪري، مٿي ڏنل مثال کي به شارٽ هينڊ نوٽيشن ۾ لکي سگهجي ٿو:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>هڪ فنڪشن جي اندر توهان jQuery بيان لکي سگهو ٿا ڪنهن به عمل کي انجام ڏيڻ لاءِ بنيادي نحو جي پٺيان، جهڙوڪ:
$(selector).action();اهو ڪٿي آهي، $(selector) اهو بنيادي طور تي HTML عناصر کي DOM وڻ مان چونڊيندو آهي انهي ڪري ان کي ٺاهي سگهجي ٿو ۽ 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="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>چونڊ ڪندڙن کان علاوه definiti، 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()طريقو 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 درجي بندي مڪمل طور تي ٺهيل آهي ۽ تيار ٿيڻ لاء تيار آهي.
<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
.
رنگ سازي ذريعي سٺي موٽر صلاحيتن کي ترقي ڪرڻ ٻارن کي وڌيڪ پيچيده صلاحيتن لاء تيار ڪري ٿو جهڙوڪ لکڻ. رنگ ڏيڻ…
بحري شعبي هڪ حقيقي عالمي معاشي طاقت آهي، جيڪا 150 بلين مارڪيٽ جي طرف نيويگيٽ ڪئي آهي ...
گذريل سومر، فنانشل ٽائمز OpenAI سان هڪ ڊيل جو اعلان ڪيو. ايف ٽي پنهنجي عالمي سطح جي صحافت کي لائسنس ڏئي ٿو ...
لکين ماڻهو ادا ڪن ٿا اسٽريمنگ سروسز لاءِ، ادا ڪندا مھينا سبسڪرپشن فيس. اها عام راءِ آهي ته توهان…