آموزش انتخابگرهای جی کوئریJquery-درس سوم

آخرین بروز رسانی: شهریور ۱۸, ۱۳۹۶

آموزش جی کوئری JQuery

درس سوم :  انتخابگر های جی کوئری  (jQuery selector)

در این قسمت از آموزش جی کوئری قصد داریم تا همراه شما دوستان و همراهان عزیز وبیار در رابطه با انتخابگرهای جی کوئری  (jQuery selector) صحبت کنیم .انتخابگر ها یکی از مهمترین بخش های کتابخانه ی جی کوئری هستند . اگر شما بتوانید با انتخابگرهای جی کوئری به خوبی کار کنید میتوانید کار با جی کوئری را به درستی بیاموزید .با ما همراه باشید .

توصیه ما به شما همراه گرامی :درصورتیکه مبتدی هستید و هنوز با مطالب پایه ای جی کوئری آشنایی ندارید جهت آشنایی بهتر با جی کوئری ، داشتن پیش زمینه ی مناسب برای آموزش انتخابگرهای جی کوئری (jQuery selector) بهتر است مطالعه ای بر روی « جی کوئری چیست ؟» و « راه اندازی و نصب جی کوئری» داشته باشید.

  • انتخابگرهای جی کوئری (jquery selector) :

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

انتخابگر های جی کوئری میتوانند عناصر مورد نظر را بر اساس آی دی (id)، کلاس (class)، نوع (type)، صفت (attribute)، مقادیر صفات (value) و … پیدا کنند و جهت انجام اعمال دلخواه، در اختیار شما قرار دهند . شما میتوانید علاوه بر استفاده از انتخابگر های جی کوئری از انتخابگرهای css نیز در جی کوئری بهره مند شوید .

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

  • انواع انتخابگرهای جی کوئری (jquery selector) :

سلکتور ها برای انتخاب عناصر مختلف انواع متفاوتی دارند :

  • انتخابگر عناصر :

این نوع انتخابگر برای یافتن عناصر از طریق نام آن ها استفاده می شود  . درواقع این انتخابگر با دریافت نام عنصر از شما آن را انتخاب می کند .

مثال :

این کدعنصری که نام آن p  می باشد را انتخاب می کند.

  • انتخابگر شناسه (id) :

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

مثال:

این کد عنصری با شناسه test1   را انتخاب می کند.

  • انتخابگر کلاس (class)

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

مثال :

این کد عنصری با کلاس test1  را انتخاب می کند.

  • انتخابگر صفات:

با این انتخابگر میشود عناصری را انتخاب کرد که Attribute های خاصی دارند.وبرای استفاده از آن باید خصوصیت مورد نظر را داخل[ ]به کار ببرید .

مثال:

انتخاب تمامی عناصری که از  herf  استفاده کرده اند.

  •  Gt : انتخاب عناصر بزرگتر

برای مثال : اگر چندین پاراگراف داشته باشیم و بخواهیم پیش زمینه پاراگراف سوم به بعد را عوض کنیم، میتوانیم از انتخابگر Greater than یا gt استفاده کنیم:

کد بالا از بین همه پاراگراف ها، فقط پاراگراف سوم به بعد (۴ و ۵ و ۶ و…) را انتخاب میکند.

  • Lt : انتخاب عناصر کوچیکتر

برای انتخاب عناصر قبل از مورد مشخص شده استفاده میشود :

کد بالا از بین همه پاراگراف ها، فقط پاراگراف‌های قبل از پاراگراف سوم را انتخاب میکند (پاراگراف ۱ و ۲) و پیش زمینه آنها را  نارنجی مکیند.

  • سایر انتخابگرها :

    انتخاب تمام عناصر:

         انتخاب عنصر فعلی :

.دارند  intro انتخاب همه ی تگ های پاراگراف که کلاس

انتخاب اولین تگ پاراگراف:

: ul  با نام (li انتخاب اولین عنصر از بین تمامی عناصر لیست)

انتخاب تمامی لینک هایی که در صفحه جدید باز میشوند:

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

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

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

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

مطالب مرتبط
  1. هاشم شیخی پور گفت:

    باسلام 

    استاد یه بخش ذخیره سازی به صورت pdf هم میتونه ایده جالبی باشه ک علاقه مندان بتونن استفاده کنن و دانلود کنن محتوارو .

    با تشکر 

ارتباط با تیم پشتیبانی وب یار

تمام پشتیبان ها در حال پاسخ به مشتریان هستند. لطفا درخواست خود را ارسال نمایید تا در کوتاه ترین زمان ممکن با شما تماس بگیریم.

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید

کلیه حقوق مادی و معنوی این اثر متعلق به طراحی سایت اصفهان وب یار می باشد CopyRight 2017

بالا