آموزش jquery رویداد ready قسمت یازدهم

رویداد ( ) ready در jQuery :
رویداد ( ) ready در یک صفحه وب زمانی اتفاق می افتد که شی DOM به طور کامل لود شده و همچنین صفحه نیز به طور کامل لود شده باشد ( حتی تصاویر آن ) .
به دلیل اینکه رویداد ( ) ready پس از لود شدن کامل صفحه اتفاق می افتد ، مکان مناسبی برای قرار دادن کدها و توابع jQuery است .
شما می توانید رویدادها و توابعی که می خواهید به محض تمام شدن عملیات load صفحه ، اجرا شوند را در این تابع قرار دهید .
شکل کلی استفاده از این متد به شرح زیر است :

$ ( document ).ready ( function ) ;
یا
می توان بدون به کار بردن نام سند بر روی صفحه جاری نیز ، تابع را اجرا نمود .
$ ( function ) ;

توضیح syntax
document - این پارامتر تعیین کننده صفحه یا سندی است که می خواهیم تابع در آن اجرا شود . مقدار documnet به صفحه جاری اشاره دارد .
( ) function- نام تابعی است که می خواهیم به محض لود شدن صفحه ، اجرا شود .

مثال : در مثال های قبلی آموزش jQuery ، این رویداد را همواره به کار برده ایم . به این مثال نیز دقت نمایید . در رویداد 8 ، تابعی را تعیین کرده ایم که به محض لود شدن صفحه ، اجرا خواهد شد :

< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
           $(document).ready(function () {
                   $("button").click(function () {
                           $("#p1").slideToggle();
                    });
             });
    </script>
  </head>
<body>
     <p id="p1"> This is a paragraph.</p> 
     <button> برای اجرا تابع کلیک کنید</button>
</body>
</html> 

 رویداد ( ) resize در jQuery :
رویداد ( ) resize زمانی اتفاق می افتد که اندازه پنجره مرورگر تغییر نماید .
رویداد ( ) resize هم می تواند باعث تغییر اندازه پنجره مرورگر شده و یا اینکه در هنگام نغییر اندازه آن ، تابع تعیین شده را اجرا نماید .
شکل کلی استفاده از این متد به شرح زیر است :

$ ( " selector " ).resize ( ) ;
یا
$ ( " selector " ).resize ( function ) ;

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

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

 < html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
          x = 0;
         $(document).ready(function () {
                 $(window).resize(function () {
                        $("span").text(x += 1);
                 });
         });
    </script>
  </head>
<body>
     <p> بار <span id="Span1"> 0 </span> تغییر اندازه مرورگر </p>
</body>
</html>

 رویداد ( ) scroll در jQuery :
رویداد ( ) scroll زمانی اتفاق می افتد که کاربر در یک عنصر صفحه ، عمل scroll ( بالا و پایین رفتن ) را انجام دهد .
این رویداد برای تمام عناصری که دارای خاصیت scroll هستند ، مثل صفحه ( window , textarea و ... ) وجود دارد .
رویداد 8 هم می تواند باعث scroll یک عنصر شده و یا اینکه در هنگام scroll آن عنصر ، یک تابع تعیین شده را اجرا نماید . شکل کلی استفاده از این متد به شرح زیر است :

$ ( " selector " ).scroll ( ) ;
یا
$ ( " selector " ).scroll ( function ) ;

 توضیح syntax
selector- این پارامتر ، تعیین کننده id عنصری است که عمل scroll بر روی آن انجام می شود .
( ) function- این پارامتر تابعی را تعیین می کند که می خواهیم در هنگام scroll عنصر مورد نظرمان اجرا شود .

مثال : در مثال زیر یک عنصر div با srollbar قرار داده ایم . هر بار که شما عمل scroll را بر روی آن انجام دهید ، تابعی اجرا شده و مقدار یک متغیر را افزایش می دهد . برای مشاهده خروجی مثال ، تگ div را scroll کنید :

< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
          x = 0;
         $(document).ready(function () {
                 $(#div1).scroll(function () {
                        $("#span1").text(x += 1);
                 });
         });
    </script>
  </head>
<body>
   <div style="border: 1px solid black; width: 200px; height: 100px; overflow: scroll;" id="div1">
         رویداد ( ) scroll زمانی اتفاق می افتد که کاربر در یک عنصر صفحه ، عمل scroll ( بالا و پایین رفتن ) را انجام دهد . 
         این رویداد برای تمام عناصر که دارای خاصیت scroll هستند ، مثل صفحه ( window , textarea و ... ) وجود دارد .
         رویداد 8 هم می تواند باعث scroll یک عنصر شده و یا اینکه در هنگام scroll آن عنصر ، یک تابع تعیین شده را اجرا نماید . شکل کلی استفاده از این متد به شرح زیر است :
   </div>
   <p> Scrolled < span id="span1" > 0 </span > times. < /p >
</body>
</html>

رویداد ( ) select در jQuery :
رویداد ( ) select زمانی اتفاق می افتد که متن موجود در یک کادر متن ( textfield ) یا textarea ، انتخاب شود .
این رویداد دو کار را انجام می دهد :
    باعث بروز و رخ دادن رویداد ( ) select برای یک کادر متن می شود . یعنی همانند این است که متن آن را انتخاب نماییم :

Syntax     $ ( " selector " ).select ( ) ; 

 توضیح syntax
