دورة jquery للمبتدئين الدرس الثالت


فهاد الدرس الثالت من دورة jquery للمبتدئين غادي نشوفوا كيفاش نتعاملو مع les événements.
فشنو هما  les événements هما ملي كيكليكي المستخدم على شي bouton او كيحط la souris ديالو على شي tag فهنا كنسترجعوا ل événement وكنفذو واحد ل fonction.
فحنا غادي نشوفوا جميع أنواع  les événements لي ممكن اننا نسترجعوها.


1- إضافة événement لعنصر من DOM

فباش نزيد لعنصر ف DOM événement كيف كنشوف فالمثال لي عندنا زدنا h3 لي منبعد فالكود jquery عطيناه ل événement click يعني ملي المستخدم يكليكي عليه.
منبعد فوسط ل événement زدنا ل fonction لي غادي تنفذ ولي كتخفي ل h3 ف (this)$ كترجع على ل h3.
الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>Bootstrap Course</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 mt-2 mx-auto">
                <h3>DCoding</h3>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('h3').click(function(){
                $(this).hide();
            });
        });
    </script>
</body>
</html>
                            

2- ل événement dblclick ف jquery

فل événement dblclick ف jquery كيمكن باش ننفذ واحد ل fonction ملي لمستخدم يكليكي جوج مرات على واحد tag.
فالمثال لي عندنا احتفضنا بنفس الكود السابق فقط بدلنا ل événement من click ل dblclick فملي كنكليكي جوج مرات على h3 كيختفي. الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>Bootstrap Course</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 mt-2 mx-auto">
                <h3>DCoding</h3>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('h3').dblclick(function(){
                $(this).hide();
            });
        });
    </script>
</body>
</html>
                            

3- ل événement mouseenter ف jquery

فل événement mouseenter ف jquery كيمكن باش ننفذ واحد ل fonction ملي المستخدم كيحط la souris داخل واحد tag.
فالمثال لي عندنا احتفضنا بنفس الكود السابق فقط بدلنا ل événement من dblclick ل mouseenter فملي كندخل la souris للمجال ديال h3 كيختفي.
 الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>Bootstrap Course</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 mt-2 mx-auto">
                <h3>DCoding</h3>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('h3').mouseenter(function(){
                $(this).hide();
            });
        });
    </script>
</body>
</html>
                            

4- ل événement mouseleave ف jquery

فل événement mouseleave ف jquery كيمكن باش ننفذ واحد ل fonction ملي المستخدم كيخرج la souris من داخل واحد tag.
فالمثال لي عندنا احتفضنا بنفس الكود السابق فقط بدلنا ل événement من mouseenter ل mouseleave  فملي كنخرج la souris من المجال ديال h3 كيختفي.
 الكود لي زدنا هو :

                                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>Bootstrap Course</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 mt-2 mx-auto">
                <h3>DCoding</h3>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('h3').mouseleave(function(){
                $(this).hide();
            });
        });
    </script>
</body>
</html>
                                

5- ل événement mousedown ف jquery

فل événement mousedown ف jquery كيمكن باش ننفذ واحد ل fonction ملي المستخدم كيكليكي على la souris سواء الزر الأيمن أو الأيسر ملي تكون فوق tag .
فالمثال لي عندنا احتفضنا بنفس الكود السابق فقط بدلنا ل événement من mouseleave  ل mousedown فملي كنكليكي على la souris سواء الزر الأيمن أو الأيسر فوق h3 كيختفي.
 الكود لي زدنا هو :

                                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>Bootstrap Course</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 mt-2 mx-auto">
                <h3>DCoding</h3>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('h3').mousedown(function(){
                $(this).hide();
            });
        });
    </script>
</body>
</html>