تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


لیست رویدادها ( 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> 


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, بازی, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین