آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

Selector ها در جی کوئری (۲)

selector ها در جی کوئری

فصل دوم (Selector ها در جی کوئری)

جلسه دوم (انتخابگر ها و یا  Selector ها در جی کوئری) (قسمت دوم)

در جلسه ی قبل توضیحی در رابطه با انتخاب گرها دادیم و تعدادی از آنها را معرفی کردیم ، در این جلسه  به ادامه ی این مبحث می پردازیم . می توانید از طریق لینک زیر جلسه ی قبل را مطالعه بفرمایید :

مشاهده مقاله ی جلسه اول

 

انتخاب بر اساس محتوا

با کد contains میتوانیم عنصری که متن خاصی داخلش وجود دارد را انتخاب کنیم.

کد زیر هر پاراگرافی که کلمه iranweblearn.com داخلش باشد را  نارنجی میکند.

انتخاب عنصرهای غیرفعال (disabled)

کد زیر کلمه غیرفعال را در همه input هایی که غیرفعال شدند مینویسد:

 انتخاب عنصرهای فعال (enabled)

کد زیر برای همه input هایی که فعال هستند حاشیه قرمز میگذارد.

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

برای عناصری که هیچ متن یا تگی داخلشان نباشد. مثل تگ های زیر:

کد زیر همه تگ‌های خالی که داخل تگ body باشند را انتخاب میکند ، متن Empty Tag را داخلشان مینویسد و رنگ پیش زمینه آنها را قرمز میکند :

  انتخاب بر اساس اندیس

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

اگه یه لیست با ۳ تا li داشته باشیم ، شماره اندیس این سها li از ۰ تا ۲ هست (شمارش اندیس‌ها از ۰ شروع میشه)

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

 برای انتخاب عنصر دوم:

 انتخاب زوج و فرد

کد زیر پاراگراف‌های زوج رو آبی میکند:

  کد زیر پاراگراف‌های فرد رو قرمز میکند:

 انتخاب چند عنصر

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

برای انتخاب چند تا عنصر ، کافیست نام عنصر را به همراه کاما “,”  اضافه کنیم :

  کد بالا همه عناصری که کلاس myclass1 و myclass2 و myclass3 دارند را انتخاب میکند و رنگشان را به نارنجی تغییر میدهد.

انتخاب عنصر اول

“first” عنصر اول را از بین تعدادی عنصر انتخاب میکند.کد زیر اولین پاراگراف رو انتخاب میکند و border قرمز را به آن میدهد .

 انتخاب first-child یا فرزند اول

first-child عنصر فرزند اول را از بین تعدادی عنصر انتخاب میکند. کد زیر اولین پاراگراف داخل تگ div را انتخاب میکند  و border قرمز را به آن میدهد .

 انتخاب عنصر آخر

“Last” عنصر آخر را از بین تعدادی عنصر انتخاب میکند.کد زیر آخرین پاراگراف را انتخاب میکند و border سبز را به آن میدهد .

 انتخاب last-child یا فرزند آخر

first-child عنصر فرزند اول را از بین تعدادی عنصر انتخاب میکند. تقریبا شبیه Last کار میکند.کد زیر آخرین پاراگراف داخل تگ div را انتخاب میکند و border قرمز را به آن میدهد .

 انتخاب فرزند n ام

nth-child فرزند n ام را از بین تعدادی عنصر انتخاب میکند. کد زیر سومین پاراگراف داخل تگ div را انتخاب میکند و رنگ متنش را آبی میکند.

 انتخاب عنصر دارای خصوصیت

با این انتخابگر میشود عناصری را انتخاب کرد که Attribute های خاصی دارند.مثلا با کد زیر همه عکس‌هایی که خصوصیت Alt داشته باشند را انتخاب میکند و  border قرمز را به آن میدهد .

 منفی کردن انتخابگر با not

هنگامی که میخواهیم نتیجه را برعکس کنیم از این انتخابگر استفاده میکنیم ، کد زیر  به چک باکس های تیک خورده border سه پیکسلی میدهد.

 کد زیر  به چک باکس های تیک خورده border سه پیکسلی میدهد ، که با اضافه کردن :not ، چک باکس های تیک نخورده رو انتخاب میکنیم:

 gt: انتخاب عناصر بزرگتر

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

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

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

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

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

انتخاب عناصر تک فرزند “only-child

ممکنه این جمله رو متوجه نشوید:

“اگه عنصری ، تنها عنصرِ عنصر والدِ خودش باشه ، انتخاب میشود”

پس بیشتر توضیح میدم:

اگه داخل عنصر والد ، ۲ تا عنصر فرزند داشته باشیم:

    <ul><li></li><li></li></ul>

یعنی ul پدر ، ۲تا فرزند li داره ، ولی اگر فقط یک فرزند داشته باشد:

    <ul><li></li></ul>

 سلکتور only-child در جی کوئری ، فقط عناصری را انتخاب میکند که هیچ عنصر مشابهی ، قبل یا بعد آنها وجود نداشته باشد. در کد زیر ، فقط li هایی که تک فرزند باشند ، border آبی میگیرند.

 انتخاب first-child یا فرزند اول

first-child عنصر فرزند اول را از بین تعدادی عنصر انتخاب میکند. تقریبا شبیه first کار میکند. کد زیر اولین پاراگراف داخل تگ div را انتخاب میکند و border قرمز به آن میدهد .

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

تهیه و گردآوری در مدرسه مجازی ایرانیان

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • علی علوی

    سایتتون عاااااالی.

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