أساسيات الأحداث في jQuery

<button id="myButton">انقر هنا</button>

<script>
$(document).ready(function() {
    $("#myButton").click(function() {
        alert("تم النقر على الزر!");
    });
});
</script>

$("#myButton").on("click", function() {
    console.log("تم النقر على الزر باستخدام .on()");
});

// حدث النقر
$(".box").on("click", function() {
    $(this).css("background-color", "var(--primary)");
});

// حدث النقر المزدوج
$(".box").on("dblclick", function() {
    $(this).css("background-color", "red");
});

// دخول/خروج الماوس
$(".box").on("mouseenter", function() {
    $(this).addClass("hover");
}).on("mouseleave", function() {
    $(this).removeClass("hover");
});

$(".box").hover(
    function() {
        // دخول الماوس
        $(this).css("opacity", "0.8");
    },
    function() {
        // خروج الماوس
        $(this).css("opacity", "1");
    }
);

// الطريقة 1 (كاملة)
$(document).ready(function() {
    // الكود الخاص بك هنا
});

// الطريقة 2 (مختصرة)
$(function() {
    // الكود الخاص بك هنا
});

// الطريقة 3 (دالة سهمية ES6)
$(() => {
    // الكود الخاص بك هنا
});

<button class="btn">زر 1</button>
<button class="btn">زر 2</button>
<button class="btn">زر 3</button>

<script>
$(".btn").on("click", function() {
    // "this" هو عنصر الزر DOM الذي تم النقر عليه
    // $(this) يحوله إلى كائن jQuery
    $(this).css("background-color", "green");
    $(this).text("تم النقر!");
});
</script>

$("#myElement")
    .on("mouseenter", function() {
        $(this).addClass("highlight");
    })
    .on("mouseleave", function() {
        $(this).removeClass("highlight");
    })
    .on("click", function() {
        $(this).toggleClass("active");
    });

// إزالة جميع أحداث النقر
$("#myButton").off("click");

// إزالة معالج محدد
function myHandler() {
    console.log("تم النقر");
}

$("#myButton").on("click", myHandler);
$("#myButton").off("click", myHandler);

// إزالة جميع الأحداث
$("#myButton").off();

<div class="counter">
    <button id="decrease">-</button>
    <span id="count">0</span>
    <button id="increase">+</button>
    <button id="reset">إعادة تعيين</button>
</div>

$(document).ready(function() {
    let count = 0;

    $("#increase").on("click", function() {
        count++;
        $("#count").text(count);
    });

    $("#decrease").on("click", function() {
        count--;
        $("#count").text(count);
    });

    $("#reset").on("click", function() {
        count = 0;
        $("#count").text(count);
    });
});