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


فهاد الدرس الحادي عشر من دورة jquery للمبتدئين غادي نشوفوا حاجة جديدة غادي نشوفوا كيفاش نزيدو des classes css أو نحيدو des classes css ل des éléments ب des méthodes jquery جداد.


1- استعمال ل MÉTHODE addClass ف JQUERY

فل méthode addClass كتمكن من إضافة class css ل élément فالمثال لي عندنا :
زدنا h3 منبعد بالكود jquery زدنا ل class text-danger لي هي ديال bootstrap 4 ل 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">
    <link rel="stylesheet" href="style.css">
    <title>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="main">
            <h3>DCoding</h3>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('h3').addClass('text-danger');
        });
    </script>
</body>
</html>
                            

2- استعمال ل MÉTHODE removeClass ف JQUERY

فل méthode removeClass كتمكن من إزالة class css ل élément فالمثال لي عندنا :
زدنا bouton منبعد استرجعناه ب jquery فاش كنكليكي عليه كنحيد ل class text-danger ل 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">
    <link rel="stylesheet" href="style.css">
    <title>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="main">
            <h3>DCoding</h3>
            <button id="btn" class="btn btn-danger">click</button>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('h3').addClass('text-danger');
            $('#btn').on('click',function(){
                $('h3').removeClass('text-danger');
            });
        });
    </script>
</body>
</html>
                            

3- استعمال ل MÉTHODE toggleClass ف JQUERY

فل méthode toggleClass كتمكن من إزالة class css ل élément يلا كانت عندو أو إضافتها يلا مكانتش فالمثال لي عندنا :
احتفظنا بنفس الكود السابق فقط بدلنا ل méthode ديال ل bouton من removeClass ل toggleClass.
ملي كنكليكي على ل bouton كانت ل class text-danger كتحيدها مكانتش كتزيدها ل 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">
    <link rel="stylesheet" href="style.css">
    <title>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="main">
            <h3>DCoding</h3>
            <button id="btn" class="btn btn-danger">click</button>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('h3').addClass('text-danger');
            $('#btn').on('click',function(){
                $('h3').toggleClass('text-danger');
            });
        });
    </script>
</body>
</html>
                            

4- استعمال ل MÉTHODE css ف JQUERY

فل méthode css كتمكن من إضافة css ل élément فالمثال لي عندنا :
احتفظنا بنفس الكود السابق واستخدمنا ل méthode css باش زدنا ل h3 الكود css لي كيبدل اللون ديالو للأحمر.
فيمكنلك تخدم ب les classes css لي كتعرف بنفس الطريقة.
الكود لي زدنا هو :

                                    <!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">
    <link rel="stylesheet" href="style.css">
    <title>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="main">
            <h3>DCoding</h3>
            <button id="btn" class="btn btn-danger">click</button>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('h3').css('color','red');
        });
    </script>
</body>
</html>