گزینشگرهای jQuery یکی از مهترین بخش های کتابخانه jQuery است.
گزینشگرهای jQuery یا (jQuery Selectors)
گزینشگرهای jQuery به شما این اجازه را می دهند تا عناصر HTML را انتخاب و دستکاری کنید.
با گزینشگرهای jQuery می توانید عناصر HTML را براساس شناسه، کلاس، نوع، نام خصوصیت، مقدار خصوصیت و ... پیدا کنید. این تکنیک براساس گزینشگرهای CSS است (CSS Selector) و علاوه بر این، jQuery تعدادی گزینشگر سفارشی نیز دارد.
تمام گزینشگرها در jQuery با علامت "$" آغاز و با پرانتز محصور می شوند: ()$
گزینشگر نام تگ
گزینشگر نام تگ، به شما اجازه می دهد تا عناصر را براساس نام تگ، انتخاب کنید.
می توانید تمام تگ های <p> را در صفحه مانند زیر انتخاب کنید:
مثال: در مثال زیر، زمانی که کاربر روی دکمه کلیک می کند، تمام عناصر <p> پنهان می شوند:
مثال (گزینشگرهای jQuery)
$("button").click(function(){
$("p").hide();
});
});
گزینشگر شناسه (id#)
گزینشگر شناسه، از مقدار خصوصیت id تگ HTML برای پیدا کردن عنصر استفاده می کند.
شناسه در یک صفحه، باید یکتا باشد، بنابراین زمانی که بخواهید به یک عنصر منحصر به فرد در صفحه دسترسی داشته باشید از این روش استفاده نمایید.
برای پیدا کردن یک عنصر با شناسه مشخص، از کاراکتر "#" همراه با شناسه مورد نظر استفاده نمایید:
مثال: در این مثال، زمانی که کاربر روی دکمه کلیک کند، عنصر با شناسه "test" پنهان می شود:
مثال (گزینشگرهای jQuery)
$("button").click(function(){
$("#test").hide();
});
});
گزینشگر نام کلاس (class.)
گزینشگر نام کلاس، عناصر با کلاس مشخص را پیدا می کند.
برای پیدا کردن عناصر با نام کلاس مشخص، از کاراکتر "." همراه با نام کلاس مورد نظر استفاده کنید:
مثال: در این مثال، زمانی که کاربر روی دکمه کلیک کند، عناصر با کلاس "test" پنهان می شود:
مثال (گزینشگرهای jQuery)
$("button").click(function(){
$(".test").hide();
});
});
مثال های بیشتر از گزینشگر های jQuery
| نحوه نوشتن | توضیحات | مثال |
|---|---|---|
| $("*") | تمام عناصر را انتخاب می کند. | مثال |
| $(this) | عنصر جاری را انتخاب می کند. | مثال |
| $("p.intro") | تمام عناصر <p> با کلاس "intro" را انتخاب می کند. | مثال |
| $("p:first") | اولین عنصر <p> را انتخاب می کند. | مثال |
| $("ul li:first") | اولین آیتم از اولین عنصر <ul> را انتخاب می کند. | مثال |
| $("ul li:first-child") | اولین آیتم از تمام عناصر <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> فرد را انتخاب می کند. | مثال |
توابع پرکاربرد در یک فایل مجزا
اگر وب سایت شما شامل تعداد زیادی صفحه است، و می خواهید توابع jQuery یکسانی را در آنها استفاده کنید، می توانید این توابع را در یک فایل مجزا با پسوند js. قرار دهید.
همانطور که در این آموزش دیده اید، توابع به طور مستقیم در قسمت <head> صفحه قرار داده شده اند. اما بعضی مواقع مانند بالا، ترجیح داده می شود که آنها را در یک فایل JavaScript جداگانه با پسوند js. ذخیره کنیم و مانند زیر، توسط تگ <script> به صفحه لینک کرد:
مثال (گزینشگرهای jQuery)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="/my_jquery_functions.js"></script>
</head>
من تازه شروع به آموزش جی کوئری کردم ولی هرچی سرچ کردم نتونستم متوجه بشم که علامت $ چی تلفظ میشه و دقیقا چه مواقعی کاربرد داره؟
[dir=#555]div.test p.sameclass:nth-child(2)
[/dir]
بجای عدد 2 می تونید هر عدد دلخواه دیگری را قرار دهید.
علامت $ در جی کوئری: این علامت بصورت "دالر" تلفظ می شود و دستوری است که به ما کمک می کند تا عناصر مختلف در یک صفحه را براساس نیازمان، گزینش یا انتخاب نماییم. همچنین توجه فرمایید که برای کوتاه شدن دستورات از $ که جایگزین دستور jquery است استفاده می کنیم. یعنی شما می توانید از دستور jquery بجای $ استفاده کنید.
همانطور که خودتون گفتید یک فایل جاوای جداگانه به مثالها لینک شده و با حذف آنها مثال به اصطلاح عقیم میشود و بیننده هم کدهای فایل را نمی بیند و حتما انتظار دارید که مراجعه کننده مثالها را درک کند. برای آموزش باید محتوای تمام کدها معلوم باشد.
با تشکر
حلا اگه بخواهیم با کلیک بر روی یکی از input ها مثلا input ریست یک اتفاق داشته باشیم چطوری میشه
ممکنه یه مثال براش بزنید
گزینشگرها فقط برای اتفاق ها بود برای رویداد ها صدق نمیکنه
منظورتون رو واضح نرسوندید
این ها برای رویداد هستش خب
یعنی مثلا وقتی رویداد کلیک اتفاق بیوفته یه عنصری پنهان میشه
لطفا دقیق تر بفرمائید تا بتونم دقیق کمکتون کنم
با تشکر از شما
توجه نمیخوام روی button کلیک کنم میخوام روی کلیک کنم که یک input هست
سؤالتون واضح نیست. وقتی روی دکمه reset کلیک کنید، فرم پاک میشه و نیاز به کار اضافه‌ای هم نیست. type اون رو از نوع reset بذارید.
کد زیر رو نگاه کنید:
[dir=#555]<input type="reset" name="reset" value="Reset Form" />[/dir]
تو خط دوم اسکریپت جیکوئری نوشته علامت : رو پشت button جا انداختید و بخاطر همین برای inputهای از نوع button کار نمیکنه
لطف کنید لینک خودتان امتحان کنید رو ذکر کنید تا اصلاح شود.
ممنون از آموزش هاتون
[dir=#555]$(":button")[/dir]
من متوجه نمیشم این قسمت کد چیکار میکنه؟
تمام عناصر و همچنین تمام عناصر ی که خصوصیت type آنها "button" است را انتخاب می کند.
متوجه این توضیح نمی شم
ممنون میشم بیشتر توضیح بدین
فرض کنید که تعدادی دکمه را با استفاده از تگ <button>ایجاد کرده ایم، و می خواهیم آنها را محو کنیم همچنین تعدادی دکمه هم با استفاده از تگ <input>در یک فرم ایجاد کرده ایم و آنها را هم می خواهیم محو کنیم، برای اینکه هر دو گروه دکمه را محو کنیم از سلکتور و دستور زیر استفاده می کنیم :
[dir=#555]$(":button").hide();[/dir]
function اینو متوجه نمیشم؛چرا از function استفاده میشود؟
می خواستم ببینم اشکال این کد دقیقا چیه؟[dir=#555]
function hid(var x){
var y='\"'+x+'\"';
$(y).hide();
}
$(function(){
$("button").click(hid(p));
});
Welcome to My Homepage
My name is Donald.
I live in Duckburg.
I love Duckburg.
My best friend is Mickey.
Click me[/dir]
ایا نمیشه داخل قسمت گزینشگر ها متغییر قرار داد؟
اگه مفهوم این کد رو فهمیدید اگه میشه راهی براش ارایه بدید
با تشکر
کد به طور دقیق نیفتاده. شما زمانی که قصد درج کد html رو دارید، باید به جای > از علامت ;lt& و به جای < از علامت ;gt& استفاده کنید.
مثال "گزینشگر نام تگ" مشکل داره! گفتم که درستش کنید :) خودتان امتحان کنید رو کلیک کنید متوجه میشید!
میخواهم توسط سلکتور li هایی رو انتخاب کنم که دارای چند کلاس فوق هستند؛ولی درست عمل نمیکند
طرز صحیح این کد چیست؟!
با تشکر
شما باید قبل از اسم کلاس از . استفاده کنید. الآن چون علامت . به کار نرفته، کد فوق هر کلاس رو معادل تگ در نظر میگیره و چون تگ موردنظر نیست، کد هم عمل نمیکنه.
طرز صحیح کد به صورت زیر هست:
[dir=#555]$("li.current , li.active , li.deeper , li.parent").addClass("dropdown");[/dir]
این کد تمامی li ها رو انتخاب میکند که یکی از کلاس‌های فوق رو داشته باشه.