close

jQuery کے ساتھ DOM ہیرا پھیری- تکنیک اور مثالیں۔

jQuery کے ساتھ DOM ہیرا پھیری آپ کو DOM ڈھانچہ کو ہدف بنا کر ویب صفحہ پر ڈیٹا میں ترمیم، اضافہ، ہٹانے یا اس کے ساتھ تعامل کرنے کی اجازت دیتی ہے۔ jQuery DOM ہیرا پھیری کے کاموں کو انجام دینے کے لیے آسان طریقے اور افعال فراہم کرتا ہے۔

یہاں مخصوص مثالوں کے ساتھ ہر حصے کی وضاحتیں ہیں:

 

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

  • $("p"): <p> صفحہ پر تمام عناصر کو منتخب کریں۔
  • $(".myClass"): کلاس کے ساتھ تمام عناصر کو منتخب کریں myClass ۔
  • $("#myElement") ID کے ساتھ عنصر کو منتخب کریں myElement ۔
  • $("parentElement").find(".childElement") childElement: کلاس کے اندر تمام چائلڈ عناصر کو منتخب کریں parentElement ۔

مثال:

$("p").css("color", "red");

 

مواد کو تبدیل کرنا

  • $("#myElement").html("<b>Hello World</b>") ID کے ساتھ عنصر کے لیے HTML مواد سیٹ کریں myElement ۔
  • $("p").text("New text") <p>: تمام عناصر کے لیے متن کا مواد سیٹ کریں ۔

مثال:

$("p").text("New paragraph");

 

عناصر کو شامل کرنا اور ہٹانا

  • $("ul").append("<li>New item</li>"): غیر ترتیب شدہ فہرست() <li> کے آخر میں ایک عنصر شامل کریں ۔ <ul>
  • $(".myClass").remove() myClass: صفحہ سے کلاس والے تمام عناصر کو ہٹا دیں ۔

مثال:

$("ul").append("<li>Item 4</li>");

 

صفات اور طبقات کو تبدیل کرنا

  • $("img").attr("src", "new-image.jpg"): src تمام <img> عناصر کے لیے خصوصیت کی قدر کو تبدیل کریں۔
  • $("#myElement").addClass("newClass") newClass ID کے ساتھ عنصر میں کلاس شامل کریں myElement ۔
  • $("#myElement").removeClass("oldClass") oldClass: ID کے ساتھ عنصر سے کلاس کو ہٹا دیں myElement ۔

مثال:

$("img").attr("alt", "New Image");

 

ایونٹ ہینڈلنگ

$("button").click(function() { }) <button>: کسی عنصر پر کلک ہونے پر ایونٹ ہینڈلر فنکشن کو رجسٹر کریں ۔

مثال:

$("button").click(function() {  
  alert("Button clicked!");  
});

 

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

  • $("#myElement").hide() ID کے ساتھ عنصر کو چھپائیں myElement ۔
  • $("#myElement").show() ID کے ساتھ عنصر دکھائیں myElement ۔
  • $("#myElement").fadeOut() ID کے ساتھ عنصر پر دھندلا اثر ظاہر کریں myElement ۔
  • $("#myElement").fadeIn() ID کے ساتھ عنصر پر ایک دھندلا اثر انجام دیں myElement ۔

مثال:

$("#myElement").fadeOut(1000, function() {  
  console.log("Fade out complete");  
});