رویدادها در جی کوئری

در مقاله قبل ، بطور مختصر درباره تولید و تغییر محتوای یک صفحه وب توسط append و prepend صحبت کردیم . در این مقاله می خواهیم بطور اجمالی  رویدادها (events) در جی کوئری را مورد بررسی قرار دهیم .

 

بعنوان مثال وقتی موس از روی یک div با id=example کنار می رود (Mouse Over) یک رویداد رخ داده است . به مثال ساده زیر دقت کنید :

در این مثال می خواهیم رویدادهای MouseMove و MouseLeave را پیاده سازی کنیم .

یک فایل html جدید بنام events ایجاد کنید و کتابخانه جی کوئری را نیز به آن اضافه کنید .

کد های زیر را به بخش head و بعد از رفرنس کتابخانه جی کوئری اضافه کنید :

استایل زیر را بنویسید:

                              
        #example {
            height:300px;
            width:300px;
            border:2px outset red;
        }

اسکریپت زیر را بنویسید:

                              
        $("document").ready(function () {
            $("#example").on("mousemove", OnMouseMove);
            $("#example").on("mouseleave",OnMouseLeave);
        });
        function OnMouseMove() {
            $("#example").html("Mouse In !");
        }
        function OnMouseLeave() {
            $("#example").html("Mouse Out !");
        }

و سپس تگ div زیر را در body صفحه اضافه کنید :

                              
    

 توضیح : ابتدا به باکس با آیدی example عرض و طول و حاشیه داده ایم و سپس در script ، رویدادهای Mouse Leave و Mouse Move را صدا زده ایم و در نهایت در بدنه صفحه ، div با آیدی example را تعریف کرده ایم .

در مقاله بعد ، درباره مبحث جذاب انیمیشن (animation) در جی کوئری صحبت می کنیم .


تاریخ انتشار : ۲۳ فروردین ۱۳۹۵



دیدگاه ها :