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

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

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

 

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

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

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

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

<style>

        #example {

            height:300px;

            width:300px;

            border:2px outset red;

        }

    </style>

    <script type="text/javascript">

        $("document").ready(function () {

            $("#example").on("mousemove", OnMouseMove);

            $("#example").on("mouseleave",OnMouseLeave);

        });

        function OnMouseMove() {

            $("#example").html("Mouse In !");

        }

        function OnMouseLeave() {

            $("#example").html("Mouse Out !");

        }

    </script>

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

<div id="example">

    </div>

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

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


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



دیدگاه ها :