انواع انتخاب کننده ها در jQuery

انواع انتخاب کننده ها در jQuery :

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

انتخاب خود عنصر جاری : این کد باعث می شود عنصر جاری انتخاب شود .

Syntax $ ( this )
انتخاب بر حسب نوع کلی عنصر : این کد باعث می شود تا تمام عناصر از نوع < p > ( پاراگراف ) انتخاب شود .

Syntax $ ( "p" )

انتخاب بر حسب کلاس ( class ) عنصر : این کد باعث می شود تا کلیه عناصری که از نوع پاراگراف بوده و جزءکلاس text هستند ، انتخاب شوند .

Syntax

$ ( "p.text" )

انتخاب بر حسب شناسه ( Id ) عنصر : این کد باعث می شود تا عنصری که شناسه انحصاری ( id ) آن در صفحه برابر مقدار text است ، انتخاب شود .

Syntax $ ( "#text" )

انتخاب یک تگ با استفاده از محتویات متنی درون آن: : با استفاده از این کد می توانید یک واژه یا متن را تعیین کرده و عنصر یا عنصرهایی را انتخاب کنید ، که آن کلمات در آنها وجود داشته باشند . برای مثال می خواهید از بین پاراگراف های موجود در یک صفحه پاراگرافی را انتخاب کنید که واژه PHP در آن به کار رفته است .

Syntax

$( "نام عنصر : contains ( متن مورد نظر) " )
example : $( " p : contains ( PHP ) " )

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

< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ ("button") . click ( function( ){
          $ ( " p:contains (PHP)" ) . hide();
          });
        });
    </script>
  </head>
<body>
  < p > Java Script is a client side programing language < /p >
  < p > PHP is a server side programing language < /p >
    <button> Click me</button>
</body>
</html>

Java Script is a client side programing language

PHP is a server side programing language

انتخاب عناصر بر حسب خواص آنها و مقدارشان : این کد باعث می شود تا تمام عناصری که دارای خاصیت href در دورن تگ خودشان هسنتد، انتخاب شوند .

Syntax

$ ( "[href]" )

: این کد باعث می شود تا تمام عناصری که مقدار خاصیت href آنها برابر با مقدار # است، انتخاب شوند .

Syntax

$ ( "[href]=jQuery;#jQuery; " )

: این کد باعث می شود تا تمام عناصری که مقدار خاصیت href آنها برابر با مقدار # نیست، انتخاب شوند .

Syntax

$ ( "[href] ! =jQuery;#jQuery; " )

: این کد باعث می شود تا تمام عناصری که مقدار خاصیت href آنها با مقدار jpg به پایان می رسد ، انتخاب شوند .

Syntax

$ ( "[href$='.jpg']" )

انتخاب عناصر بر اساس مکان و یا ترتیب قرار گیری آنها: این کد باعث می شود تا آیتم < li > اول لسیت < ol > موجود در صفحه انتخاب شود .

Syntax

$ ( "ol li:first" )

در مثال زیر این مسئله را به صورت عملی نشان می دهیم . در این مثال یک لیست ترتیبی با 3 آیتم داریم . کدی طراحی کردیم که با اجرا شدن آن ، فونت آیتم اول به صورت bold در خواهد آمد . برای اجرای دستور بر روی دکمه فرمان کلیک کنید :

Example
< html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ ("button") . click ( function( ){ $ ( " ol li:first " ) . css( "font-weight","bold" ) ); }); }); </script> </head> <body> < ol > < li > HTML < /li > < li > CSS < /li > < li > Java Script < /li > < /ol > <button> Click me</button> </body> </html>	کد
HTML CSS Java Script	خروجی

انتخاب تمام تگ های هدر موجود در صفحه : : این کد باعث می شود تا تمام تگ های هدر ( h1 تا h6 ) موجود در صفحه انتخاب شود .

Syntax

$( " : header " )

مثال : در مثال زیر روش استفاده از کد بالا را به شما نشان داده ایم . فرض کنید دو تا تگ هدر در صفحه وجود دارد . کدی طراحی کردیم که در هنگام اجرا تمام تگ های هدر موجود در صفحه را انتخاب کرده و رنگ آنها را به آبی تغییر می دهد :

< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ ("button") . click ( function( ){
          $ ( " : header " ) . css( "color","Blue" ) );
          });
        });
    </script>
  </head>
<body>
  < h1 > HTML < /h1 >
  < h4 > Java Script < /h4 >
    <button> Click me</button>
</body>
</html>

HTML

Java Script

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

Syntax

$( " نوع عنصر:first " )
example : $( " p:first " )

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

< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ ("button") . click ( function( ){
          $ ( " p : first " ) . css( "font-family","Arial" ) );
          });
        });
    </script>
  </head>
<body>
  < p > HTML < /p >
  < p > Java Script < /p >
    <button> Click me</button>
</body>
</html>

HTML

Java Script

انتخاب آخرین نمونه از یک نوع تگ در صفحه : : این کد باعث می شود تا آخرین نمونه موجود از یک تگ در صفحه انتخاب شود . در واقع در کد و مثال های قبلی کافی است واژه کلیدی first را به last تبدیل کنید .

Syntax

$( " نوع عنصر:last " )
example : $( " p:last " )

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ... >>>>> ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :
بلهخیر

نام :
آدرس Email :

نظر شما :

سوال امنیتی : جمع سه + پنج چنده ؟