محددات jQuery
تعد محددات jQuery أحد أهم أجزاء مكتبة jQuery.
محددات jQuery
تسمح لك محددات jQuery بتحديد ومعالجة عنصر (عناصر) HTML.
تُستخدم محددات jQuery "لإيجاد" (أو تحديد) عناصر HTML بناءً على الاسم والمعرف والفئات والأنواع والسمات وقيم السمات وغير ذلك الكثير. يعتمد على محددات CSS الحالية ، بالإضافة إلى أنه يحتوي على بعض المحددات المخصصة.
تبدأ جميع المحددات في jQuery بعلامة الدولار والأقواس: $ ().
عنصر محدد
يحدد محدد عنصر jQuery العناصر بناءً على اسم العنصر.
يمكنك تحديد جميع <p>العناصر على صفحة مثل هذا:
$("p")
مثال
عندما ينقر المستخدم على زر ، <p>سيتم إخفاء جميع العناصر:
مثال
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
المحدد #id
يستخدم محدد jQuery سمة id لعلامة HTML للعثور على العنصر المحدد.#id
يجب أن يكون المعرف فريدًا داخل الصفحة ، لذا يجب عليك استخدام محدد #id عندما تريد البحث عن عنصر واحد فريد.
للعثور على عنصر بمعرف محدد ، اكتب حرف تجزئة متبوعًا بمعرف عنصر HTML:
$("#test")
مثال
عندما ينقر المستخدم على زر ، سيتم إخفاء العنصر ذي المعرف = "test":
مثال
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
محدد الفئة
يبحث مُحدِّد jQuery .classعن عناصر بفئة معينة.
للعثور على عناصر بفئة معينة ، اكتب حرف فترة ، متبوعًا باسم الفصل:
$(".test")
مثال
عندما ينقر المستخدم على زر ، فإن العناصر التي بها class = "test" ستكون مخفية:
مثال
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
المزيد من الأمثلة على محددات jQuery
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | |
| $(this) | Selects the current HTML element | |
| $("p.intro") | Selects all <p> elements with class="intro" | |
| $("p:first") | Selects the first <p> element | |
| $("ul li:first") | Selects the first <li> element of the first <ul> | |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | |
| $("[href]") | Selects all elements with an href attribute | |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | |
| $("tr:even") | Selects all even <tr> elements | |
| $("tr:odd") | Selects all odd <tr> elements |
استخدم أداة اختبار jQuery Selector الخاصة بنا لتوضيح المحددات المختلفة.
للحصول على مرجع كامل لجميع محددات jQuery ، يرجى الانتقال إلى مرجع محددات jQuery .
الوظائف في ملف منفصل
إذا كان موقع الويب الخاص بك يحتوي على الكثير من الصفحات ، وتريد أن تكون وظائف jQuery سهلة الصيانة ، فيمكنك وضع وظائف jQuery في ملف .js منفصل.
عندما نوضح jQuery في هذا البرنامج التعليمي ، تتم إضافة الوظائف مباشرة إلى <head>
القسم. ومع ذلك ، يُفضل أحيانًا وضعها في ملف منفصل ، مثل هذا (استخدم السمة src للإشارة إلى ملف .js):
مثال
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>