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


فهاد الدرس الرابع من دورة jquery للمبتدئين غادي نكملو الدورة ديالنا باستكمال المزيد من les événements كيف شفنا فالجزء السابق فغادي نشوفوا  كيفاش ملي نحطوا la souris فوق واحد tag تنفذ fonction والمزيد.


1- ل ÉVÉNEMENT mouseup ف JQUERY

فل événement mouseup ف jquery كيمكن باش ننفذ واحد ل fonction ملي لمستخدم كيكليكي ويطلق من الزر سواء الأيمن أو الأيسر ديال la souris فاش كتكون فوق واحد tag.
فالمثال لي عندنا احتفضنا بنفس الكود السابق فقط بدلنا ل événement من mousedown
ل mouseup فملي كنكليكي ونطلق من الزر سواء الأيمن أو الأيسر ديال 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').mouseup(function(){
                $(this).hide();
            });
        });
    </script>
</body>
</html>
                            

2- ل ÉVÉNEMENT hover ف JQUERY

فل événement hover ف jquery كيمكن باش ننفذ واحد ل fonction ملي لمستخدم كيحط la souris فوق واحد tag.
فالمثال لي عندنا احتفضنا بنفس الكود السابق فقط بدلنا ل événement من mouseup 
ل hover فملي كنحط 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').hover(function(){
                $(this).hide();
            });
        });
    </script>
</body>
</html>
                            

3- ل ÉVÉNEMENT focus ف JQUERY

فل événement focus ف jquery عندو علاقة بالحقول فالمثال لي عندنا زدنا input عطيناها id input منبعد فالكود jquery كنسترجعها بل id.
منبعد فل événement focus يعني ملي كنحط la souris داخل الحقل كيتعرض message كيف كنشوف فالصورة:



هذا هو ل focus هو ملي كتحط la souris داخل الحقل.
الكود لي زدنا هو :

                                <!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">
                <input type="text" class="form-control" name="" id="input">
            </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(){
            $('#input').focus(function(){
                alert('bonjour');
            });
        });
    </script>
</body>
</html>
                            

4- ل ÉVÉNEMENT blur ف JQUERY

فل événement blur ف jquery هو عكس ل focus فهو كينفذ fonction ملي كنخرج la souris من الحقل.
فالمثال لي عندنا احتفظنا بنفس الكود السابق فقط بدلنا ل événement من focus ل blur ملي كنحط cursor خارج الحقل كيتعرض message كيف كنشوف فالصورة:


الكود لي زدنا هو :

                                    <!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">
                <input type="text" class="form-control" name="" id="input">
            </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(){
            $('#input').blur(function(){
                alert('bonjour');
            });
        });
    </script>
</body>
</html>
                                

5- ل fonction on ف JQUERY

فل ل fonction on ف jquery كتمكني باش نزيد événement واحد أو أكثر لواحد tag .
فالمثال لي عندنا زدنا ل tag h3 ل fonction on لي فوسطها زدنا ل h3 جوج ديال les événements ل mouseenter ول mouseleave.
فملي كنحط la souris فوق ل h3 كيولي اللون حمر وملي كنخرج 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').on({
                mouseleave : function(){
                    $(this).css('color','green');
                },
                mouseenter : function(){
                    $(this).css('color','red');
                }
            });
        });
    </script>
</body>
</html>