آموزش جی کوئری – قسمت دوم – selectors

jquery selector

انتخابگرهای جی کوئری  (jQuery – Selectors)

کتابخانه jQuery قدرت انتخابگرهای (CSS) را تحت کنترل در آورده است تا به ما اجازه دهد به سرعت و به راحتی به عناصر و یا گروهی از عناصر Document Object Model (DOM) دسترسی داشته باشیم.

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

تابع ()factory$

انتخابگرهای جی کوئری با علامت دلار و پرانتز شروع می شوند – ()$ تابع factory ()$ از سه بلوک ساخته شده که در زیر آمده است برای انتخاب عناصر در یک

document داده شده استفاده می کند –

S.N. Selector & Description
۱ Tag Name

نشان دهنده نام تگ  موجود در DOM . به عنوان مثال (‘p’)$ تمام پاراگراف <p> در داکیومنت را انتخاب می کند

۲ Tag ID

نشان دهنده تگ در دسترس با ID داده شده در DOM. به عنوان مثال (‘some-id#’)$  عنصر واحدی را در داکیومنت که دارای آی دی some-id است انتخاب می کند.

۳ Tag Class

نشان دهنده تگ در دسترس  با کلاس داده شده در .DOM به عنوان مثال (‘some-class.’)$ همه عناصر در داکیومنت که کلاس some-class دارند انتخاب می کند.

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

توجه – factory function ()$ مترادف با تابع ()jQuery است. بنابراین در صورتی که شما از هر کتابخانه دیگر جاوا اسکریپت استفاده می کنید که در آن علامت$  با برخی چیزهای دیگر متناقض است بنابراین می توانید علامت $ را  با نام jQuery جایگزین کنید  و شما می توانید تابع ()jQuery را به جای ()$ استفاده کنید.

مثال:

در زیر یک مثال ساده است که از انتخابگر Tag استفاده می کند. این کد همه عناصر با تگ p را انتخاب می کند و پس زمینه آن را به “yellow” تنظیم می کند.

&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;The jQuery Example&lt;/title&gt;
      &lt;script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;

      &lt;script type = "text/javascript" language = "javascript"&gt;
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      &lt;/script&gt;
   &lt;/head&gt;
	
   &lt;body&gt;




&lt;div&gt;


This is a paragraph.



This is second paragraph.



This is third paragraph.

      &lt;/div&gt;




   &lt;/body&gt;
	
&lt;/html&gt;

نتیجه ی مثال فوق بصورت زیر خواهد شد –

jquery result
چگونه از selector در جی کوئری استفاده کنیم؟

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

S.N. Selector & Description
۱

Name

تمام عناصری که با عنصر Name مطابقت دارند، انتخاب می کند.

۲

#ID

عنصری که با  ID داده شده مطابقت می کند، لنتخاب می کند.

۳

.Class

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

۴

Universal (*)

تمام عناصر موجود در یک DOM را انتخاب می کند.

۵

Multiple Elements E, F, G

انتخاب نتایج ترکیبی از همه انتخابگرهای مشخص E، F و یا G.

 

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

S.N.

Selector & Description

۱

$(‘*’)

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

۲

$(“p > *”)

این انتخابگر تمام عناصر فرزند عنصر پاراگراف  را انتخاب می کند.

۳

$(“#specialID”)

این تابع انتخابگر عنصر با شناسه   id=”specialID” را انتخاب می کند.

۴

$(“.specialClass”)

این انتخابگر تمام عناصری که کلاس specialClass دارند را انتخاب می کند.

۵

$(“li:not(.myclass)”)

تمام عناصر منطبق با <li> که کلاس را “myclass”  ندارند انتخاب می کند.

۶

$(“a#specialID.specialClass”)

این انتخابگر لینک را  با شناسه specialID و کلاس  specialClassتطبیق می دهد.

۷

$(“p a.specialClass”)

این سلکتور لینک ها با کلاس  specialClass تعریف شده در عناصر<p>  را تطبیق می دهد.

۸

$(“ul li:first”)

این انتخابگر تنها اولین عنصر<li> از<UL> را می دهد.

۹

$(“#container p”)

تمام عناصر منطبق با <p> را که فرزندان یک عنصر که  id آن container می باشدرا انتخاب می کند.

۱۰

$(“li > ul”)

تمام عناصر تطبیق داده شده توسط <UL> که فرزند عنصر تطبیق داده شده توسط <li> هستند را انتخاب می کند.

۱۱

$(“strong + em”)

تمام عناصر منطبق با <em> که بلافاصله در ادامه عنصر برادر منطبق با <strong> است را انتخاب می کند.

۱۲

$(“p ~ ul”)

تمام عناصر منطبق با <UL> را که در ادامه برادر عنصر منطبق با <p> است انتخاب می کند.

۱۳

$(“code, em, strong”)

تمام عناصر منطبق با <code> یا <em> یا <strong>  را انتخاب می کند.

۱۴

$(“p strong, .myclass”)

تمام عناصر منطبق با <strong> که فرزندان عنصر منطبق با <p> هستند و همچنین همه عناصری که کلاس myclass  دارند انتخاب می شوند.

۱۵

$(“:empty”)

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

۱۶

$(“p:empty”)

تمام عناصر منطبق با <p> که فرزندی ندارند انتخاب می شوند.

۱۷

$(“div[p]”)

تمام عناصر همسان با عنصر <div> که حاوی یک عنصر همسان با <p> است انتخاب می کند.

۱۸

$(“p[.myclass]”)

 

تمام عناصر منطبق با <p>  که حاوی یک عنصر با کلاس myclass است انتخاب می کند.

۱۹

$(“a[@rel]”)

تمام عناصر همسان با <A> که دارای ویژگی  relهستند انتخاب می کند.

۲۰

$(“input[@name = myname]”)

 

تمام عناصر منطبق با  <input>  که مقدار نام آنها دقیقا برابر با  myname است انتخاب می کند.

۲۱

$(“input[@name^=myname]”)

تمام عناصر منطبق با <input> که مقدار نام آنها با myname شروع می شود را انتخاب می کند.

۲۲

$(“a[@rel$=self]”)

تمام عناصر منطبق با <A> که مقدار ویژگی rel آنها با self تمام می شود را انتخاب می کند.

۲۳

$(“a[@href*=domain.com]”)

تمام عناصر منطبق با <A> که مقدار خصوصیت href آنها حاوی domain.com است را انتخاب می کند.

۲۴

$(“li:even”)

تمام عناصر منطبق با <li> را که مقدار even index دارند انتخاب میکند.

۲۵

$(“tr:odd”)

تمام عناصر منطبق با <tr>  که مقدار ایندکس فرد دارند انتخاب می کند.

۲۶

$(“li:first”)

اولین عنصر  <li>را  انتخاب می کند.

۲۷

$(“li:last”)

آخرین عنصر<li> را انتخاب می کند.

۲۸

$(“li:visible”)

تمام عناصر منطبق با <li> را که قابل مشاهده هستند را انتخاب می کند.

۲۹

$(“li:hidden”)

تمام عناصر منطبق با <li> را  که پنهان هستند، انتخاب می کند.

۳۰

$(“:radio”)

همه دکمه های رادیویی در فرم را انتخاب می کند.

۳۱

$(“:checked”)

تمام checked box ها را در فرم انتخاب می کند.

۳۲

$(“:input”)

تنها عناصر فرم  (input, select, textarea, button) را انتخاب می کند.

۳۳

$(“:text”)

تنها عناصر text را انتخاب می کند.  (input[type = text])

۳۴

$(“li:eq(2)”)

سومین عنصر<li>  را انتخاب می کند.

۳۵

$(“li:eq(4)”)

پنجمین عنصر<li>  را انتخاب می کند.

۳۶

$(“li:lt(2)”)

تمام عناصر منطبق با عنصر <li> در قبل از یک سوم؛ به عبارت دیگر، دو تا اولین عناصر <li>را انتخاب می کند.

۳۷

$(“p:lt(3)”)

انتخاب تمام عناصر منطبق با <p> قبل از یک چهارم؛ به عبارت دیگر سه  عنصر<p>  اول را انتخاب می کند.

۳۸

$(“li:gt(1)”)

تمام عناصر منطبق با <li> بعد از یک دوم را انتخاب می کند.

۳۹

$(“p:gt(2)”)

تمام عناصر منطبق با <p> بعد از یک سوم را انتخاب می کند.

۴۰

$(“div/p”)

تمام عناصر منطبق با <p> را که فرزندان عنصر همسان با  <div> می باشد را انتخاب می کند.

۴۱

$(“div//code”)

تمام عناصر منطبق با <code> را که فرزندان عنصر همسان با <div>هستند را انتخاب می کند.

۴۲

$(“//p//a”)

تمام عناصر منطبق با <A> را که فرزندان عنصر منطبق با <p> هستند را انتخاب می کند.

۴۳

$(“li:first-child”)

تمام منطبق با <li> را  که فرزند اول والدشان هستند را انتخاب می کند.

۴۴

$(“li:last-child”)

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

۴۵

$(“:parent”)

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

۴۶

$(“li:contains(second)”)

تمام عناصر منطبق با <li> را که حاوی متن second هستند را انتخاب می کند.

شما می توانید تمام انتخابگرهای بالا را  با هر عنصر HTML / XML به روش  عمومی استفاده کنید. به عنوان مثال اگر انتخابگر (“li:first”)$ بر روی عنصر <li>  عمل کند پس (“p:first”)$ نیز برروی عنصر <p> عمل خواهد کرد.

برچسب ها

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

0 دیدگاه در “آموزش جی کوئری – قسمت دوم – selectors”

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کد امنیتی را در کادر زیر بنویسید *

به ما بپیوندید