لوگو دویکس
ورود / ثبت نام
Selectorها-در-جی-کوئری

Selectorها در جی کوئری – jQuery Selectors

دسته بندی : آموزش jQuery سطح مقاله : مقدماتی زمان مطالعه : 5 دقیقه آخرین بروز رسانی: 29 مرداد 1399

Selectorها در جی کوئری کار را برای ما بسیار ساده کرده اند ، کتابخانه جی کوئری از قدرت انتخاب گزینه های Cascading Style Sheets (CSS) استفاده می کند تا به ما اجازه دهد به سرعت و به راحتی به عناصر یا گروه هایی از عناصر موجود در Document Object Model (DOM) دسترسی داشته باشیم.

انتخاب کننده جی کوئری تابعی است که باعث می شود از اصطلاحات برای پیدا کردن عناصر منطبق از DOM بر اساس معیارهای داده شده استفاده کنید.

به سادگی می توانید بگویید ، از انتخابگرها برای انتخاب یک یا چند عنصر HTML با استفاده از جی کوئری استفاده می شود.

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

نماد انتخاب کننده ()$

انتخاب کنندگان جی کوئری با نشان دلار و پرانتز ()$ شروع می شوند. عملکرد این انتخابگر ()$ در هنگام انتخاب عناصر در یک سند معین از سه بلوک ساختمان زیر استفاده می کند .

  • انتخاب نام تگ ها – Tag Name
  • انتخاب یک آی دی – Tag ID
  • انتخاب کلاس – Tag Class

انتخاب نام تگ ها – Tag Name

یک نام برچسب موجود در DOM را نشان می دهد. به عنوان مثال (‘p’)$ تمام پاراگراف P
موجود در سند را انتخاب می کند.

در این حالت می توانید عملیات یک پارچه بر روی تمامی تگ های P و یا تگ دلخواه خودتان پیاده سازی کنید.

انتخاب یک آی دی – Tag ID

