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

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

سلکتور برای انتخاب کردن المنت ها (جهت اعمال عملیات روی آنها) در جی کوئری بکار میرود.

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

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

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

سلکتور برای انتخاب کردن المنت ها (جهت اعمال عملیات روی آنها) در جی کوئری بکار میرود. برای انتخاب یه عنصر HTML به صورت مستقیم میتوانیم آن را  فراخوانی کنیم . به مثال های زیر دقت کنید :

انتخاب همه ی عناصر و پنهان سازی آنها :

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

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

برای انتخاب عناصر بر اساس خصوصیت ها از کد زیر استفاده میکنیم.
کد زیر لینک هایی که خاصیت href آنها با عبارت http شروع شود را hide میکند.

 کد زیر لینک هایی که خاصیت hreflang آنها en باشد یا با -en شروع شوند را hide میکند.

 کد زیر همه لینک‌هایی که خصوصیت href آنها با کلمه”html”  تموم میشود  را انتخاب میکند و  hide میکند.

 کد زیر عکس‌هایی را که خاصیت Alt آنها  برابر با www.iranweblearn.com  باشد را  hide میکند.

 کد زیر فقط div هایی را که خصوصیت کلاس آنها  myclass باشد را انتخاب میکند و  hide میکند.

 کد زیر فقط div هایی را که خصوصیت کلاس آنها  myclass نباشد را انتخاب میکند و  hide میکند.

 انتخاب دکمه ها

کد زیر به همه button ها حاشیه ۵ پیکسلی صاف به رنگ مشکی میدهد . در این کد نحوه اعمال یک کد CSS به یک عنصر را می ببینید.

 انتخاب چک‌باکس ها

 کد زیر به همه چک‌باکس ها  حاشیه ۳ پیکسلی میدهد

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

 انتخاب Input های از نوع File

برای انتخاب Input هایی که خصوصیت type آن‌ ها مقدار file دارد و برای انتخاب یک فایل جهت آپلود در سایت استفاده میشوند :

 انتخاب عنصرهای check شده

این سلکتور checkbox ها و radio هایی را  که تیک خورده اند (انتخاب شده اند) را انتخاب میکند.

در کد زیر با انتخاب هر دکمه رادیویی موجود در صفحه ، مقدار value آن ، در یک عنصر جدید که کلاس iroschool دارد ، نمایش داده میشود :

 انتخاب عناصر فرزند

درست مثل CSS میتوانیم در jQuery هم ، عناصر فرزند رو فراخوانی کنیم :

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

تهیه شده در مدرسه آنلاین ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

۱ دیدگاه

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

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

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین