Loading...

5 - المحددات في jQuery

الرئيسية /  تعلم jQuery جي كيوري /  5 - المحددات في jQuery

تعتبر المحددات أهم جزء في مكتبة جي كيوري

من خلال محددات جي كيوري يمكنك تحديد عناصر HTML ومعالجتها

يتم تحديد عناصر HTML استنادا لأحد الأمور التالي :

  1. اسم العنصر (التاغ)
  2. معرف العنصر id
  3. فئة العنصر class
  4. نوع العنصر types
  5. سمات العنصر attributes
  6. قيمة العنصر value

وغيرها من الأمور سيتم التعرف عليها لاحقا

تبدأ جميع المحددات في جي كيوري بعلامة دولار وويوضع المحدد بين قوسين : $()

التحديد حسب العنصر

تقوم جي كيوري بتحديد العنصر بناء على اسم العنصر

فيمكنك تحديد جميع عناصر <p> في صفحة ما بهذا الشكل :

$("p")

مثال :

عندما يتم النقر على أحد الأزرار سيتم إخفاء عناصر <p>  والتي تشير إلى الفقرة النصية

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
</script>
</head>
<body>

<h2>هذا عنوان</h2>

<p>هذه فقرة.</p>
<p>هذه فقرة أخرى.</p>

<button>إضغط هنا لإخفاء الفقرات/button>

</body>
</html>

التحديد حسب المعرف #id

تقوم جي كيوري أيضا بتحديد العنصر بناء على معرف id لوسوم HTML

يجب ان يكون المعرف فريدا في الصفحة أي أن لا يكون هناك عدة وسوم تحمل نفس اسم المعرف, لذا يجب عليك استخدام معرف محدد للعثور على عنصر واحد فريد.

للعثور على عنصر واحد بالمعرف id نضيف علامة $ في أول سطر ونضع اسم المعرف مبدوء بـ # بين قوسين كالتالي :

$("#test")

مثال

عندما ينقر المستخدم على احد الأزرار في الصفحة سيختفي العنصر الذي يحمل المعرف id="test"

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

التحديد بحسب الفئة .class

تتيح لك jQuery العثور على عناصر بحسبب اسم الفئة التابعة لها

للعثور على عناصر ذات فئة معينة اكتب نقطة متبوعة باسم الفئة كالتالي :

$(".test")

مثال

عندما ينقر المستخدم على أحد الأزرار ستختفي العناصر التي تحمل نفس اسم الفئة class="test"

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".test").hide();
    });
});
</script>
</head>
<body>

<h2 class="test">This is a heading</h2>

<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

أمثلة عن المحددات في جي كيوري :

بناء الجملة الشرح
$("*") تحديد جميع العناصر
$(this) تحديد عنصر HTML الحالي
$("p.intro") تحديد جميع عناصر الوسم <p> التي تحوي الفئة class="intro"
$("p:first") تحديد أول وسم <p>
$("ul li:first") تحديد أول وسم <li> الموجود داخل الوسم <ul>
$("ul li:first-child") تحديد أول وسم  <li> داخل الوسم <ul>
$("[href]") تحديد جميع العناصر التي تحوي السمة href
$("a[target='_blank']") تحديد جميع عناصر الوسم <a> التي تحوي السمة target والتي قيمته "_blank"
$("a[target!='_blank']") تحديد جميع عناصر الوسم <a> التي تحوي السمة target ولا تساوي قيمته "_blank"
$(":button") تحديد جميع عناصر الوسم <button> و الوسم <input> الذي نوعه type="button"
$("tr:even") تحديد جميع عناصر الوسم  <tr> التي ترتيبها زوجي
$("tr:odd") تحديد جميع عناصر الوسم <tr> فردي