تماس با ما

موبایل: 2565 038 0912

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

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


رویداد ( ) 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>

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

 $ ( " 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> 


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

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

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, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

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