جاوا اسکرپٹ کے ساتھ کلاسز کو اپ ڈیٹ کرنا
JavaScript HTML عناصر کے ساتھ متحرک طور پر تعامل کرنے اور ان میں ہیرا پھیری کرنے کے لیے طاقتور ٹولز فراہم کرتا ہے۔ ایک عام کام آنکلک جیسے واقعات کے جواب میں HTML عنصر کی کلاس کو تبدیل کرنا ہے۔
یہ گائیڈ آپ کے ویب صفحات پر متحرک اسٹائل اور رویے میں تبدیلی کی اجازت دیتے ہوئے، عنصر کی کلاس کو تبدیل کرنے کے لیے JavaScript کا استعمال کرنے کا طریقہ دکھائے گا۔ چاہے آپ بٹن پر کلک کریں یا کسی اور ایونٹ کا جواب دے رہے ہوں، یہ تکنیکیں آپ کی ویب ڈویلپمنٹ کی مہارتوں میں اضافہ کریں گی۔
| کمانڈ | تفصیل |
|---|---|
| className | کسی عنصر کی کلاس وصف کو سیٹ یا واپس کرتا ہے۔ عنصر کی کلاس کو تبدیل کرنے کے لیے استعمال کیا جاتا ہے۔ |
| getElementById | وہ عنصر لوٹاتا ہے جس میں مخصوص قدر کے ساتھ ID انتساب ہوتا ہے۔ بٹن عنصر کو منتخب کرنے کے لیے استعمال کیا جاتا ہے۔ |
| onclick | عنصر پر کلک ایونٹ ہونے پر فنکشن کو عمل میں لانے کے لیے سیٹ کرتا ہے۔ |
| removeClass | jQuery میں منتخب عناصر سے ایک یا زیادہ کلاس کے ناموں کو ہٹاتا ہے۔ |
| addClass | jQuery میں منتخب عناصر میں ایک یا زیادہ کلاس کے نام شامل کرتا ہے۔ |
| $ | jQuery کے لیے عرف، عناصر کو منتخب کرنے اور ان پر کارروائیاں کرنے کے لیے استعمال کیا جاتا ہے۔ |
جاوا اسکرپٹ کلاس ہیرا پھیری کو سمجھنا
فراہم کردہ اسکرپٹس یہ ظاہر کرتی ہیں کہ کلک ایونٹ کے جواب میں JavaScript اور jQuery کا استعمال کرتے ہوئے HTML عنصر کی کلاس کو کیسے تبدیل کیا جائے۔ پہلی اسکرپٹ میں، سادہ جاوا اسکرپٹ اس فعالیت کو حاصل کرنے کے لیے استعمال کیا جاتا ہے۔ دی ID 'myButton' کے ساتھ بٹن عنصر کو منتخب کرنے کے لیے طریقہ استعمال کیا جاتا ہے۔ دی ایونٹ پھر اس عنصر کو تفویض کیا جاتا ہے، بٹن پر کلک کرنے پر عمل کرنے کے فنکشن کی وضاحت کرتا ہے۔ اس فنکشن کے اندر، بٹن کا پراپرٹی کو 'تبدیل' پر سیٹ کیا گیا ہے، اس کی کلاس کو تبدیل کرتے ہوئے اور اس کے بعد اس کے انداز کو جیسا کہ CSS میں بیان کیا گیا ہے۔ یہ اسکرپٹ DOM ہیرا پھیری کے لیے سادہ JavaScript استعمال کرنے کی سادگی اور راست پن کو مؤثر طریقے سے ظاہر کرتا ہے۔
دوسرا اسکرپٹ jQuery کا استعمال کرتے ہوئے اسی فعالیت کو واضح کرتا ہے، جو ایک مشہور JavaScript لائبریری ہے جو HTML دستاویز کی نقل و حرکت اور ہیرا پھیری کو آسان بناتی ہے۔ یہاں، jQuery عرف بٹن عنصر کو منتخب کرنے کے لیے استعمال کیا جاتا ہے۔ دی اس کے بعد کلک ایونٹ کے لیے ایونٹ ہینڈلر سیٹ اپ کرنے کے لیے طریقہ استعمال کیا جاتا ہے۔ اس ہینڈلر کے اندر، بٹن کی کلاس کو jQuery کا استعمال کرتے ہوئے تبدیل کیا جاتا ہے۔ اور addClass طریقے یہ طریقے سادہ جاوا اسکرپٹ کے مقابلے میں زیادہ پڑھنے کے قابل اور جامع نقطہ نظر پیش کرتے ہوئے عنصر کی کلاسوں میں ہیرا پھیری کرنے کا ایک آسان طریقہ فراہم کرتے ہیں۔ دونوں اسکرپٹ کا مقصد یہ ظاہر کرنا ہے کہ کس طرح مختلف ٹولز صارف کے تعامل کی بنیاد پر عنصر کی کلاس کو متحرک طور پر تبدیل کرنے کا ایک ہی مقصد حاصل کر سکتے ہیں۔
جاوا اسکرپٹ کا استعمال کرتے ہوئے کلک پر عنصر کی کلاس کو تبدیل کرنا
جاوا اسکرپٹ اور ایچ ٹی ایم ایل
// HTML<!DOCTYPE html><html><head><title>Change Class Example</title><style>.original { color: blue; }.changed { color: red; }</style></head><body><button id="myButton" class="original">Click me</button><script>document.getElementById('myButton').onclick = function() {this.className = 'changed';};</script></body></html>
jQuery کا استعمال کرتے ہوئے HTML عنصر کی کلاس کو اپ ڈیٹ کرنا
jQuery کے ساتھ جاوا اسکرپٹ
// HTML<!DOCTYPE html><html><head><title>Change Class with jQuery</title><style>.original { color: blue; }.changed { color: red; }</style></head><body><button id="myButton" class="original">Click me</button><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$('#myButton').click(function() {$(this).removeClass('original').addClass('changed');});</script></body></html>
جاوا اسکرپٹ میں کلاس ہیرا پھیری کے لیے جدید تکنیک
واقعات کے جواب میں بنیادی طبقاتی تبدیلیوں کے علاوہ، JavaScript کسی عنصر کی کلاس لسٹ میں ہیرا پھیری کے لیے مزید جدید تکنیک پیش کرتا ہے۔ ایسا ہی ایک طریقہ ہے۔ پراپرٹی، جو کلاسوں کے ساتھ کام کرنے کا زیادہ لچکدار اور طاقتور طریقہ فراہم کرتی ہے۔ دی پراپرٹی عنصر کی کلاس کی خصوصیات کا لائیو DOMTokenList مجموعہ واپس کرتی ہے۔ استعمال کرنا ، آپ عنصر پر لاگو ہونے والی دوسری کلاسوں کو متاثر کیے بغیر کلاسز کو شامل، ہٹا سکتے، ٹوگل اور چیک کر سکتے ہیں۔
مثال کے طور پر، طریقہ ایک عنصر میں ایک یا زیادہ کلاسوں کو شامل کرنے کے لیے استعمال کیا جا سکتا ہے، جبکہ طریقہ ایک یا زیادہ مخصوص کلاسوں کو ہٹا سکتا ہے۔ دی طریقہ خاص طور پر مفید ہے کیونکہ یہ کلاس کو شامل کرتا ہے اگر یہ موجود نہیں ہے اور اگر ایسا ہوتا ہے تو اسے ہٹا دیتا ہے، اسے ڈارک موڈ ٹوگلز کو نافذ کرنے جیسے کاموں کے لیے مثالی بناتا ہے۔ مزید برآں، contains طریقہ یہ چیک کرتا ہے کہ آیا عنصر میں ایک مخصوص کلاس ہے، جو کسی عنصر کی موجودہ حالت کی بنیاد پر سٹائل یا طرز عمل کو مشروط طور پر لاگو کرنے کے لیے مفید ہو سکتی ہے۔
- میں ایک عنصر میں متعدد کلاسز کیسے شامل کروں؟
- کا استعمال کرتے ہیں متعدد دلائل کے ساتھ طریقہ: .
- کیا میں کسی عنصر سے تمام کلاسوں کو ہٹا سکتا ہوں؟
- جی ہاں، آپ استعمال کر سکتے ہیں پراپرٹی اور اسے خالی سٹرنگ پر سیٹ کریں: .
- ان کے درمیان فرق کیا ھے اور ?
- سیٹ کرتا ہے یا پوری کلاس وصف حاصل کرتا ہے، جبکہ کلاسوں میں مزید دانے دار ہیرا پھیری کی اجازت دیتا ہے۔
- میں کیسے چیک کروں کہ آیا کسی عنصر کی مخصوص کلاس ہے؟
- کا استعمال کرتے ہیں طریقہ: .
- میں کسی عنصر پر کلاس کو کیسے ٹوگل کروں؟
- کا استعمال کرتے ہیں طریقہ: .
- کیا میں کلاسوں میں ہیرا پھیری کے لیے jQuery استعمال کر سکتا ہوں؟
- ہاں، jQuery ایسے طریقے مہیا کرتی ہے۔ ، ، اور .
- لائیو DOMTokenList کیا ہے؟
- اے ایک لائیو مجموعہ ہے جو عنصر کی کلاس وصف تبدیل ہونے پر خود بخود اپ ڈیٹ ہوجاتا ہے۔
- ہے تمام براؤزرز میں تعاون یافتہ؟
- تمام جدید براؤزرز میں تعاون یافتہ ہے، لیکن ہو سکتا ہے کہ انٹرنیٹ ایکسپلورر کے پرانے ورژن اس کی مکمل حمایت نہ کریں۔
- میں حالات کی بنیاد پر متحرک طور پر کلاسز کیسے شامل کر سکتا ہوں؟
- آپ استعمال کر سکتے ہیں کے ساتھ مجموعہ میں بیانات یا کلاسوں کو مشروط طور پر لاگو کرنا۔
متحرک طبقاتی تبدیلیوں کے لیے کلیدی تکنیک
فراہم کردہ اسکرپٹس یہ ظاہر کرتی ہیں کہ کلک ایونٹ کے جواب میں JavaScript اور jQuery کا استعمال کرتے ہوئے HTML عنصر کی کلاس کو کیسے تبدیل کیا جائے۔ پہلی اسکرپٹ میں، سادہ جاوا اسکرپٹ اس فعالیت کو حاصل کرنے کے لیے استعمال کیا جاتا ہے۔ دی ID 'myButton' کے ساتھ بٹن عنصر کو منتخب کرنے کے لیے طریقہ استعمال کیا جاتا ہے۔ دی ایونٹ پھر اس عنصر کو تفویض کیا جاتا ہے، بٹن پر کلک کرنے پر عمل کرنے کے فنکشن کی وضاحت کرتا ہے۔ اس فنکشن کے اندر، بٹن کا پراپرٹی کو 'تبدیل' پر سیٹ کیا گیا ہے، اس کی کلاس کو تبدیل کرتے ہوئے اور اس کے بعد اس کے انداز کو جیسا کہ CSS میں بیان کیا گیا ہے۔ یہ اسکرپٹ DOM ہیرا پھیری کے لیے سادہ JavaScript استعمال کرنے کی سادگی اور راست پن کو مؤثر طریقے سے ظاہر کرتا ہے۔
دوسرا اسکرپٹ jQuery کا استعمال کرتے ہوئے اسی فعالیت کو واضح کرتا ہے، ایک مشہور JavaScript لائبریری جو HTML دستاویز کو عبور کرنے اور ہیرا پھیری کو آسان بناتی ہے۔ یہاں، jQuery عرف بٹن عنصر کو منتخب کرنے کے لیے استعمال کیا جاتا ہے۔ دی اس کے بعد کلک ایونٹ کے لیے ایونٹ ہینڈلر سیٹ اپ کرنے کے لیے طریقہ استعمال کیا جاتا ہے۔ اس ہینڈلر کے اندر، بٹن کی کلاس کو jQuery کا استعمال کرتے ہوئے تبدیل کیا جاتا ہے۔ اور addClass طریقے یہ طریقے سادہ جاوا اسکرپٹ کے مقابلے میں زیادہ پڑھنے کے قابل اور جامع نقطہ نظر پیش کرتے ہوئے عنصر کی کلاسوں میں ہیرا پھیری کرنے کا ایک آسان طریقہ فراہم کرتے ہیں۔ دونوں اسکرپٹ کا مقصد یہ ظاہر کرنا ہے کہ کس طرح مختلف ٹولز صارف کے تعامل کی بنیاد پر عنصر کی کلاس کو متحرک طور پر تبدیل کرنے کا ایک ہی مقصد حاصل کر سکتے ہیں۔
JavaScript یا jQuery کا استعمال کرتے ہوئے HTML عنصر کی کلاس میں ہیرا پھیری کرنا کسی عنصر کے اسٹائل اور طرز عمل کو متحرک طور پر اپ ڈیٹ کرنے کا ایک سیدھا سا طریقہ فراہم کرتا ہے۔ جیسے طریقوں کو سمجھنے اور استعمال کرنے سے ، ، اور jQuery کے کلاس ہیرا پھیری کے طریقوں سے، ڈویلپر اپنے ویب صفحات کی انٹرایکٹیویٹی اور ردعمل کو بڑھا سکتے ہیں، اور انہیں صارفین کے لیے مزید پرکشش بنا سکتے ہیں۔