selector- تعیین کننده id عنصری است که می خواهیم متن آن را انتخاب نماییم .

مثال : در مثال زیر یک دکمه فرمان قرار داده ایم . با کلیک بر روی آن تابعی اجرا می شود ، که باعث رخ دادن رویداد ( ) select کنترل کادر متن می شود . رخ دادن این رویداد هم باعث اجرای تابع اول می شود :

< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
         $(document).ready(function () {
               $("#input1").select(function(){
                       $("#input1").after(" Text marked!");
               });
                   $("#btn1").click(function(){
                                $("#input1").select();;
                    });
            });
    </script>
  </head>
<body>
<input id="input1" type="text" value="Hello World">
<p id="p1"> متنی را دورن کادر متن انتخاب کنید</p>
<button id="Btn1"> کلیک نمایید </button>
</body>
</html>

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

$ ( " selector " ).select ( function ) ;

توضیح syntax
selector-تعیین کننده id عنصری است که می خواهیم متن آن را انتخاب نماییم و یا متنش انتخاب می شود .

مثال : در مثال زیر یک کادر متن قرار داده ایم . در صورتی که متن آن را انتخاب نمایید ، رویداد ( ) select آن رخ داده و دستوری را اجرا می کند که یک متن را به صفحه اضافه خواهد کرد :

< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
         $(document).ready(function () {
               $("#input2").select(function () {
                        $("#input2").after(" Text marked!");
            });
    </script>
  </head>
<body>
<input id="input2" type="text" value="Hello World">
<p id="p2"> متنی را دورن کادر متن انتخاب کنید</p>
</body>
</html> 

 رویداد ( ) submit در jQuery :
رویداد ( ) submit زمانی اتفاق می افتد که یک فرم submit شده و به سرور ارسال شود .
برای مثال از رویداد ( ) submit می توان برای صدور یک پیام هشدار به کاربر ، برای اعلام submit شدن فرم استفاده کرد .
نکته مهم : رویداد ( ) submit فقط با تگ form کار می کند .
شکل کلی استفاده از این متد به شرح زیر است :

     $ ( " selector " ).submit ( ) ;
یا
$ ( " selector " ).submit ( function ) ;

توضیح syntax
selector- این پارامتر تعیین کننده id فرمی است که submit شده است .
( ) function- تعیین کننده تابعی است که می خواهیم پس از submit شدن فرم ، اجرا شود .

مثال : در مثال زیر یک فرم طراحی کرده ایم . هنگامی که کاربر با کلیک بر روی دکمه فرمان ، فرم را submit می کند ، یک پیام هشدار مبنی بر ثبت شدن فرم به وی نشان داده شده و سپس فرم به سرور ارسال می شود :

< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
         $(document).ready(function () {
               $("#form1").submit(function(){
                       alert(" فرم ثبت شد ");
                 });
         });
    </script>
  </head>
<body>
   <form action="" id="form1">
            First name:
           <input type="text" name="FirstName" value="Ali"><br>
           Last name:
           <input type="text" name="LastName" value="Rezaee"><br>
           <input type="submit" value="Submit">
   </form>
</body>
</html>

رویداد ( ) unload در jQuery :
رویداد ( ) unload زمانی اتفاق می افتد که  کاربر از صفحه جاری خارج می شود . برای مثال یکی ار استفاده های جالب این رویداد ، می تواند صدور یک پیام خداحافظی برای کاربر در زمانی که می خواهد صفحه را ببندد ، باشد .
رویداد ( ) unload در مواقع زیر رخ می دهد :
    کلیک کاربر بر روی لینکی که باعث خروج از صفحه جاری و رفتن به صفحه دیگری می شود .
    یک آدرس جدید در نوار آدرس مرورگر نوشته شده و کلید Enter را بزنید .
    کلیدهای forward ( رفتن به جلو ) و backward ( رفتن به عقب ) را در مرورگر کلیک نمایید .
    پنجره جاری مرورگر بسته شود .
    صفحه مجدد لود و فراخوانی شود .
رویداد ( ) unload ، می تواند کد یا تابعی را در زمانی که صفحه جاری بسته می شود ، اجرا نماید .
شکل کلی استفاده از رویداد ( ) unload به صورت زیر است :

$( selector ).unload( function ) ;

 توضیح syntax
( ) function- این پارامتر تعیین کننده تابعی است که می خواهیم در هنگام رخ دادن رویداد ( ) unload ، اجرا شود .
 چند نکته :
نکته 1 : رویداد ( ) unload فقط بایستی با شی window به کار برود .
نکته 2 : رویداد ( ) unload ممکن است در مرورگر های مختلف ، عملکرد متفاوتی داشته باشد . آن را در مرورگرهای مورد نظر خود تست نمایید .
مثال عملی :
در مثال زیر یک تابع را تعیین کرده ایم که در هنگام ، خروج از صفحه جاری یک پیام خداحافظی را به کاربر اعلام می نماید . برای مشاهده خروجی از صفحه خارج شوید !! :
مثال :

< html >
   < head >
     < script type="text/javascript" src="jquery.js" > < /script >
     < script type="text/javascript" >
       $ (document). ready ( function( ) {
           $(window).unload(function () {
                alert("به امید دیدار !");
           });
         }); 
     </script> 
   </head>
 <body>
 </body>
 </html> 

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

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

پاسخ دهید

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

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

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

خدمات سایت

سئو

خدمات سایت

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