آموزش انتخابگرهای جی کوئری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']");

انتخاب تمامی دکمه ها یا ورودی هایی که از نوع دکمه تعریف شده اند:

$    (":button");

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

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

­­­­­­­­­­­­برای آشنایی بیشتر با تیم طراحی سایت وبیار در اصفهان به سایت ما مراجعه نمایید و از سایر آموزش های ما لذت ببرید.

نوشته آموزش انتخابگرهای جی کوئریJquery-درس سوم اولین بار در طراحی سایت اصفهان | سئو سایت در اصفهان پدیدار شد.

طراحی سایت اصفهان | سئو سایت در اصفهان

نوشته آموزش انتخابگرهای جی کوئریJquery-درس سوم اولین بار در طراحی سایت آپلود سریع فایل پدیدار شد.

طراحی سایت آپلود سریع فایل

پربازدیدترین اخبار
طراحی سایت

طراحی سایت در اصفهان   طراحی سایت و سئو سایت در اصفهان   تیم طراحی سایت و سئو سایت وب یار به آدرس ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت , سئو سایت در گوگل ، ارسال […]

دانلود آهنگ جدید دانلود آهنگ جدید – دانلود موزیک دانلود آهنگ ملانی محال دیگه برگردم DL New Hit Music , Melani Called Mahale Dg Bargardam ملانی محال دیگه برگردم محال دیگه برگردم ملانی قسمتی از متن آهنگ قبلی خیالاتی : دوباره من و شب و بیداری و فکر توی لعنتی تا دم دمای صبح دوباره […]

Apowersoft Streaming Video Recorder نرم افزاری بسیار ساده اما قدرتمند و فوق العاده مفید در زمینه دانلود و ضبط ویدئوهای آنلاینی است که در سایت های مختلف وجود دارد و بیشتر اوقات امکان دریافت آن ها وجود ندارد. این ابزار کمک می کند به راحتی بتوان این ویدئوها را دانلود نموده و در سیستم رایانه […]

یكی از بهترین نرم افزار های رایت سی دی، دی وی دی، دیسك های Blu-ray ،HD DVD، و شكستن بسیار آسان قفل و همچنین شما می توانید از دی وی دی هائی كه در برابر رایت محافظت شده اند را به راحتی از آن كپی برداری كنید. AnyDVD به مانند یک درایور در پشت صحنه […]

دانلود آهنگ جدید دانلود آهنگ جدید – دانلود موزیک دانلود آهنگ جدید محسن چاوشی فندک تب دار DL New Hit Music , Mohsen Chavoshi Called Fandak Tabdar محسن چاوشی فندک تب دار فندک تبدار محسن چاوشی قسمتی از متن آهنگ : خط رو پیشونیم چشمای بارونیم دستای لرزونم پاهای بی جونم روح سرگردونم گلای ایوونم […]