کتابخانه 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;