JavaScript ایک معروف ورسٹائل زبان ہے جو زیادہ تر ویب سائٹس میں انٹرایکٹو افعال کو شامل کرنے کے لیے استعمال ہوتی ہے۔ یہ jQuery نامی لائبریری کے ساتھ آتا ہے جو ان کاموں کو مؤثر طریقے سے انجام دیتا ہے۔ jQuery کے طریقے بنیادی طور پر وہ اعمال ہیں جو کوڈ کی زیادہ شمولیت کے بغیر ایک مخصوص کام انجام دیتے ہیں۔ ایسا ہی ایک طریقہ ہے ' تبدیلی() 'طریقہ جو 'تبدیلی' ایونٹ کو فوری طور پر نوٹس دیتا ہے کہ ان پٹ فیلڈ کی قدر بدل گئی ہے۔ یہ زیادہ تر HTML فارم فیلڈز کے ساتھ ساتھ چیک باکسز، ریڈیو بٹن اور سلیکٹ باکسز میں استعمال ہوتا ہے۔
یہ تحریر jQuery 'change()' طریقہ کار کے کام کرنے اور عملی نفاذ کی وضاحت کرتی ہے۔
jQuery 'change()' طریقہ کیسے کام کرتا ہے؟
jQuery ' تبدیلی() 'طریقہ فائر کرتا ہے' تبدیلی ' تقریب کا منتظم. 'تبدیلی' ایونٹ ایک خاص قسم کا JavaScript ایونٹ ہے جو اس وقت ہوتا ہے جب مخصوص (“ ”, “
نحو
$ ( سلیکٹر ) .تبدیلی ( فنکشن )
مندرجہ بالا نحو میں:
-
- سلیکٹر: یہ HTML عنصر کی ہیرا پھیری کی اجازت دیتا ہے۔
- فنکشن: یہ ایک اختیاری پیرامیٹر ہے جو 'تبدیلی()' طریقہ کے ساتھ انجام دینے کے لیے فنکشن کی وضاحت کرتا ہے۔
مثال 1: ان پٹ فیلڈ کو تبدیل شدہ قدر حاصل کرنے کے لیے 'تبدیلی()' طریقہ استعمال کرنا
اس مثال میں، ' تبدیلی() ' طریقہ کا اطلاق کسی خاص HTML ' ' عنصر کو تبدیل شدہ قدر واپس کرنے کے لیے کیا جاتا ہے۔
HTML کوڈ
سب سے پہلے، درج ذیل HTML کوڈ کا جائزہ:
< h2 > jQuery تبدیلی ( ) طریقہ h2 >< ص > ان پٹ فیلڈ کی قدر کو تبدیل کریں: ص >
ان پٹ فیلڈ: < ان پٹ قسم = 'متن' قدر = 'لینکس' تبدیلی = 'انتباہ (this.value)' >
< ص > فائر کرنے کے لیے دیے گئے بٹن پر کلک کریں۔ 'تبدیلی' تقریب: ص >
< بٹن > یہاں کلک کریں بٹن >
اس کوڈ بلاک میں:
-
- لیول 2 کی ذیلی سرخی کی وضاحت کریں ' 'ٹیگ۔
- اگلا، 'کی مدد سے پیراگراف کی وضاحت کریں 'ٹیگ۔
- اس کے بعد، 'کے ذریعے ایک ان پٹ فیلڈ شامل کریں 'ٹیگ کا نام' ان پٹ فیلڈ '، اس قسم کا ہونا' متن '، اور قدر بطور ' لینکس '، بالترتیب.
- یہ ایک کو بھی جوڑتا ہے ' تبدیلی () ' ایونٹ جو ایک الرٹ باکس کو پاپ اپ کرتا ہے جب مخصوص ان پٹ ویلیو میں تبدیلی آتی ہے۔
- ' ٹیگ بیان کردہ بیان کے ساتھ ایک اور پیراگراف بناتا ہے۔
- آخر میں، استعمال کرتے ہوئے ایک بٹن شامل کریں ' <بٹن> 'ٹیگ۔
jQuery کوڈ
اب، درج ذیل jQuery کوڈ پر غور کریں:
< سر >< سکرپٹ src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' >> سکرپٹ >
< سکرپٹ >
$ ( دستاویز ) .تیار ( فنکشن ( ) {
$ ( 'بٹن' ) کلک کریں۔ ( فنکشن ( ) {
$ ( 'ان پٹ' ) .تبدیلی ( ) ;
} ) ;
} ) ;
سکرپٹ >
سر >
مندرجہ بالا کوڈ لائنوں میں:
-
- وضاحت کریں ' 'سر' سیکشن میں ٹیگ کریں جس میں آفیشل ویب سائٹ سے jQuery کا CDN پاتھ شامل ہے۔ '
- اگلا، jQuery کوڈ سب سے پہلے 'کے مساوی ہے دستاویز ' سلیکٹر ٹارگٹڈ DOM عنصر کو منتخب کرنے اور منسلک کرنے کے لیے ' تیار() ' طریقہ جو دستاویز کے لوڈ ہوتے ہی بیان کردہ فنکشن () کو طلب کرتا ہے۔
- اس کے بعد، ' بٹن ' سلیکٹر کو شامل کیا جاتا ہے اور اس سے منسلک ہوتا ہے ' کلک کریں() ' طریقہ جو بٹن پر کلک کرنے پر کسی فنکشن کو انجام دینے کی اجازت دے گا۔
- فنکشن کی تعریف میں، لاگو کریں ' تبدیلی() 'طریقہ' پر ان پٹ عنصر جو 'onchange' ایونٹ کو فائر کرتا ہے جب اس کی قدر بدل جاتی ہے۔
آؤٹ پٹ
آؤٹ پٹ ایک الرٹ باکس دکھاتا ہے جس میں ان پٹ فیلڈ کی بدلی ہوئی قدر کے ساتھ 'onchange' ایونٹ کو متحرک کیا جاتا ہے۔
مثال 2: ان پٹ فیلڈ کے پس منظر کا رنگ تبدیل کرنے کے لیے 'تبدیلی()' طریقہ استعمال کرنا
یہ خاص مثال 'کے کام کی وضاحت کرتی ہے تبدیلی() قدر تبدیل کرنے پر ان پٹ فیلڈ کے پس منظر کا رنگ تبدیل کرنے کا طریقہ۔
HTML کوڈ
دیئے گئے HTML کوڈ پر عمل کریں:
< h2 > jQuery تبدیلی ( ) طریقہ h2 >< ص > ان پٹ فیلڈ کی قدر کو تبدیل کریں: ص >
ان پٹ فیلڈ: < ان پٹ قسم = 'متن' قدر = 'لینکس' >> ص >
یہاں، ' ' عنصر صرف اس کی قسم اور قدر بتاتا ہے۔
jQuery کوڈ
اب، jQuery کوڈ پر جائیں:
< سر >< سکرپٹ src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' >> سکرپٹ >
< سکرپٹ >
$ ( دستاویز ) .تیار ( فنکشن ( ) {
$ ( 'ان پٹ' ) .تبدیلی ( فنکشن ( ) {
$ ( یہ ) .css ( 'پس منظر کا رنگ' ، 'پیلا' ) ;
} ) ;
} ) ;
سکرپٹ >
سر >
مندرجہ بالا کوڈ لائنوں میں، ' تبدیلی () 'طریقہ ایک منسلک کرتا ہے' فنکشن() ' جو 'CSS' اسٹائلنگ پراپرٹی پر لاگو ہوتا ہے ' پس منظر کا رنگ 'منتخب کردہ HTML عنصر پر، یعنی تبدیل شدہ ان پٹ ویلیو پر 'ان پٹ'۔
آؤٹ پٹ
آؤٹ پٹ اس بات کی تصدیق کرتا ہے کہ دیے گئے ان پٹ فیلڈ کا پس منظر کا رنگ تبدیل ہوتا ہے جب اس کی قدر تبدیل ہوتی ہے۔
نتیجہ
jQuery پیش کرتا ہے ' تبدیلی() ' طریقہ جو 'تبدیلی' ایونٹ کو فائر کرتا ہے جب صارف ان پٹ فیلڈ کی قدر کو تبدیل کرتا ہے۔ اس کی فعالیتوں کو سپورٹ کرنے کے لیے اسے ایک اضافی ایونٹ سے بھی منسلک کیا جا سکتا ہے یہ صرف ' '، '