نشان برچسب موجود با شناسه داده شده را در DOM نشان می دهد. به عنوان مثال $ (‘# tagid’) دسترسی و انتخاب را برای تگی که این id منحصر به فرد را به خود اختصاص می دهد رانشان می دهد.

در این حالت شما می توانید به اجزای این id دسترسی داشته باشید و عملیات مورد نظر را انجام دهید.

انتخاب کلاس – Tag Class

یک برچسب موجود با کلاس داده شده در DOM را نشان می دهد. به عنوان مثال (“. tagclass”)$ تمام عناصر موجود در سندی را که کلاس بعضی از کلاس ها را دارند انتخاب می کند.

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

کلیه موارد فوق می تواند به صورت خود به خود یا در ترکیب با سایر انتخاب کنندگان مورد استفاده قرار گیرد. همه انتخاب کننده های جی کوئری بر اساس همان اصل به جز برخی از ترفندها تنظیم می شوند.

توجه : عملکرد انتخاب گر ()$ مترادف تابع () jQuery  است.

بنابراین در صورت استفاده از کتابخانه جاوا اسکریپت دیگر که در آن نشانه $ با چیز دیگری در تضاد است ، می توانید علامت $ را با نام jQuery جایگزین کنید و می توانید به جای ()$ از تابع () jQuery استفاده کنید.

مثال Selectorها در جی کوئری

در زیر مثال ساده ای وجود دارد که از Tag Selector استفاده می کند.

با این کار همه عناصر با یک نام برچسب p انتخاب می شوند.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

این نتیجه زیر را خواهد داد

This is a paragraph.

This is second paragraph.

This is third paragraph.

چگونه می توان از Selectorها در جی کوئری استفاده کرد؟

Selectorها بسیار مفید هستند و در هر مرحله هنگام استفاده از جی کوئری مورد نیاز خواهند بود. آنها عنصر دقیقی را که می خواهید از سند HTML شما دریافت می کنند.

در جدول زیر چند انتخابگر اصلی لیست شده است و آنها را با مثال توضیح می دهد.

Sr.No. Selector & Description
1 Name

تمام عناصر مطابق با عنصر داده شده را انتخاب می کند Name.
2 #ID

یک عنصر واحد را انتخاب می کند که با داده مطابقت دارد ID.
3 .Class

تمام عناصر مطابق با داده را انتخاب می کند Class.
4 Universal (*)

تمام عناصر مطابق با داده را انتخاب می کند
5 Multiple Elements E, F, G

نتایج ترکیبی از همه انتخاب کنندگان مشخص شده را انتخاب می کند E, F or G.

نمونه های انتخاب کننده

مثالهای زیر ، شما را در مورد استفاده از انواع مختلف دیگر انتخاب کننده های مفید درک می کند.

که دارای یک مقدار شاخص عجیب هستند را انتخاب می کند.

Sr.No.Selector & Description
1

$(‘*’)

این انتخاب کننده تمام عناصر موجود در سند را انتخاب می کند.

2

$(“p > *”)

این انتخاب کننده تمام عناصری را که فرزندان یک عنصر پاراگراف هستند انتخاب می کند.

3

$(“#specialID”)

این عملکرد انتخاب کننده عنصر را به دست می آورد id=”specialID”.

4

$(“.specialClass”)

این انتخاب کننده تمام عناصری را که دارای کلاس می باشد دریافت می کند specialClass

5

$(“li:not(.myclass)”)

همه عناصر همسان با را انتخاب می کند <li> که ندارد class = “myclass”.

6

$(“a#specialID.specialClass”)

این انتخاب با پیوندها با شناسه مطابقت دارد specialID و یک class of specialClass.

7

$(“p a.specialClass”)

این انتخاب پیوندها را با یک کلاس از مطابقت دارد specialClass declared within <p> elements.

8

$(“ul li:first”)

این انتخاب کننده تنها نفر اول را کسب می کند <li> element of the <ul>.

9

$(“#container p”)

همه عناصر همسان با را انتخاب می کند <p> که فرزندان هستند an عنصری که شناسه آن را دارد container.

10

$(“li > ul”)

همه عناصر همسان با را انتخاب می کند <ul> که فرزندان هستند an عنصر مطابقت با <li>

11

$(“strong + em”)

همه عناصر همسان با را انتخاب می کند <em> that immediately یک عنصر خواهر و برادر را دنبال کنید <strong>.

12

$(“p ~ ul”)

همه عناصر همسان با را انتخاب می کند <ul> که خواهر و برادر را دنبال می کنند عنصر مطابقت با <p>.

13

$(“code, em, strong”)

همه عناصر همسان با را انتخاب می کند <code> یا <em> یا <strong>.

14

$(“p strong, .myclass”)

همه عناصر همسان با را انتخاب می کند <strong> که هستند فرزندان یک عنصر همسان با <p> و همچنین تمام عناصری که یک کلاس از myclass.

15

$(“:empty”)

تمام عناصری را که فرزندی ندارند انتخاب می کند.

16

$(“p:empty”)

همه عناصر همسان با را انتخاب می کند <p> که فرزندی ندارند.

17

$(“div[p]”)

همه عناصر همسان با را انتخاب می کند <div> که شامل یک عنصر مطابقت دارد by <p>.

18

$(“p[.myclass]”)

همه عناصر همسان با را انتخاب می کند <p> که حاوی یک عنصر است با یک کلاس myclass.

19

$(“a[@rel]”)

تمام عناصر مطابق با که دارای یک ویژگی rel هستند را انتخاب می کند.

20

$(“input[@name = myname]”)

تمام عناصر مطابق با را انتخاب می کند که دارای یک مقدار نام دقیقا برابر با myname هستند.

21

$(“input[@name^=myname]”)

تمام عناصر مطابق با را انتخاب می کند که دارای یک ارزش نام با نام myname هستند.

22

$(“a[@rel$=self]”)

تمام عناصر مطابق با را انتخاب می کند که دارای ارزش صفت rel هستند که به خود ختم می شوند.

23

$(“a[@href*=domain.com]”)

همه عناصر مطابق با که دارای مقدار href هستند حاوی domain.com را انتخاب می کند.

24

$(“li:even”)

همه عناصر مطابق با

  • را انتخاب می کند که دارای یک مقدار شاخص هستند.

    • 25

    $(“tr:odd”)

    تمام عناصر مطابق با

    26

    $(“li:first”)

    اولین عنصر

  • را انتخاب می کند.

    • 27

    $(“li:last”)

    آخرین عنصر

  • را انتخاب می کند.

    • 28

    $(“li:visible”)

    تمام عناصر همسان با

  • قابل مشاهده را انتخاب می کند.

    • 29

    $(“li:hidden”)

    همه عناصر مطابق با

  • پنهان را انتخاب می کند.

    • 30

    $(“:radio”)

    تمام دکمه های رادیویی را در فرم انتخاب می کند.

    31

    $(“:checked”)

    تمام دکمه های رادیویی را در فرم انتخاب می کند.

    32

    $(“:input”)

    فقط عناصر فرم را انتخاب می کند (input, select, textarea, button).

    33

    $(“:text”)

    فقط عناصر فرم را انتخاب می کند (input[type = text]).

    34

    $(“li:eq(2)”)

    عنصر

  • سوم را انتخاب می کند.

    • 35

    $(“li:eq(4)”)

    عنصر پنجم

  • را انتخاب می کند.

    • 36

    $(“li:lt(2)”)

    تمام عناصر مطابق با عنصر

  • را قبل از عنصر سوم انتخاب می کند؛ به عبارت دیگر ، دو عنصر
  • اول.

    • 37

    $(“p:lt(3)”)

    تمام عناصر مطابق با عناصر

    را قبل از عنصر چهارم انتخاب می کند. به عبارت دیگر سه عنصر

    اول.

    38

    $(“li:gt(1)”)

    همه عناصر مطابق با

  • را پس از مورد دوم انتخاب می کند.

    • 39

    $(“p:gt(2)”)

    همه عناصر مطابق با

    را بعد از عنصر سوم انتخاب می کند.

    40

    $(“div/p”)

    همه عناصر مطابق با

    که فرزندان یک عنصر هستند که با

    مطابقت دارد را انتخاب می کند.

    41

    $(“div//code”)

    همه عناصر مطابق با را که فرزندان عنصری هستند که با

    مطابقت دارند ، انتخاب می کند.

    42

    $(“//p//a”)

    همه عناصر مطابق با که فرزندان یک عنصر هستند که با

    مطابقت دارد را انتخاب می کند

    43

    $(“li:first-child”)

    تمام عناصر همسان با

  • را که فرزند اول والدینشان است انتخاب می کند.

    • 44

    $(“li:last-child”)

    تمام عناصر همسان با

  • که آخرین فرزند پدر و مادر خود هستند را انتخاب می کند.

    • 45

    $(“:parent”)

    همه عناصر والد یک عنصر دیگر از جمله متن را انتخاب می کند.

    46

    $(“li:contains(second)”)

    همه عناصر مطابق با

  • را که حاوی متن دوم است انتخاب می کند.

    • با استفاده از هر عنصر HTML / XML می توانید از کلیه انتخاب کننده های فوق استفاده کنید.

    به عنوان مثال اگر انتخاب کننده $ (“li: first”) برای عنصر <li> کار کند ، سپس $ (“p: first”) برای عنصر <p> نیز کار می کند.

    برای مشاهده لیست کامل تگ های HTML این مقاله را بخوانید.

    سخن پایانی

    Selectorها در جی کوئری در عین سادگی می توانند دنیای متفاوتی را برای توسعه دهندگان رقم بزنند و کار برد بسیار فراوانی دارند.

    این مقاله چقدر براتون مفید بود؟

    میانگین رتبه : 5/5 - تعداد رای : 1