المنتقى

يسمح لك منتقى jQuery بإختيار و تعديل عناصر HTML منفصلة أو مجتمعة .


منتقى jQuery

تحدثنا في الدرس السابق عن بعض الأمثلة عن كيفية اختيار عناصر HTML مختلفة .

من المهم تعلم كيف تقوم jQuery باختيار العنصر المحدد الذي تود تطبيق الـتأثيرات عليه .

يسمح لك منتقى jQuery باختيار عناصر HTML مجتمعة أو منفصلة من خلال اسم العنصر أو اللاحقة الخاصة به أو من خلال المحتوى .

ملاحظة :

مصطلح HTML DOM يسمح لك بالتعديل على عناصر DOM كعقد مجتمعة أو منفصلة .


منتقى العناصر Element Selector

تستخدم jQuery منتقى CSS لاختيار عناصر HTML .

  • $("p") : تستخدم لاختيار جميع عناصر <p> .
  • $("p.intro") : تستخدم لاختيار جميع عناصر <p> و التي تحتوي على class="intro" .
  • $("p#demo") : تستخدم لاختيار جميع عناصر <p> و التي تحتوي على id="intro" .

منتقى اللواحق Attribute Selectors

تستخدم jQuery تعابير Xpath لاختيار العناصر مع اللواحق الخاصة بهم .

  • $("[href]") : تستخدم لاختيار جميع العناصر التي تحتوي على اللاحقة href .
  • $("[href='#']") : تستخدم لاختيار جميع العناصر التي تحتوي على القيمة “#” المرفقة مع اللاحقة href .
  • $("[href!='#']") : تستخدم لاختيار جميع العناصر التي لا تحتوي على القيمة “#” المرفقة مع اللاحقة href .
  • $("[href$='.jpg']") : تستخدم لاختيار جميع العناصر التي تحتوي على اللاحقة href والتي تنتهي قيمتها .jpg .

منتقى CSS

يستخدم منتقى CSS لتغيير خواص CSS لعناصر HTML .

يقوم المثال التالي بتغيير لون الخلفية لجميع عناصر p إلى اللون الأصفر :

$("p").css("background-color","yellow");
 

أمثلة أخرى

أمثلة أخرى عن منتقى jQuery
التركيبة الشرح
$(this) عنصر HTML الحالي
$(“p”) جميع عناصر <p>
$(“p.intro”) جميع عناصر <p> و التي تحتوي على class=”intro”
$(“p#intro”) جميع عناصر <p> و التي تحتوي على id=”intro”
$(“p#intro:first”) أول عنصر <p> و الذي يحتوي على id=”intro”
$(“.intro”) جميع العناصر التي تحتوي على class=”intro”
$(“#intro”) أول عنصر يحتوي على id=”intro”
$(“ul li:first”) أول عنصر <li> للقائمة <ul>
$(“ul li:first-child”) أول عنصر <li> لجميع القائمة <ul>
$(“[href$=’.jpg’]”) جميع العناصر التي تحتوي على اللاحقة href والتي تنتهي قيمتها “.jpg”
$(“div#intro .head”) جميع العناصر التي تحتوي على class=”head” داخل العنصر <div> مع id=”intro”