Ajax پر مبنی ایپلیکیشن بنانا jQuery کے ساتھ بہت آسان اور تیز ہو جاتا ہے۔
jQuery کو اصل میں جان ریسگ نے 2006 کے اوائل میں بنایا تھا۔ 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 APIs دستیاب نہیں ہوں گے جب آپ کا jQuery کوڈ ان تک رسائی کی کوشش کرے گا۔
جیسا کہ آپ نے دیکھا ہوگا، ہم نے پچھلی مثال میں اس وصف کو چھوڑ دیا ہے۔ type="text/javascript" ٹیگ کے اندر . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiHTML5 اور تمام جدید براؤزرز میں ختم۔
متبادل کے طور پر، اگر آپ فائل کو ڈاؤن لوڈ کرنے سے گریز کرنا چاہتے ہیں تو آپ آزادانہ طور پر دستیاب CDN (مواد کی ترسیل کے نیٹ ورک) کے لنکس کے ذریعے jQuery کو اپنی دستاویز میں شامل کر سکتے ہیں۔
CDNs لوڈ ٹائم کو کم کرکے کارکردگی کا فائدہ پیش کر سکتے ہیں، کیونکہ وہ دنیا بھر کے متعدد سرورز پر jQuery کی میزبانی کرتے ہیں، اور جب کوئی صارف فائل کی درخواست کرتا ہے، تو اسے قریب ترین سرور سے پیش کیا جائے گا۔
اس کا یہ فائدہ بھی ہے کہ اگر آپ کے ویب صفحہ کے وزیٹر نے دوسری سائٹوں پر جاتے ہوئے اسی CDN سے jQuery کی کاپی پہلے ہی ڈاؤن لوڈ کر لی ہے، تو انہیں اسے دوبارہ ڈاؤن لوڈ کرنے کی ضرورت نہیں پڑے گی کیونکہ یہ پہلے سے ہی ان کے براؤزر کے کیش میں موجود ہے۔
اس صورت میں آپ کو لکھنا پڑے گا:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>jquery پروجیکٹ کے ذریعے فراہم کردہ CDN کے علاوہ، آپ jQuery کے ذریعے شامل کر سکتے ہیں۔ گوگل e مائیکروسافٹ سی ڈی این۔
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 صرف ایک JavaScript لائبریری ہے، jQuery کوڈ کو عنصر کے اندر رکھا جا سکتا ہے <script>، یا آپ اسے بیرونی جاوا اسکرپٹ فائل میں رکھ سکتے ہیں۔$(document).ready(handler); ایک تیار تقریب کے طور پر جانا جاتا ہے۔ یہ کہاں ہے handler یہ ایک ایسا فنکشن ہے جسے عمل میں لانے کے طریقہ کار میں منتقل کیا جاتا ہے، جیسے ہی دستاویز تیار ہوتی ہے، یعنی جب DOM کا درجہ بندی مکمل طور پر بن چکی ہو۔jQuery کا طریقہ ready() یہ عام طور پر ایک گمنام فنکشن کے ساتھ استعمال ہوتا ہے۔ لہذا، اوپر کی مثال کو شارٹ ہینڈ اشارے میں بھی اس طرح لکھا جا سکتا ہے:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>کسی فنکشن کے اندر آپ بنیادی نحو کے بعد کسی بھی عمل کو انجام دینے کے لیے jQuery کے بیانات لکھ سکتے ہیں، جیسے:
$(selector).action();یہ کہاں ہے، $(selector) یہ بنیادی طور پر 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 وصف کے ساتھ ایک عنصر کو منتخب اور نمایاں کرے گا۔ 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>کی پریس ایونٹ کی ڈاون ایونٹ سے ملتا جلتا ہے، سوائے اس ترمیم کنندہ اور غیر پرنٹنگ کیز جیسے شفٹ، ای ایس سی، بیک اسپیس یا ڈیلیٹ، ایرو کیز وغیرہ۔ وہ کی ڈاون ایونٹس کو فائر کرتے ہیں لیکن کی پریس ایونٹس کو نہیں۔
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
.
Veeam کی طرف سے Coveware سائبر بھتہ خوری کے واقعات کے ردعمل کی خدمات فراہم کرتا رہے گا۔ Coveware فرانزک اور تدارک کی صلاحیتیں پیش کرے گا…
پیشن گوئی کی دیکھ بھال تیل اور گیس کے شعبے میں انقلاب برپا کر رہی ہے، پلانٹ کے انتظام کے لیے ایک جدید اور فعال نقطہ نظر کے ساتھ۔
UK CMA نے مصنوعی ذہانت کے بازار میں بگ ٹیک کے رویے کے بارے میں ایک انتباہ جاری کیا ہے۔ وہاں…
عمارتوں کی توانائی کی کارکردگی کو بڑھانے کے لیے یورپی یونین کی طرف سے تیار کردہ "گرین ہاؤسز" فرمان نے اپنے قانون سازی کے عمل کو اس کے ساتھ ختم کیا ہے…