خانه » بلاگ » jquery » آموزش انتخابگرهای جی کوئری Jquery – درس سوم
آموزش جی کوئری JQuery
درس سوم : انتخابگر های جی کوئری (jQuery selector)
در این قسمت از آموزشجی کوئری قصد داریم تا همراه شما دوستان و همراهان عزیز وبیار در رابطه با انتخابگرهای جی کوئری (jQuery selector) صحبت کنیم .انتخابگر ها یکی از مهمترین بخش های کتابخانه ی جی کوئری هستند . اگر شما بتوانید با انتخابگرهای جی کوئری به خوبی کار کنید میتوانید کار با جی کوئری را به درستی بیاموزید .با ما همراه باشید .
توصیه ما به شما همراه گرامی :درصورتیکه مبتدی هستید و هنوز با مطالب پایه ای جی کوئری آشنایی ندارید جهت آشنایی بهتر با جی کوئری ، داشتن پیش زمینه ی مناسب برای آموزش انتخابگرهای جی کوئری(jQuery selector) بهتر است مطالعه ای بر روی « جی کوئری چیست ؟» و « راه اندازی و نصب جی کوئری» داشته باشید.
انتخابگرهای جی کوئری (jquery selector) :
همانطور که از نام selector ها پیداست شما می توانید با استفاده از انتخابگر های جی کوئری ، عناصر دلخواه HTML را جهت انجام عملیاتی روی آنها انتخاب کرده ،سپس از طریق جی کوئری تغییراتی روی عنصر انتخابی اعمال کنید.
انتخابگر های جی کوئری میتوانند عناصر مورد نظر را بر اساس آی دی (id)، کلاس (class)، نوع (type)، صفت (attribute)، مقادیر صفات (value) و … پیدا کنند و جهت انجام اعمال دلخواه، در اختیار شما قرار دهند . شما میتوانید علاوه بر استفاده از انتخابگر های جی کوئری از انتخابگرهای css نیز در جی کوئری بهره مند شوید .
تمامی انتخابگر های جی کوئری با یک علامت دلار همراه پرانتز نمایش داده میشوند. مانند زیر :
$ (" نام سلکتور");
انواع انتخابگرهای جی کوئری (jquery selector) :
سلکتور ها برای انتخاب عناصر مختلف انواع متفاوتی دارند :
انتخابگر عناصر :
این نوع انتخابگر برای یافتن عناصر از طریق نام آن ها استفاده می شود . درواقع این انتخابگر با دریافت نام عنصر از شما آن را انتخاب می کند .
مثال :
$("p");
این کدعنصری که نام آن p می باشد را انتخاب می کند.
انتخابگر شناسه (id) :
این انتخابگر از شناسه (id) یک تگ HTML برای پیدا کردن یک عنصر خاص استفاده میکند .مراقب باشید که نام شناسه در یک صفحه باید منحصر به فرد باشد. برای انتخاب یک عنصر بر اساس شناسه قبل از نام شناسه از علامت # استفاده می شود.
مثال:
$("#test1 ");
این کد عنصری با شناسه test1 را انتخاب می کند.
انتخابگر کلاس (class)
این انتخابگر میتواند عنصری که دارای کلاس مورد نظر شماست را انتخاب نماید . برای استفاده از این انتخابگر، کافی است در ابتدای نام کلاس یک نقطه قرار داده و سپس نام کلاس را قرار دهید.
مثال :
$(".test1");
این کد عنصری با کلاس test1 را انتخاب می کند.
انتخابگر صفات:
با این انتخابگر میشود عناصری را انتخاب کرد که Attribute های خاصی دارند.وبرای استفاده از آن باید خصوصیت مورد نظر را داخل[ ]به کار ببرید .
مثال:
$( " [href] " );
انتخاب تمامی عناصری که از herf استفاده کرده اند.
Gt : انتخاب عناصر بزرگتر
برای مثال : اگر چندین پاراگراف داشته باشیم و بخواهیم پیش زمینه پاراگراف سوم به بعد را عوض کنیم، میتوانیم از انتخابگر Greater than یا gt استفاده کنیم:
$('p:gt(3)').css("background":"yellow");
کد بالا از بین همه پاراگراف ها، فقط پاراگراف سوم به بعد (۴ و ۵ و ۶ و…) را انتخاب میکند.
Lt : انتخاب عناصر کوچیکتر
برای انتخاب عناصر قبل از مورد مشخص شده استفاده میشود :
$('p:lt(3)').css("background":"orange");
کد بالا از بین همه پاراگراف ها، فقط پاراگراف‌های قبل از پاراگراف سوم را انتخاب میکند (پاراگراف ۱ و ۲) و پیش زمینه آنها را نارنجی مکیند.
سایر انتخابگرها :
انتخاب تمام عناصر:
$("*");
انتخاب عنصر فعلی :
$(this);
.دارند intro انتخاب همه ی تگ های پاراگراف که کلاس
$("p.intro");
انتخاب اولین تگ پاراگراف:
$("p:first");
: ul با نام (li انتخاب اولین عنصر از بین تمامی عناصر لیست)
$("ul li:first-child");
انتخاب تمامی لینک هایی که در صفحه جدید باز میشوند:
$("a[target='_blank']");
انتخاب تمامی دکمه ها یا ورودی هایی که از نوع دکمه تعریف شده اند:
