jQuery کا بنیادی نحو- انتخاب، جوڑ توڑ، اور اثرات

jQuery کے بنیادی نحو میں سلیکٹر(CSS طرز سلیکٹر) اور منتخب عناصر کو جوڑ توڑ کے طریقے استعمال کرنا شامل ہے۔ یہاں jQuery کی کچھ بنیادی نحوی مثالیں ہیں:

 

عناصر کا انتخاب

  • HTML ٹیگ کے نام سے عناصر کو منتخب کریں: $("tagname") مثال: صفحہ پر موجود $("p") تمام عناصر کو منتخب کرتا ہے ۔ <p>

  • CSS کلاس کے ذریعے عناصر کو منتخب کریں: $(".classname") مثال: $(".myClass") کلاس "myClass" والے تمام عناصر کو منتخب کرتا ہے۔

  • ID کے لحاظ سے عناصر کو منتخب کریں: $("#idname") مثال: $("#myElement") ID "myElement" والے عنصر کو منتخب کرتا ہے۔

  • انتساب کے لحاظ سے عناصر کو منتخب کریں: $("[attribute='value']") مثال: "بٹن" پر سیٹ کردہ $("[data-type='button']") وصف کے ساتھ عناصر کو منتخب کرتا ہے ۔ data-type

  • انتخاب کو یکجا کرنا: $("tagname.classname"), $("#idname .classname"), ...

 

منتخب عناصر کو جوڑنا

  • کسی عنصر کے مواد کو تبدیل کرنا: .html(), .text() مثال: $("#myElement").html("New content") ID "myElement" کے ساتھ عنصر کے HTML مواد کو سیٹ کرتا ہے۔

  • عنصر کی خصوصیات میں ترمیم کرنا: .attr(), .prop() مثال: تمام عناصر کی صفت کو $("img").attr("src", "newimage.jpg") تبدیل کرتا ہے ۔ src <img>

  • کسی عنصر کی CSS کلاسوں میں ہیرا پھیری کرنا: .addClass(), .removeClass(), .toggleClass() مثال: $("#myElement").addClass("highlight") ID "myElement" والے عنصر میں کلاس "ہائی لائٹ" شامل کرتا ہے۔

  • عناصر کو چھپانا/ دکھانا: .hide(), .show(), .toggle() مثال: $(".myClass").hide() کلاس "myClass" والے تمام عناصر کو چھپاتا ہے۔

  • عناصر پر واقعات کو ہینڈل کرنا: .click(), .hover(), .submit(), ... مثال: $("button").click(function() { ... }) ایک کلک ایونٹ ہینڈلر کو رجسٹر کرتا ہے۔

 

عنصر کے مجموعوں کے ساتھ کام کرنا

  • ایک مجموعہ کے ذریعے تکرار کرنا: .each() مثال: صفحہ پر $("li").each(function() { ... }) ہر ایک عنصر پر اعادہ کرتا ہے ۔ <li>

  • ایک مجموعہ کو فلٹر کرنا: .filter(), .not() مثال: عناصر کو $("div").filter(".myClass") فلٹر کرتا ہے <div> اور "myClass" کلاس والے عناصر کو منتخب کرتا ہے۔

  • ایک مجموعہ میں عناصر داخل کرنا: .append(), .prepend(), .after(), .before() مثال: ID "myElement" والے عنصر میں $("#myElement").append("<p>New paragraph</p>") ایک نیا عنصر شامل کرتا ہے ۔ <p>

 

اثرات اور متحرک تصاویر

  • fadeIn/fadeOut اثرات کو انجام دینا: .fadeIn(), .fadeOut() مثال: $("#myElement").fadeIn(1000) 1 سیکنڈ کے دورانیے میں ID "myElement" والے عنصر میں دھندلا پن۔

  • slideUp/slideDown اثرات کو انجام دینا: .slideUp(), .slideDown() مثال: $(".myClass").slideUp(500) 0.5 سیکنڈ کے دورانیے میں "myClass" کلاس والے تمام عناصر کو اوپر سلائیڈ کرتا ہے۔

  • حسب ضرورت اینیمیشنز کرنا: .animate() مثال: $("#myElement").animate({ left: '250px', opacity: '0.5' }) ID "myElement" کے ساتھ عنصر کو اس کی بائیں پوزیشن اور دھندلاپن کو تبدیل کرکے متحرک کرتا ہے۔

 

یہ مثالیں ظاہر کرتی ہیں کہ jQuery کے بنیادی نحو کے مختلف پہلوؤں کو عناصر کو منتخب کرنے، ان کی خصوصیات میں ہیرا پھیری کرنے اور اثرات یا اینیمیشنز کو لاگو کرنے کے لیے کیسے استعمال کیا جائے۔ jQuery ویب ڈویلپمنٹ کے کاموں کو آسان بنانے اور بڑھانے کے لیے طریقوں اور افعال کا ایک بھرپور سیٹ پیش کرتا ہے۔