آموزش jquery قسمت دهم کار با Event Object ها
0 0

آموزش jquery قسمت دهم کار با Event Object ها


آموزش jquery قسمت دهم کار با Event Object ها

در این قسمت از آموزش jquery به مفهوم کلیک (click) در jquery می پردازیم.

تابع Click

این تابع زمانی که روی عنصری انتخابی کلیک شود اجرا می شود.

در مثال زیر برای اینکه به مشخصات یک عنصر مانند مکان عنصر انتخابی ، نوع Event و... دسترسی داشته باشیم از یک function با ورودی eventArgs داخل تابع click استفاده کردیم

نکته:

در اینجا شما به جای eventArgs هر چیزی دیگری می توانید بنویسید.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>iranganj</title>
    <script src="jquery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("div").click(function (eventArgs) {
                $(this).html("pageX:" + eventArgs.pageX + ",pageY:" + eventArgs.pageY + ", type:" + eventArgs.type + ", target:" + eventArgs.target);
            });
        })
    </script>
</head>
<body>
    <div>click iranganj</div>
</body>
</html>

مثال دیگر از تابع click

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>iranganj</title>
    <script src="jquery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("body").click(function () {
                alert("Clicked On Body");
            });
            $("div").click(function () {
                alert("Clicked On Div");
            });
        });
    </script>
</head>
<body>
    <div>click iranganj</div>
</body>
</html>

تابع one

این تابع فقط یک بار برای هر عنصر انتخابی اجرا می شود و تابع click را داخل آن پیداه سازی کردیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>iranganj</title>
    <script src="jquery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $("div").one("click", function () {
                $(this).css({ background: "red", cursor: "auto" });
            });
        });
    </script>
    <style type="text/css">
        div {
            margin: 5px;
            background-color: blueviolet;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>click iranganj</div>
    <div>click iranganj</div>
    <div>click iranganj</div>
</body>
</html>

دانلود

نویسنده حسین فتحی
گروه مطلب Jquery
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۱ خرداد ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

این صفحه را می‌پسندم