سلکتور ها در جی کوئری

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

به عباراتی مانند $(“body”) و $(“p”) سلکتور می گویند . که تمام پاراگراف های موجود در صفحه را انتخاب می کند . حال اگر بخواهیم بگوییم اولین پاراگراف را انتخاب کن باید از فیلترها (Filters) استفاده کنیم . بدین صورت : $(“p:first”)

نکته ۱): فرض کنیم می خواهید دکمه یا لینکی را که آیدی btn1 دارد را انتخاب (select) کنید . باید سلکتور را بصورت $(“#btn1”) بنویسیم . علامت # بیانگر آیدی المان می باشد .

نکته ۲): فرض کنید می خواهید المانی در صفحه را که کلاس css ای بنام btn1 دارد را انتخاب کنیم . سلکتور بصورت $(“.btn1”) خواهد بود .

برای مثالهای بعدی ، متن زیر را در بخش body فایل selectors.html بنویسید :

                              
 

Introduction to jQuery Selectors and Filters

Selectors and Filters provide a way of finding and extracting information from Web pages.

Selectors

Selectors are used to select parts of the Web page using a common CSS-style syntax.

For example, $("p") will select all of the paragraph tags in a document and return them as a list that can be further operated upon.

Filters

Filters are used to further refine the results returned from selectors.

For example, $("p:first") will select the first paragraph in the returned set from $("p").

بنابراین تا کنون فایل html دارای کدهای زیر است :

برای اینکه حاشیه تمام پاراگراف های صفحه را قرمز رنگ کنیم ، عبارت زیر را در بخش script بنویسید :

                              
  $("p").css("border", "3px solid red");

توضیح : برای اعمال استایل های css به سلکتور ، از تابع css استفاده می کنیم که دو پارامتر می گیرد ، اولی نام property و دومی مقدار آن که در اینجا border : 3px solid red می باشد . خروجی بصورت تصویر زیر می باشد :مقدمه آموزش سلکتور در جی کوئری

 

                              
    $(".selectors").css("border", "3px solid red"); //1
    $("#intro").css("border", "3px solid red"); //2
    $("p:first").css("border", "3px solid red"); //3
    $("h2:not(.selectors)").css("border", "3px solid red"); //4

  • خط۱: برای اینکه استایل بالا روی تمام المان هایی که کلاس selector دارند اعمال شود
  • خط۲: اعمال استایل css روی المانهای با آیدی intro
  • خط۳: اعمال حاشیه قرمز رنگ به اولین پاراگراف
  • خط۴: انتخاب المان یا المان هایی که دارای کلاس selector نیستند

در مقاله بعد ، نحوه تغییر محتوای صفحه توسط Jquery را بررسی می کنیم .


تاریخ انتشار : ۲۲ فروردین ۱۳۹۵



دیدگاه ها :