گزینشگرهای jQuery
گزینشگرهای 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>
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 26541
دیدگاه‌ها
سلام چندتا کلاس مشابه دارم که توی یک دیو قرار دارن چطوری میتونم روی هر کلاسی که رفتم فقط همون تغییر کنه.
درود بر شما
من تازه شروع به آموزش جی کوئری کردم ولی هرچی سرچ کردم نتونستم متوجه بشم که علامت $ چی تلفظ میشه و دقیقا چه مواقعی کاربرد داره؟
سلام در مثال زیر، تمام عناصر div که شامل کلاس test هستند و داخل اشان عنصر p با کلاس sameclass وجود دارد و p مذکور، دومین فرزند پدرشان هستند را انتخاب می کند:
div.test p.sameclass:nth-child(2)
بجای عدد 2 می تونید هر عدد دلخواه دیگری را قرار دهید.
درود بر شما
علامت $ در جی کوئری: این علامت بصورت "دالر" تلفظ می شود و دستوری است که به ما کمک می کند تا عناصر مختلف در یک صفحه را براساس نیازمان، گزینش یا انتخاب نماییم. همچنین توجه فرمایید که برای کوتاه شدن دستورات از $ که جایگزین دستور jquery است استفاده می کنیم. یعنی شما می توانید از دستور jquery بجای $ استفاده کنید.
سلام
همانطور که خودتون گفتید یک فایل جاوای جداگانه به مثالها لینک شده و با حذف آنها مثال به اصطلاح عقیم میشود و بیننده هم کدهای فایل را نمی بیند و حتما انتظار دارید که مراجعه کننده مثالها را درک کند. برای آموزش باید محتوای تمام کدها معلوم باشد.
با تشکر
سلام، متأسفانه متوجه منظورتون نشدم ...!؟
مثال گزینشگر $(":button") تو فایل خودتان امتحان کنید کدش یه اشتباه کوچیک داره
تو خط دوم اسکریپت جیکوئری نوشته علامت : رو پشت button جا انداختید و بخاطر همین برای inputهای از نوع button کار نمیکنه
سلام و عرض ادب
لطف کنید لینک خودتان امتحان کنید رو ذکر کنید تا اصلاح شود.
با سلام و تشکر از اموزش های بی نظیرتون
می خواستم ببینم اشکال این کد دقیقا چیه؟
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
ایا نمیشه داخل قسمت گزینشگر ها متغییر قرار داد؟
اگه مفهوم این کد رو فهمیدید اگه میشه راهی براش ارایه بدید
با تشکر
با سلام.
کد به طور دقیق نیفتاده. شما زمانی که قصد درج کد html رو دارید، باید به جای > از علامت ;lt& و به جای < از علامت ;gt& استفاده کنید.
$("li. current active deeper parent").addClass("dropdown");
میخواهم توسط سلکتور li هایی رو انتخاب کنم که دارای چند کلاس فوق هستند؛ولی درست عمل نمیکند
طرز صحیح این کد چیست؟!
با تشکر
با سلام.
شما باید قبل از اسم کلاس از . استفاده کنید. الآن چون علامت . به کار نرفته، کد فوق هر کلاس رو معادل تگ در نظر میگیره و چون تگ موردنظر نیست، کد هم عمل نمیکنه.
طرز صحیح کد به صورت زیر هست:
$("li.current , li.active , li.deeper , li.parent").addClass("dropdown");
این کد تمامی li ها رو انتخاب میکند که یکی از کلاس‌های فوق رو داشته باشه.
مثالی که زدید برای دکمه button بود
حلا اگه بخواهیم با کلیک بر روی یکی از input ها مثلا input ریست یک اتفاق داشته باشیم چطوری میشه
ممکنه یه مثال براش بزنید
گزینشگرها فقط برای اتفاق ها بود برای رویداد ها صدق نمیکنه
با سلام خدمت شما دوست گرامی
منظورتون رو واضح نرسوندید
این ها برای رویداد هستش خب
یعنی مثلا وقتی رویداد کلیک اتفاق بیوفته یه عنصری پنهان میشه
لطفا دقیق تر بفرمائید تا بتونم دقیق کمکتون کنم
با تشکر از شما
میخوام وقتی روی دکمه ریست فرمی کلیک کردم نتیجه اون فرم پاک بشه
توجه نمیخوام روی button کلیک کنم میخوام روی کلیک کنم که یک input هست
با سلام.
سؤالتون واضح نیست. وقتی روی دکمه reset کلیک کنید، فرم پاک میشه و نیاز به کار اضافه‌ای هم نیست. type اون رو از نوع reset بذارید.
کد زیر رو نگاه کنید:
<input type="reset" name="reset" value="Reset Form" />
دمتون گرم
ممنون از آموزش هاتون
اگر بخایم یک عنصری که چند کلاس دارد را انتخاب کنیم به چه صورت است؟
کافیه که کلاس ها را بدون فاصله بعنوان سلکتور قرار دهید. بعنوان مثال به این لینک مراجعه نمایید: codepen.io/sbaloot/pen/eNXreX
سلام
$(":button")
من متوجه نمیشم این قسمت کد چیکار میکنه؟
تمام عناصر و همچنین تمام عناصر ی که خصوصیت type آنها "button" است را انتخاب می کند.
متوجه این توضیح نمی شم
ممنون میشم بیشتر توضیح بدین
سلام
فرض کنید که تعدادی دکمه را با استفاده از تگ <button>ا یجاد کرده ایم، و می خواهیم آنها را محو کنیم همچنین تعدادی دکمه هم با استفاده از تگ <input>در یک فرم ایجاد کرده ایم و آنها را هم می خواهیم محو کنیم، برای اینکه هر دو گروه دکمه را محو کنیم از سلکتور و دستور زیر استفاده می کنیم :
$(":button").hide();
ready(function()
function اینو متوجه نمیشم؛چرا از function استفاده میشود؟
دقت داشته باشید که دستورات جاوااسکریپت و جی کوئری باید درون تابع قرار بگیرد. مثلا در جاوااسکریپت می خواهیم یه کدهایی رو بارها استفاده کنیم، اونا رو داخل تابع قرار می دهیم و هر بار که نیاز داشتیم فقط تابع رو صدا می زنیم.
سلام!
مثال "گزینشگر نام تگ" مشکل داره! گفتم که درستش کنید :) خودتان امتحان کنید رو کلیک کنید متوجه میشید!
سلام، ممنون از دقت نظر شما ...! اصلاح شد.