المنتقى

By


يسمح لك منتقى 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"


ليست هناك تعليقات:

إرسال تعليق