jQuery Selectors

انتخاب کننده‌ها

انتخاب کننده‌های jQuery یکی از مهم‌ترین بخش‌های کتابخانه jQuery است. انتخاب کننده‌های jQuery به شما این امکان را می‌دهند که عناصر HTML را انتخاب و دستکاری کنید.

انتخاب کننده‌های jQuery برای پیدا کردن (انتخاب) عناصر HTML بر اساس اسم، آیدی، کلاس، نوع، ویژگی، مقادیر ویژگی و ... به کار می‌روند. این عمل برپایه انتخاب کننده‌های CSS موجود است و اضافه بر آن jQuery یک سری انتخاب کننده‌های مخصوص به خود را نیز دارد.

تمامی انتخاب کننده‌ها در jQuery با علامت دلار و پرانتز باز و بسته شروع می‌شوند؛ $().

انتخاب کننده عنصر

انتخاب کننده عنصر jQuery عناصر را بر اساس اسم آن‌ها انتخاب می‌کند. برای مثال می‌توانید تمامی عناصر <p> را به شکل زیر انتخاب کنید.


          $("p")

در مثال زیر با کلیک کردن کاربر روی یک دکمه، تمامی عناصر <p> مخفی می‌شوند.

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

    <h2>This is a heading</h2>

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <button>Click me to hide paragraphs</button>

  </body>
</html>

خروجی:

This is a heading

This is a paragraph.

This is another paragraph.

انتخاب کننده id#

انتخاب کننده آیدی jQuery از ویژگی آیدی برچسب HTML برای پیدا کردن عنصر استفاده می‌کند.

آیدی داخل یک صفحه باید یکتا باشد. بنابراین زمانی از انتخاب کننده آیدی استفاده می‌کنید که به دنبال پیدا کردن تنها یک عنصر یکتا باشید. برای پیدا کردن یک عنصر بر اساس آیدی به صورت زیر عمل کنید:


          $("#test")

در مثال زیر بعد از کلیک کردن بر روی یک دکمه، عنصر با "id="test مخفی می‌شود.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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>

خروجی:

This is a heading

This is a paragraph.

This is another paragraph.

انتخاب کننده class.

انتخاب کننده کلاس jQuery عناصر با کلاس مشخص را انتخاب می‌کند. برای انتخاب عناصر بر اساس کلاس به شکل زیر عمل کنید:


          $(".test")

در مثال زیر با کلیک بر روی یک دکمه، عناصر با "class="test مخفی می‌شوند.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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 is a heading

This is a paragraph.

This is another paragraph.

نمونه‌های بیشتری از انتخاب کننده‌های jQuery

syntax	توضیح
("*")$	انتخاب همه عناصر
(this)$	انتخاب عنصر جاری
("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> فرد

<< مبحث قبلی مبحث بعدی >>