سلکتور های جی کوئری برای انتخاب و دستکاری عناصر HTML استفاده می شوند. آن ها بخش مهمی از کتابخانه جی کوئری هستند.
با انتخابگرهای جی کوئری، می توانید عناصر HTML را بر اساس شناسه، کلاس ها، ویژگی ها، انواع و خیلی موارد دیگر، از یک DOM پیدا یا انتخاب کنید.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
به عبارت ساده می توان گفت که انتخابگرها برای انتخاب یک یا چند عنصر HTML با استفاده از جی کوئری مورد استفاده قرار می گیرند و هنگامی که عنصر انتخاب می شوند، شما می توانید عملیات مختلف را در آن انجام دهید.
همه انتخابگرهای جی کوئری با یک علامت دلار و پرانتز شروع می شود، به عنوان مثال ()$.
هر سلکتور جی کوئری با () $ شروع می شود و در اصطلاح به عنوان فانکشن کارخانه شناخته می شود. این سلکتور ها از سه جزء تشکیل دهنده استفاده می کنند اما در حقیقت، یک عنصر در یک سند مشخص را انتخاب می کنند.
آموزش پیشنهادی برای شما : آموزش جی کوئری (jquery) از مقدماتی تا پیشرفته
| S.No. | سلکتور | شرح |
| ۱) | Tag Name: |
نشان دهنده تگ نام موجود در DOM است. به عنوان مثال: $ (‘p’) همه پاراگراف ها را در سند انتخاب می کند. |
| ۲) | Tag ID: |
یک تگ موجود در یک شناسه یا ID خاص در DOM را نشان می دهد. به عنوان مثال: $ (‘# real-id’) عنصر خاصی را در سند انتخاب می کند که یک شناسه واقعی دارد. |
| ۳) | Tag Class: | یک تگ موجود در کلاس خاص در DOM را نشان می دهد.
به عنوان مثال: (‘real-class’) $ همه عناصر در سند را انتخاب می کند که کلاس آن ها کلاس واقعی است. |
بیایید یک نمونه ساده برای دیدن استفاده از سلکتور Tag بررسی کنیم. در این مثال، همه عناصر با تگ نام
و رنگ پس زمینه به رنگ “صورتی” انتخاب می شوند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
File: firstjquery.html <!DOCTYPE html> <html> <head> <title>First jQuery Example</title> <script type="text/javascript" src="http://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", "pink"); }); </script> </head> <body> <p>This is first paragraph.</p> <p>This is second paragraph.</p> <p>This is third paragraph.</p> </body> </html> |
نکته ۱: همه انتخابگرهای مورد بحث را می توان به تنهایی و یا با ترکیبی از انتخاب گر های دیگر استفاده کرد.
نکته ۲: اگر شما در هر کتابخانه ی جاوا اسکریپت با استفاده از علامت $ مشکلی دارید، می توانید از تابع jQuery () به جای $ () استفاده کنید. کارکرد $ () و تابع jQuery یکسان است.
چگونگی استفاده از سلکتور ها
انتخابگرهای جی کوئری را می توان تنها یا در ترکیبی از انتخابگرهای دیگر استفاده کرد. آنها در هر مرحله در هنگام استفاده از jQuery مورد نیاز هستند. آنها برای انتخاب عنصر دقیق که از سند HTML می خواهید استفاده می شود.
| S.No. | سلکتور | شرح |
| ۱) | Name: | این سلکتور عناصری را که با نام عنصر داده شده مطابقت می کند انتخاب می کند |
| ۲) | #ID: | این سلکتور عنصری را انتخاب می کند که با شناسه داده شده مطابقت دارد |
| ۳) | .Class: | تمام عناصر را که مطابق با کلاس داده شده است انتخاب می کند |
| ۴) | Universal(*) | تمام عناصر موجود در DOM را انتخاب می کند |
| ۵) | Multiple Elements A,B,C | نتایج ترکیبی از انتخابگرهای A، B و C را انتخاب می کند |
سلکتور های مختلف JQuery
| سلکتور | مثال | شرح |
| * | (“*”)$ | این سلکتور برای انتخاب همه عناصر استفاده می شود. |
| id# | (“#firstname”)$ | عنصر با id = “firstname” را انتخاب می کند |
| class. | (“.primary”)$ | این سلکتور همه عناصر با کلاس = “primary” را انتخاب می کند |
| class,.class | (“.primary,.secondary”)$ | تمام عناصر با کلاس primary اولیه secondary یا ثانویه را انتخاب می کند |
| element | (“p”)$ | تمام عناصر p را انتخاب خواهد کرد. |
| el1,el2,el3 | (“h1,div,p”)$ | این سلکتور همه عناصر h1، div، و p را انتخاب می کند. |
| first: | (“p:first”)$ | اولین عنصر p را انتخاب می کند |
| last: | (“p:last”)$ | آخرین عنصر p را انتخاب می کند |
| even: | (“tr:even”)$ | همه عناصر زوج را انتخاب می کند |
| odd: | (“tr:odd”)$ | همه عناصر فرد را انتخاب می کند |
| first-child: | (“p:first-child”)$ | همه عناصر p را که اصطلاحا فرزند اول هستند انتخاب می کند |
| first-of-type: | (“p:first-of-type”)$ | همه عناصر p را که اولین عنصر p از نوع خود آنها است، انتخاب خواهد کرد |
| last-child: | (“p:last-child”)$ | همه عناصر p را که در اصطلاح آخرین فرزند هستند انتخاب می کند |
| last-of-type: | (“p:last-of-type”)$ | همه عناصر p را که آخرین عنصر p از نوع خود آنها است انتخاب می کند |
| (nth-child(n: | (“p:nth-child(2)”)$ | همه عناصر p را که فرزند دوم است انتخاب می کند |
| (nth-last-child(n: | (“p:nth-last-child(2)”)$ | این سلکتور همه عناصر p را که فرزند دوم است که از آخرین فرزند شروع به شمارش می کند |
| (nth-of-type(n: | (“p:nth-of-type(2)”)$ | همه عناصر p را که از نوع دوم هستند انتخاب می کند |
| (nth-last-of-type(n: | (“p:nth-last-of-type(2)”)$ | همه عناصر p را که از آخرین نوع است را انتخاب می کند |
| only-child: | (“p:only-child”)$ | همه عناصر p را که تنها فرزند هستند انتخاب می کنند |
| only-of-type: | (“p:only-of-type”)$ | این سلکتور همه عناصر p را که تنها از این نوع هستند، انتخاب می کند |
| parent > child | (“div > p”)$ | همه عناصر p را که فرزند مستقیم یک عنصر div هستند انتخاب می کند |
| parent descendant | (“div p”)$ | همه عناصر p را که نسل یک عنصر div هستند انتخاب می کند |
| element + next | (“div + p”)$ | این سلکتور عنصر p را که در کنار هر عنصر div هستند انتخاب می کند |
| element ~ siblings | (“div ~ p”)$ | همه عناصر p را انتخاب می کند که در اصطلاح، خواهر و برادر یک عنصر div هستند |
| (eq(index: | (“ul li:eq(3)”)$ | عنصر چهارم را در یک لیست انتخاب می کند (شاخص از ۰ شروع می شود) |
| (gt(no: | (“ul li:gt(3)”)$ | عناصر لیست را با شاخص بیش از ۳ انتخاب می کند |
| (lt(no: | (“ul li:lt(3)”) | عناصر لیست با شاخص کمتر از ۳ را انتخاب می کند |
| :not(selector) | (“input:not(:empty)”)$ | تمام عناصر ورودی که خالی نیست را انتخاب می کند |
| :header | (“:header”)$ | این سلکتور تمام عناصر هدر را انتخاب کنید h1، h2 … |
| :animated | (“:animated”)$ | تمام عناصر متحرک را انتخاب می کند |
| :focus | (“:focus”)$ | عنصر در اصطلاح دارای تمرکز یا focus را انتخاب می کند |
| (contains(text: | (“:contains(‘Hello’)”)$ | تمام عناصر را که حاوی متن “Hello” هستند را انتخاب می کند |
| (has(selector: | (“div:has(p)”)$ | تمام عناصر div که عنصر p دارند را انتخاب می کند |
| empty: | (“:empty”)$ | تمام عناصر خالی را انتخاب می کند |
| parent: | (“:parent”)$ | همه عناصری را که پدر و مادر عناصر دیگر هستند را انتخاب می کند |
| hidden: | (“p:hidden”)$ | تمام عناصر P پنهان را انتخاب می کند |
| visible: | (“table:visible”)$ | این سلکتور تمام جداول قابل مشاهده را انتخاب می کند |
| root: | (“:root”)$ | این سلکتور عنصر ریشه سند را انتخاب می کند |
| (lang(language: | (“p:lang(de)”)$ | تمام عناصر p را که مقدار attribute lang دارند و با “de” شروع می شوند را انتخاب می کند |
| [attribute] | (“[href]”)$ | تمام عناصر با ویژگی href را انتخاب می کند |
| [attribute=value] | (“[href=’default.htm’]”)$ | این سلکتور تمام عناصر با مقدار ویژگی href برابر با “default.htm” را انتخاب می کن. |
| [attribute!=value] | (“[href!=’default.htm’]”)$ | این تمام عناصر با مقدار ویژگی href برابر با “default.htm” را انتخاب می کند |
| [attribute$=value] | (“[href$=’.jpg’]”)$ | تمام عناصر با مقدار ویژگی href که با “.jpg” پایان می یابد، انتخاب می کند. |
| [attribute|=value] | (“[title|=’Tomorrow’]”)$ | تمام عناصر با مقدار صفت عنوان برابر با «فردا»را انتخاب می کند |
| [attribute^=value] | (“[title^=’Tom’]”)$ | تمام عناصر که با صفت عنوان Tom” “شروع می شوند را انتخاب می کند |
| [attribute~=value] | (“[title~=’hello’]”)$ | همه عناصر را که صفت عنوان آن ها شامل کلمه خاص “hello” می شود را انتخاب می کند |
| [attribute*=value] | (“[title*=’hello’]”)$ | همه عناصر را که صفت عنوان آن ها شامل کلمه “hello” می شود را انتخاب می کند |
| input: | (“:input”)$ | تمام عناصر ورودی را انتخاب می کند |
| text: | (“:text”)$ | همه عناصر ورودی با نوع = “text” را انتخاب می کند |
| password: | (“:password”)$ | تمام عناصر ورودی با نوع = “password” را انتخاب می کند |
| radio: | (“:radio”)$ | همه عناصر ورودی با نوع = “radio” را انتخاب می کند |
| checkbox: | (“:checkbox”)$ | همه عناصر ورودی را با نوع = “checkbox” را انتخاب می کند |
| submit: | (“:submit”)$ | تمام عناصر ورودی را با نوع = “submit”را انتخاب می کند |
| reset: | (“:reset”)$ | تمام عناصر ورودی از نوع = “reset” را انتخاب می کند |
| button: | (“:button”)$ | همه عناصر ورودی با نوع = ” button” را انتخاب می کند |
| image: | (“:image”)$ | همه عناصر ورودی با نوع = “image” را انتخاب می کند |
| file: | (“:file”)$ | تمام عناصر ورودی با نوع = “file”را انتخاب می کند |
| enabled: | (“:enabled”)$ | تمام عناصر ورودی فعال را انتخاب می کند |
| disabled: | (“:disabled”)$ | تمام عناصر ورودی غیر فعال را انتخاب می کند |
| selected: | (“:selected”)$ | تمام عناصر ورودی انتخاب شده را انتخاب می کند |
| checked: | (“:checked”)$ | تمام عناصر ورودی کنترل و چک شده را انتخاب می کند |
عالی هست مطالب من دنبال همچن چیزی بودم
ممنون عالب
فقط فایل pdf موجود نیست.