معالجة DOM باستخدام تقنيات وأمثلة jQuery

يتيح لك التعامل مع DOM باستخدام jQuery تعديل البيانات الموجودة على صفحة الويب أو إضافتها أو إزالتها أو التفاعل معها عن طريق استهداف بنية DOM. يوفر jQuery طرقًا ووظائف ملائمة لأداء مهام معالجة DOM.

فيما يلي تفسيرات لكل قسم مع أمثلة محددة:

اختيار العناصر

• $("p"): حدد جميع <p> العناصر في الصفحة.
• $(".myClass"): حدد جميع العناصر مع الفصل myClass.
• $("#myElement"): حدد العنصر بالمعرف myElement.
• $("parentElement").find(".childElement"): حدد جميع العناصر التابعة للفصل childElement داخل parentElement.

مثال:

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

تغيير المحتوى

• $("#myElement").html("<b>Hello World</b>"): عيّن محتوى 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 إلى العنصر بالمعرف myElement.
• $("#myElement").removeClass("oldClass"): قم بإزالة الفئة oldClass من العنصر ذي المعرف myElement.

مثال:

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

التعامل مع الحدث

$("button").click(function() { }): تسجيل وظيفة معالج الحدث عند <button> النقر فوق عنصر.

مثال:

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

المؤثرات والرسوم المتحركة

• $("#myElement").hide(): إخفاء العنصر بالمعرف myElement.
• $("#myElement").show(): إظهار العنصر مع المعرف myElement.
• $("#myElement").fadeOut(): نفذ تأثير التلاشي على العنصر ذي المعرف myElement.
• $("#myElement").fadeIn(): إجراء تأثير التلاشي على العنصر ذي المعرّف myElement.

مثال:

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