English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
تسمح محددات اختيار jQuery لك اختيار وتعامل عناصر HTML.
هذه الفقرة تحتوي على قائمة كاملة لمحددات الاختيار التي تنتمي إلى مكتبة jQuery JavaScript الأحدث.
جميع محددات الاختيار مقسومة إلى فئات.
| المحددات | مثال | شرح |
|---|---|---|
| * | $("*") | اختيار جميع العناصر (محدد العنصر العام) |
| #id | $("#demo") | اختيار العنصر الذي يحتوي على id=”demo” |
| .class | $(".demo") | اختيار جميع العناصر التي تحتوي على خاصية class=”demo” |
| عنصر | $("p") | اختيار جميع عناصر <p> |
| selector1, selector2 | $("p, div") | اختيار جميع عناصر <p> و جميع عناصر <div> |
| المحددات | مثال | شرح |
|---|---|---|
| ancestor descendant | $("div p") | اختيار جميع عناصر <p> التي تكون داخل عنصر <div> |
| parent > child | $("div > p") | اختيار جميع عناصر <p> التي تكون عنصر <div> هو أحد أبناءها |
| prev + next | $("div + p") | اختيار جميع عناصر <p> التي تلي عناصر <div> |
| prev ~ siblings | $("div ~ p") | اختيار جميع عناصر <p> التي تكون على نفس المستوى كعنصر <div> |
| المحددات | مثال | شرح |
|---|---|---|
| [attribute] | $("[target]") | اختيار جميع العناصر التي تحتوي على خاصية target |
| [attribute=value] | $("a[href='CSS3']") | اختيار جميع عناصر <a> التي تكون قيمة خاصيته href متساوية مع “CSS3” |
| [attribute!=value] | $("a[href!='CSS3']") | اختيار جميع عناصر <a> التي لا تكون قيمة خاصيته href متساوية مع “CSS3” |
| [attribute~=value] | $("[alt~=Parrot]") | اختيار جميع العناصر التي تحتوي على خاصية alt وتحتوي على كلمة “Parrot” |
| [attribute|=value] | $("[lang|=en]") | اختيار جميع العناصر التي تبدأ خاصيته lang بـ“en” |
| [attribute^=value] | $("a[href^=https]") | اختيار كل عنصر <a> الذي يبدأ قيمة خاصيته href بـ“https” |
| [attribute$=value] | $"a[href$='.org']") | اختيار كل عنصر <a> الذي ينتهي خاصية href بالقيمة ".org" |
| [attribute*=value] | $"a[href*=example]") | اختيار كل عنصر <a> الذي يحتوي على قيمة الخاصية href تحتوي على النص substring "example" |
| المحددات | مثال | شرح |
|---|---|---|
| :first | $"p:first") | اختيار العنصر الأول من <p> |
| :last | $"p:last") | اختيار العنصر الأخير من <p> |
| :even | $"tr:even") | اختيار جميع عناصر <tr> التي تحتوي على عدد التسلسل الآلي من البداية |
| :odd | $"tr:odd") | اختيار جميع عناصر <tr> التي تحتوي على عدد التسلسل الزوجي من البداية |
| :not() | $"p:not(.demo)") | اختيار جميع عناصر <p> باستثناء التي تحتوي على class="demo" |
| :eq() | $"tr:eq(2)") | اختيار الثالث <tr> من مجموعة التطابق من البداية |
| :lt() | $"tr:lt(5)") | اختيار جميع عناصر <tr> التي تحتوي على عدد التسلسل أقل من 5، من البداية |
| :gt() | $"tr:gt(5)") | اختيار جميع عناصر <tr> التي تحتوي على عدد التسلسل أكبر من 5، من البداية |
| :header | $":header") | اختيار جميع عناصر العناوين، مثل <h1>،<h2>،<h3>، إلخ |
| :lang() | $"div:lang(en)") | اختيار جميع عناصر <div> التي تحتوي على قيمة اللغة "en"، مثل lang="en"،lang="en-us"، إلخ |
| :root | $":root") | اختيار عنصر جذر المستند، والذي يكون دائمًا عنصر <html> في مستند HTML |
| :animated | $":animated") | اختيار جميع العناصر التي تحتوي على تأثير حركي عند تشغيلها |
| المحددات | مثال | شرح |
|---|---|---|
| :first-child | $("p:first-child") | اختيار جميع عناصر <p> التي تنتمي إلى أول الطفل في الصفحة الأب |
| :last-child | $("p:last-child") | اختيار جميع عناصر <p> التي تنتمي إلى آخر الطفل في الصفحة الأب |
| :only-child | $("p:only-child") | اختيار جميع عناصر <p> التي تنتمي إلى الطفل الوحيد للصفحة الأب |
| :first-of-type | $("p:first-of-type") | اختيار جميع عناصر <p> التي تنتمي إلى أول <p> في الصفحة الأب |
| :last-of-type | $("p:last-of-type") | اختيار جميع العناصر <p> التي تعتبر الأخيرة من بين أبناء عناصر الاب |
| :only-of-type | p:only-of-type | اختيار جميع العناصر <p> التي ليس لديها نفس النوع في نفس المستوى |
| :nth-child(n) | p:nth-child(3) | اختيار جميع العناصر <p> التي تعتبر الثالثة من بين أبناء أبناء الاب |
| :nth-last-child(n) | p:nth-last-child(4) | اختيار جميع العناصر <p> التي هي الرابعة من بين أبناء عناصر الاب، من آخر عنصر إلى الأول |
| :nth-of-type(n) | span:nth-of-type(3) | اختيار جميع العناصر <span> التي تعتبر الثالثة من نوعها في عناصر الاب |
| :nth-last-of-type(n) | span:nth-last-of-type(4) | اختيار جميع العناصر <span> التي تعتبر الرابعة من نوعها في عناصر الاب <span>، من آخر عنصر إلى الأول |
| المحددات | مثال | شرح |
|---|---|---|
| :contains() | p:contains('is') | اختيار جميع العناصر <p> التي تحتوي على النص "is" |
| :empty | :empty | اختيار جميع العناصر الفارغة، وهي العناصر التي ليس لديها عقدات فرعية (بما في ذلك النص) |
| :has() | p:has(span) | اختيار جميع العناصر <p> التي تحتوي على على الأقل عقدة <span> واحدة |
| :parent | :parent | اختيار جميع العناصر التي تحتوي على على الأقل عقدة فرعية واحدة (عنصر أو نص) |
| المحددات | مثال | شرح |
|---|---|---|
| :input | :input | اختيار جميع العناصر المدخلة، مناطق النص، الخيارات والنقرات |
| :text | :text | اختيار جميع العناصر المدخلة من النوع "text" |
| :password | :password | اختيار جميع العناصر المدخلة من النوع "password" |
| :radio | :radio | اختيار جميع العناصر المدخلة من النوع "radio" |
| :checkbox | :checkbox | اختيار جميع العناصر المدخلة من النوع "checkbox" |
| :button | :button | اختيار جميع العناصر المدخلة والمسافات النصية من النوع "button" |
| :submit | :submit | اختيار جميع العناصر المدخلة والمسافات النصية من النوع "submit" |
| :reset | :reset | اختيار جميع العناصر المدخلة من نوع "reset" والزر |
| :image | $(":image") | اختيار جميع العناصر المدخلة من نوع "image" |
| :file | $(":file") | اختيار جميع العناصر المدخلة من نوع type="file" |
| :enabled | $(":enabled") | اختيار جميع العناصر المفعلة |
| :disabled | $(":disabled") | اختيار جميع العناصر الممنوعة من الاستخدام |
| :selected | $(":selected") | اختيار جميع العناصر المحددة، ينطبق فقط على عناصر <option> |
| :checked | $(":checked") | اختيار جميع العناصر المحددة أو المحددة، ينطبق على مربعات الاختيار، أزرار الصندوق والعناصر |
| :focus | $(":focus") | اختيار العنصر الحالي في حالة التركيز |
| المحددات | مثال | شرح |
|---|---|---|
| :hidden | $("p:hidden") | اختيار جميع العناصر <p> المخفية |
| :visible | $("p:visible") | اختيار جميع العناصر <p> المرئية |