رویداد ( ) click در jQuery :
رویداد click زمانی اتفاق می افتد که کاربر بر روی عنصر مورد نظر کلیک نماید . با این رویداد برای مثال می توان کدی طراحی کرد که در هنگام کلیک کاربر بر روی یک عنصر رنگ پس زمینه آن عوض شده و یا عنصر مخفی شود .
شکل کلی استفاده از این متد به شرح زیر است :
| Syntax | $ ( " selector " ).click ( function ( ) { ... some code ... } ; |
توضیح هر یک از موارد syntax :
| syntax توضیح | |
| توضیح | Parameter |
| selector کنترلی است که کاربر بر روی آن کلیک می کند . | selector |
| این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود . | function ( ) |
| Example | $ ( " :p " ).click ( function ( ) { ... some code } ; |
در چند مثال سعی می کنیم تا استفاده از رویداد click را در عمل به شما نمایش دهیم .
مثال : در مثال اول یک پاراگراف داریم . کدی طراحی کرده ایم که در صورتی که کاربر بروی پاراگراف مورد نظر کلیک نماید ، رنگ پس زمینه آن تغییر می کند . برای مشاهده خروجی بر روی پاراگراف کلیک نمایید:
| Example | |
|
< html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ (" # P_1 ") . click ( function( ){ $ ( " # P_1 " ) . css( " background-color " , " Yellow " ); }); }); </script> </head> <body> <p id= "P_1" style = "font-size: medium" > jQuery is a very inteligent way for programming . < /p > </body> </html> |
کد |
مثال : در مثال دوم یک تگ div طراحی کرده ایم که در صورت کلیک کاربر بر روی آن ، با استفاده از متد ( ) hide مخفی می شود . برای مشاهده خروجی روی عبارت خروجی مثال کلیک نمایید :
| Example | |
|
< html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ (" # div_1 ") . click ( function( ){ $ ( " # div_1 " ) . hide ( ); }); }); </script> </head> <body> < div id="div1" style="font-size: medium" border-width: thin; background-color: Lime > In jQuery you can do a lot of things with hmtl elements . <br /> even hide and show them . < /div > </body> </html> |
کد |
