انتخاب گر های جی کوئری

انتخاب گر های جی کوئری

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

سینتکس یا Syntax جی کوئری

با جی کوئری، شما عناصر (HTML (query را انتخاب می کنید و “اقدامات” یا اکشن ها، action، را بر روی آنها انجام می دهید.

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

سینتکس اصلی یا پایه ای به این صورت است:

علامت $ برای تعریف / دسترسی به جی کوئری

سلکتور یا انتخاب گر A برای درخواست یا یافتن عناصر HTML

عمل() جی کوئری که بر روی عنصر (ها) انجام می شود

مثال ها:

عنصر جاری را پنهان می کند.

تمام عناصر <p> را پنهان می کند.

تمام عناصر با کلاس “test” را پنهان می کند.

عنصر با آی دی “test” را پنهان می کند.

آیا با انتخابگرهای CSS آشنا هستید؟

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

نکته: اگر CSS را نمی دانید، می توانید CSS Tutorial را بخوانید.

رویداد

ممکن است متوجه شده باشید که تمام روش های جی کوئری در مثال ها، در یک رویداد Document Ready یا سند آماده آورده شده اند:

این کار برای جلوگیری از اجرای کد های جی کوئری قبل از بارگذاری کامل سند (یا در اصطلاح، آماده شدن سند) است.

تمرین خوبی خواهد بود که قبل از کار با سند صبر کنید تا کاملا لود و آماده شود. این کار همچنین به شما اجازه می دهد تا کد جاوا اسکریپت را قبل از بدنه یا body سند و در بخش head قرار دهید.

در اینجا چند نمونه از اقداماتی آورده شده است که اگر قبل از اینکه سند به طور کامل بارگذاری شود، اجرا شوند، موفقیت آمیز نخواهند بود:

تلاش برای پنهان کردن یک عنصری که هنوز ایجاد نشده است

تلاش برای گرفتن سایز یک تصویری که هنوز بارگذاری نشده است

نکته: تیم جی کوئری یک روش بسیار کوتاه تر برای رویداد آماده سازی سند ایجاد کرده است:

پیشنهاد می شود از سینتکسی که ترجیح می دهید استفاده کنی؛ به هر حال به نظر می رسد که رویداد آماده سازی سند، در هنگام خواندن یک کد، ساده تر و قابل فهم تر است.

انتخاب گر های جی کوئری

انتخاب گر های جی کوئری برای پیدا کردن (یا انتخاب) عناصر HTML بر اساس نام، شناسه یا ID، کلاس، نوع، ویژگی ها یا attributes، مقادیر ویژگی ها و خیلی موارد دیگر، استفاده می شود. این بر اساس موجود کننده CSS موجود است و علاوه بر این، برخی از انتخاب های سفارشی خود را دارد.

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

انتخاب گر عنصر در انتخاب گر های جی کوئری

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

می توان تمام عناصر <p> را در یک صفحه مانند زیر انتخاب کنید:

$("p")

مثال

هنگامی که یک کاربر بر روی دکمه ای کلیک کند همه عناصر <p> پنهان خواهند شد:

Example

انتخاب گر های جی کوئری و انتخاب گر id#

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

شناسه باید در یک صفحه، منحصر به فرد باشد، بنابراین شما باید از انتخابگر #id وقتی که می خواهید یک عنصر منحصر به فرد را پیدا کنید، استفاده کنید.

برای پیدا کردن یک عنصر با شناسه خاص، یک کاراکتر “هاش” یا # بنویسید و بعد از آن، شناسه عنصر HTML را بیاورید:

$("#test")

مثال

هنگامی که یک کاربر بر روی یک دکمه کلیک می کند، عنصر با آی دی “test” پنهان خواهد شد:

Example

انتخاب گر های جی کوئری و انتخاب گر کلاس .class

انتخابگر کلاس .class در جی کوئری، عناصر با یک کلاس خاص را پیدا می کند.

برای پیدا کردن عناصر با یک کلاس خاص، یک کاراکتر نقطه بنویسید و سپس نام کلاس را در ادامه اش بیاورید:

$(".test")

مثال

هنگامی که یک کاربر بر روی یک دکمه کلیک کند، عناصر با کلاس “test” پنهان خواهند شد:

Example

مثال های بیشتر از انتخاب گر های جی کوئری

Syntax	Description
(“*”)$	تمام عناصر را انتخاب می کند
(this)$	عنصر HTML جاری را انتخاب می کند
(“p.intro”)$	تمام عناصر <p> با کلاس “intro” را انتخاب می کند.
(“p:first”)$	اولین عنصر <p> را انتخاب می کند
(“ul li:first”)$	اولین عنصر <li> از اولین <ul> را انتخاب می کند
(“ul li:first-child”)$	اولین عنصر <li> از هر <ul> را انتخاب می کند
(“[href]”)$	تمام عناصر با ویژگی href انتخاب می کند
(“[‘a[target=’_blank”)$	تمام عناصر <a> با مقدار attribute برابر با “blank_” را انتخاب می کند
(“[‘a[target!=’_blank”)$	تمام عناصر <a> با مقدار مشخصه غیر برابر با blank_ را انتخاب می کند
(“:button”)$	تمام عناصر <button> و عناصر <input> از نوع “”button را انتخاب می کند
(“tr:even”)$	تمام عناصر زوج <tr> را انتخاب می کند
(“tr:odd”)$	تمام عناصر فرد <tr> را انتخاب می کند

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

برای دیدن یک مرجع کامل از تمام انتخاب گر های جی کوئری، لطفا به مرجع انتخاب گر های جی کوئری بروید.

توابع در یک فایل جداگانه

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

هنگامی که جی کوئری را نشان می دهیم، توابع به طور مستقیم به بخش <head> اضافه می شوند. با این حال، گاهی اوقات بهتر است آنها را در یک فایل جداگانه مانند این قرار دهید (از ویژگی src برای اشاره یا ارجاع به فایل js. استفاده کنید):

Example