آموزش jquery لیست رویدادها events list قسمت نهم

لیست رویدادها ( events ) در jQuery :
در این بخش به معرفی مهمترین و پرکاربردترین رویدادهای زبان jQuery می پردازیم . در بخش قبل گفتیم رویدادها اتفاقاتی هستند که بر روی عناصر موجود در صفحات وب انجام می شوند مثل کلیک کردن و یا عبور موس از روی آن . شما می توانید کدهای مورد نظر خود را طوری طراحی کنید که پس از اجرای یک رویداد خاص اجرا شوند .
لیست زیر شامل مهمترین رویدادهای jQuery می باشد . برای دریافت اطلاعات و مشاهده مثال های عملی روی نام هر کدام کلیک نمایید :
blur- این رویداد زمانی اتفاق می افتد که عنصر مورد نظر فوکوس برنامه را از دست می دهد .
change-این رویداد زمانی اتفاق می افتد که در عنصر مورد نظر تغییری ایجاد می شود .
click- این رویداد زمانی اتفاق می افتد که کاربر بر روی عنصر مورد کلیک می نماید .
dblclick- این رویداد زمانی اتفاق می افتد که کاربر بر روی عنصر مورد دابل کلیک می نماید .
focus- این رویداد زمانی اتفاق می افتد که عنصر مورد فوکوس برنامه را در اختیار می گیرد .
focusin- این رویداد زمانی اتفاق می افتد یک عنصر زیر مجموعه ( child object ) از عنصر مورد نظر فوکوس برنامه را در اختیار می گیرد .
focusout- این رویداد زمانی اتفاق می افتد یک عنصر زیر مجموعه ( child object ) از عنصر مورد نظر فوکوس برنامه را از دست می دهد .

مثال : در مثال زیر یک نمونه کد نوشته شده با syntax بالا را نشان داده ایم . در این کد در هنگام کلیک ( event ) بر روی دکمه فرمان ( selector ) ، تگ پاراگراف ( کد تابع و متد آن ) مخفی می شود :

< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ ("button") . click ( function( ){
          $ ( " p " ) . hide( );
          });
        });
 
    </script>
  </head>
<body>
    <p>  example paragraph . click to hide it ! </p>
    <button> Click me</button>
</body>
</html> 

رویداد ( ) click در jQuery :
رویداد click زمانی اتفاق می افتد که کاربر بر روی عنصر مورد نظر کلیک نماید . با این رویداد برای مثال می توان کدی طراحی کرد که در هنگام کلیک کاربر بر روی یک عنصر رنگ پس زمینه آن عوض شده و یا عنصر مخفی شود .
شکل کلی استفاده از این متد به شرح زیر است :

$ ( " selector " ).click ( function ( ) { ... some code ... } ;

 توضیح هر یک از موارد syntax :
selector-selector کنترلی است که کاربر بر روی آن کلیک می کند .
function- این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود .  

مثال :

$ ( " :p " ).click ( function ( ) { ... some code } ; 

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

< 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 مخفی می شود . برای مشاهده خروجی روی عبارت خروجی مثال کلیک نمایید :

< 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> 

 رویداد ( ) blur در jQuery :
رویداد blur در jQuery زمانی اتفاق می افتد که کنترل یا عنصر مورد نظر فوکوس * برنامه را از دست می دهد . می تولنید کدها و توابع مورد نظر خود را طوری طراحی کنید که در هنگام رخ دادن این رویداد ، اجرا شوند .
* توضيح فوکوس ( focus ) : در هر لحظه کنترلی که در يک صفحه يا فرم ، انتخاب شده است و به دور آن کادر قرار گرفته به اصطلاح فوکوس برنامه را در اختيار دارد . کنترلی که انتخاب شود ، فوکوس را به دست آورده و کنترلی که از انتخاب خارج شود ، فوکوس را از دست می دهد .
شکل کلی استفاده از این متد به شرح زیر است :
     $ ( " selector " ).focus ( function ( ) { ... some code ... } ;
 توضیح هر یک از موارد syntax :

selector :

selector عنصر مورد نظری است که فوکوس برنامه را از دست می دهد . مثل یک کادر ورود متن که پس از پرکردن آن توسط کاربر و کلیک بر روی چیزی دیگر ، فوکوس را از دست می دهد .

function :

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

 $ ( " :input " ).focus ( function ( ) { ... some code } ; 

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

< html >
   < head >
     < script type="text/javascript" src="jquery.js" > < /script >
     < script type="text/javascript" >
       $ (document). ready ( function( ) {
         $ (" # Txt1 ") . blur ( function( ){
           $ ( " # Txt1 " ) . css( " background-color " , " Gray " );
           });
         }); 
     </script> 
   </head>
 <body>
     Enter Your Name :   < input id="Txt1" type="text" />
 </body>
 </html> 

 رویداد ( ) change در jQuery :

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

 $ ( " selector " ).change ( function ( ) { ... some code ... } ; 

توضیح هر یک از موارد syntax :

selector- selector کنترلی است که کاربر آن را تغییر می دهد .  
( ) function- این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود .

 $ ( " :input " ).change ( function ( ) { ... some code } ; 

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

< html >
   < head >
     < script type="text/javascript" src="jquery.js" > < /script >
     < script type="text/javascript" >
       $ (document). ready ( function( ) {
         $ (" # Txt1 ") . change ( function( ){
           $ ( " # Txt1 " ) . css( " background-color " , " Gray " );
           });
         }); 
     </script> 
   </head>
 <body>
     Enter Your Name :   < input id="Txt1" type="text" />
 </body>
 </html> 

 رویداد ( ) focus در jQuery :
رویداد focus زمانی اتفاق می افتد که کنترل یا عنصر مورد نظر فوکوس برنامه را به دست آورد . یک کنترل یاعنصر زمانی که انتخاب شده و یا به واسطه فشردن متوالی کلید Tab ، مرورگر بر روی آن متمرکز می شود ، فوکوس برنامه را در اختیار می گیرد . می توان کدهایی طراحی کرد که مثلا رنگ پس زمینه یک کادر دریافت متن در هنگام در اختیار گرفتن فوکوس تغییر نماید .
شکل کلی استفاده از این متد به شرح زیر است :

Syntax     $ ( " selector " ).focus ( function ( ) { ... some code ... } ;

توضیح هر یک از موارد syntax :

selector- selector کنترل یا عنصری است که فوکوس برنامه را به دست می آورد .  
( ) function- این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود .

$ ( " :input " ).foucs ( function ( ) { ... some code } ;

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

< html >
   < head >
     < script type="text/javascript" src="jquery.js" > < /script >
     < script type="text/javascript" >
       $ (document). ready ( function( ) {
         $ (" :input ") . click ( function( ){
           $ ( this ) . css( " background-color " , " Gray " );
           });
         }); 
     </script> 
   </head>
 <body>
      < input type="text" id="Text1" size="10" />
      < input type="text" id="Text2" size="10" />  
 </body>
 </html> 

نمونه ای از آخرین کارهای ما

آموزش jquery لیست رویدادها events list قسمت نهمReviewed by Goolexacom on Mar 24Rating: 5.0آموزش jquery لیست رویدادها events listآموزش jquery لیست رویدادها events list

دیدگاهتان را بنویسید

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

اگر ربات نیستی جواب بده *

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت