بسم الله الرحمن الرحيم ، طبعا وبلا مقدمات ، العنوان يظهر صلب الموضوع ، حيث سأبين طرق التعامل مع selector ( في ترجمة فرنسية selecteur ) للغة الجافا سكربت على منصة jQuery ، حتى نعلم أصول التعامل معها ، وتكون لنا مرجعا في أي وقت ، ومع العلم بأن منصة jQuery متوافقة مع جميع إصدارات css ، حتى الجديدة منها ، فهي تقبل وبكل تأكيد قواعد كتابة جميع selector الخاصة بلغة css والتي عملنا لها تأصيلات من قبل هنا ،

كتابة selector على jQuery

توجد طريقتان وهي مبينة في السطرين التاليين :

$(selector)
jQuery(selector)

وهكذا اختار أي selector ه داخل صفحة الويب الخاصة بي ، مثال :

$("p").html("content");
jQuery("p a").mouseover();
$("div.class").fadeOut();
$("form#id").fadeIn();

طبعا حتى لا يكون هناك نوع من التكرار ، فجميع الـ selector التي بينتها في مقال css فيمكنني استعمالها هنا ، امثلة :

a[href^=http://]
input[type=text]
div[title^=example]
a[href$=.pdf]
a[href*=fez-soft.net]

وهكذا ،،، يمكنني أن أ ضيف بعض selector التي يمكنك استعمالها في المكتبة الغير مذكورة في مقال css :

li:has(a)

يتم تحديد كل قائمة li بداخلها رابط a ،بحيث يكون المحدد هو Li و ليس a ،وهنا ملاحظة ، فهذا الأمر هو بعكس الأمر التالي : li a ، حيث يتم تحديد كل a داخل li، لذا فالفرق بين الأمرين واضح

• :animated

  حيث يتم تحديد العناصر المتحركة بالحدث animate()

• :button

  تجمع لي جميع عناصر الـ input التالية : ( input[type=submit] , input[type=reset] , input[type=button] , button )

• :checkbox

  و التي عوضت (input[type=checkbox])

• :contains(fez-soft)

  كل عنصر يحتوي على كلمة fez-soft

• :disabled
  :enabled

  يتم تحديد العناصر المفعلة أو الغير مفعلة

• :file

  و التي عوضت الأمر التالي : (input[type=file])

• :header

  تحديد كل العناوين من h1 إلى h6

• :hidden

  تحديد كل العناصر المخفية

• :image

  عوضت التالي : (input[type=image])

• :input

  لكل انواع input

• :not(filter)

  لاختيار العكس ، مثلا لاختيار كل العناصر في input ، باستثناء checkbox يمكنني كتابة :

  input:not(:checkbox)

  نستعملها في تصفية selector و ليس في البحث عنه ، مثال خاطئ :

  :not(p:hidden)

  لأنني حاولت البحث عن عنصر p و ليس تصفيته ، و هنا الكتابة الصحيحة له :

  div p:not(:hidden)

  حيث قمت بتصفية hidden فقط

• :password 
  :radio
  :reset 
  :submit
  :text

  عوضت على التوالي :

  (input[type=radio])
  input[type=reset] , button[type=reset])
  input[type=submit] , button[type=submit]
  input[type=text]

كذلك :

• :selected // لتحديد العناصر التي تم اختيارها في قائمة select
  :visible  // العناصر الغير مخفية

لا انسى ان أنبه انه يمكنني أن اجمع بين اكثر من selector في سطر واحد مع احترام القواعد ، مثال :

:checkbox:checked:enabled

حيث تم تحديد عناصر checkbox المختاره و المفعلة ،

أخيرا ، لم كل هذا ؟؟ و لم كل هذه الاختيارات ، وفي ماذا سأحتاجها ؟؟ ببساطة أخي ، لتطبق عليك حدث معين لتلبية غرضك أو فكرتك في تطبيقك

آمل أن تكون قد استفدت مما قدمته اليوم ، و اعتذر عن قلة الكتابة في الآونة الأخيرة لظروف و السلام عليكم ورحمة الله

الوسوم: jquery, selector, قواعد

هذه التدوينة نُشرت في الأربعاء, 20 يناير, 2010 عند 1:00 م و مصنفة تحت تصنيف JavaScript, Jquery. يمكنك متابعة أي تعليقات عبر رابط RSS 2.0. يمكنك ترك تعليق, أو تعقيب من مدونتك.