انواع انتخاب کننده ها در 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 در آن است ، مخفی شود .

Example
< 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>
  • انتخاب عناصر بر حسب خواص آنها و مقدارشان : این کد باعث می شود تا  تمام عناصری که  دارای خاصیت href در دورن تگ خودشان هسنتد، انتخاب شوند .
    Syntax $ ( "[href]" )
  • : این کد باعث می شود تا  تمام عناصری که  مقدار خاصیت href  آنها برابر با مقدار # است، انتخاب شوند .
    Syntax $ ( "[href]=&#3jQuery;#&#3jQuery; " )
  • : این کد باعث می شود تا  تمام عناصری که  مقدار خاصیت href  آنها برابر با مقدار # نیست، انتخاب شوند .
    Syntax $ ( "[href] ! =&#3jQuery;#&#3jQuery; " )
  • : این کد باعث می شود تا  تمام عناصری که  مقدار خاصیت 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>
  • انتخاب تمام تگ های هدر موجود در صفحه : : این کد باعث می شود تا تمام تگ های هدر ( h1 تا h6 ) موجود در صفحه انتخاب شود .
    Syntax $( " : header " )

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

Example
< 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>
  • انتخاب اولین نمونه از یک نوع تگ در صفحه : : این کد باعث می شود تا اولین نمونه موجود از یک تگ در صفحه انتخاب شود .
    Syntax $( " نوع عنصر:first " )
    example : $( " p:first " )

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

Example
< 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>
  • انتخاب آخرین نمونه از یک نوع تگ در صفحه : : این کد باعث می شود تا آخرین نمونه موجود از یک تگ در صفحه انتخاب شود . در واقع در کد و مثال های قبلی کافی است واژه کلیدی first را به last تبدیل کنید .
    Syntax $( " نوع عنصر:last " )
    example : $( " p:last " )

 

تعداد امتیازدهندگان: 5342
مسیر کوتاه: rangine.ir/node/95