سبد (0)

تبلیغات

گزینشگرهای jQuery

گزینشگرهای jQuery یکی از مهترین بخش های کتابخانه jQuery است.


گزینشگرهای jQuery یا (jQuery Selectors)

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

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

تمام گزینشگرها در jQuery با علامت "$" آغاز و با پرانتز محصور می شوند: ()$


گزینشگر نام تگ

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

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

$("p")

مثال: در مثال زیر، زمانی که کاربر روی دکمه کلیک می کند، تمام عناصر <p> پنهان می شوند:

مثال (گزینشگرهای jQuery)

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
خودتان امتحان کنید »

گزینشگر شناسه (id#)

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

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

برای پیدا کردن یک عنصر با شناسه مشخص، از کاراکتر "#" همراه با شناسه مورد نظر استفاده نمایید:

$("#test")

مثال: در این مثال، زمانی که کاربر روی دکمه کلیک کند، عنصر با شناسه "test" پنهان می شود:

مثال (گزینشگرهای jQuery)

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
خودتان امتحان کنید »

گزینشگر نام کلاس (class.)

گزینشگر نام کلاس، عناصر با کلاس مشخص را پیدا می کند.

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

$(".test")

مثال: در این مثال، زمانی که کاربر روی دکمه کلیک کند، عناصر با کلاس "test" پنهان می شود:

مثال (گزینشگرهای jQuery)

$(document).ready(function(){
  $("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> فرد را انتخاب می کند.

مثال

For a complete reference of all the jQuery selectors, please go to our jQuery Selectors Reference.


توابع پرکاربرد در یک فایل مجزا

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

همانطور که در این آموزش دیده اید، توابع به طور مستقیم در قسمت <head> صفحه قرار داده شده اند. اما بعضی مواقع مانند بالا، ترجیح داده می شود که آنها را در یک فایل JavaScript جداگانه با پسوند js. ذخیره کنیم و مانند زیر، توسط تگ <script> به صفحه لینک کرد:

مثال (گزینشگرهای jQuery)

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="/my_jquery_functions.js"></script>
</head>

دیدگاه‌ها  

0 # zbm 1396-06-20 18:05
سلام چندتا کلاس مشابه دارم که توی یک دیو قرار دارن چطوری میتونم روی هر کلاسی که رفتم فقط همون تغییر کنه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # محمد فرخیان 1395-12-23 17:51
درود بر شما
من تازه شروع به آموزش جی کوئری کردم ولی هرچی سرچ کردم نتونستم متوجه بشم که علامت $ چی تلفظ میشه و دقیقا چه مواقعی کاربرد داره؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-06-21 08:12
سلام در مثال زیر، تمام عناصر div که شامل کلاس test هستند و داخل اشان عنصر p با کلاس sameclass وجود دارد و p مذکور، دومین فرزند پدرشان هستند را انتخاب می کند:
div.test p.sameclass:nth-child(2)

بجای عدد 2 می تونید هر عدد دلخواه دیگری را قرار دهید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1395-12-24 08:19
درود بر شما
علامت $ در جی کوئری: این علامت بصورت "دالر" تلفظ می شود و دستوری است که به ما کمک می کند تا عناصر مختلف در یک صفحه را براساس نیازمان، گزینش یا انتخاب نماییم. همچنین توجه فرمایید که برای کوتاه شدن دستورات از $ که جایگزین دستور jquery است استفاده می کنیم. یعنی شما می توانید از دستور jquery بجای $ استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # a_bahoush 1395-11-24 19:58
سلام
همانطور که خودتون گفتید یک فایل جاوای جداگانه به مثالها لینک شده و با حذف آنها مثال به اصطلاح عقیم میشود و بیننده هم کدهای فایل را نمی بیند و حتما انتظار دارید که مراجعه کننده مثالها را درک کند. برای آموزش باید محتوای تمام کدها معلوم باشد.
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1395-11-24 22:17
سلام، متأسفانه متوجه منظورتون نشدم ...!؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیدح 1395-07-15 14:26
مثال گزینشگر $(":button") تو فایل خودتان امتحان کنید کدش یه اشتباه کوچیک داره
تو خط دوم اسکریپت جیکوئری نوشته علامت : رو پشت button جا انداختید و بخاطر همین برای inputهای از نوع button کار نمیکنه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1395-07-16 09:23
سلام و عرض ادب
لطف کنید لینک خودتان امتحان کنید رو ذکر کنید تا اصلاح شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # سینا اسماعیل پور 1395-04-05 20:35
با سلام و تشکر از اموزش های بی نظیرتون
می خواستم ببینم اشکال این کد دقیقا چیه؟
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

ایا نمیشه داخل قسمت گزینشگر ها متغییر قرار داد؟
اگه مفهوم این کد رو فهمیدید اگه میشه راهی براش ارایه بدید
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1395-07-15 17:15
با سلام.
کد به طور دقیق نیفتاده. شما زمانی که قصد درج کد html رو دارید، باید به جای > از علامت ;lt& و به جای < از علامت ;gt& استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # کیانا 1394-10-23 19:36
$("li. current active deeper parent").addClass("dropdown");
میخواهم توسط سلکتور li هایی رو انتخاب کنم که دارای چند کلاس فوق هستند؛ولی درست عمل نمیکند
طرز صحیح این کد چیست؟!
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1395-07-15 17:18
با سلام.
شما باید قبل از اسم کلاس از . استفاده کنید. الآن چون علامت . به کار نرفته، کد فوق هر کلاس رو معادل تگ در نظر میگیره و چون تگ موردنظر نیست، کد هم عمل نمیکنه.
طرز صحیح کد به صورت زیر هست:
$("li.current , li.active , li.deeper , li.parent").addClass("dropdown");
این کد تمامی li ها رو انتخاب میکند که یکی از کلاس‌های فوق رو داشته باشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # فریبا mizraee 1394-09-27 17:25
مثالی که زدید برای دکمه button بود
حلا اگه بخواهیم با کلیک بر روی یکی از input ها مثلا input ریست یک اتفاق داشته باشیم چطوری میشه
ممکنه یه مثال براش بزنید
گزینشگرها فقط برای اتفاق ها بود برای رویداد ها صدق نمیکنه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # hamid fa 1394-09-27 18:32
با سلام خدمت شما دوست گرامی
منظورتون رو واضح نرسوندید

این ها برای رویداد هستش خب

یعنی مثلا وقتی رویداد کلیک اتفاق بیوفته یه عنصری پنهان میشه

لطفا دقیق تر بفرمائید تا بتونم دقیق کمکتون کنم

با تشکر از شما
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # فریبا mizraee 1394-09-29 19:49
میخوام وقتی روی دکمه ریست فرمی کلیک کردم نتیجه اون فرم پاک بشه
توجه نمیخوام روی button کلیک کنم میخوام روی کلیک کنم که یک input هست
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-09-29 21:30
با سلام.
سؤالتون واضح نیست. وقتی روی دکمه reset کلیک کنید، فرم پاک میشه و نیاز به کار اضافه‌ای هم نیست. type اون رو از نوع reset بذارید.
کد زیر رو نگاه کنید:
<input type="reset" name="reset" value="Reset Form" />
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # گلبرگ 1394-07-09 09:29
دمتون گرم
ممنون از آموزش هاتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # amirkian 1394-05-18 21:01
اگر بخایم یک عنصری که چند کلاس دارد را انتخاب کنیم به چه صورت است؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1394-05-19 22:40
کافیه که کلاس ها را بدون فاصله بعنوان سلکتور قرار دهید. بعنوان مثال به این لینک مراجعه نمایید: codepen.io/sbaloot/pen/eNXreX
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # م.ح 1394-04-16 14:13
سلام
$(":button")
من متوجه نمیشم این قسمت کد چیکار میکنه؟
تمام عناصر و همچنین تمام عناصر ی که خصوصیت type آنها "button" است را انتخاب می کند.
متوجه این توضیح نمی شم
ممنون میشم بیشتر توضیح بدین
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1394-04-16 14:31
سلام
فرض کنید که تعدادی دکمه را با استفاده از تگ <button>ا یجاد کرده ایم، و می خواهیم آنها را محو کنیم همچنین تعدادی دکمه هم با استفاده از تگ <input>در یک فرم ایجاد کرده ایم و آنها را هم می خواهیم محو کنیم، برای اینکه هر دو گروه دکمه را محو کنیم از سلکتور و دستور زیر استفاده می کنیم :
$(":button").hide();
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # amirkain 1394-04-15 23:31
ready(function()
function اینو متوجه نمیشم؛چرا از function استفاده میشود؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-04-15 23:46
دقت داشته باشید که دستورات جاوااسکریپت و جی کوئری باید درون تابع قرار بگیرد. مثلا در جاوااسکریپت می خواهیم یه کدهایی رو بارها استفاده کنیم، اونا رو داخل تابع قرار می دهیم و هر بار که نیاز داشتیم فقط تابع رو صدا می زنیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # hamid123 1393-12-14 23:19
سلام!
مثال "گزینشگر نام تگ" مشکل داره! گفتم که درستش کنید :) خودتان امتحان کنید رو کلیک کنید متوجه میشید!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1393-12-16 11:10
سلام، ممنون از دقت نظر شما ...! اصلاح شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی