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


فهاد الدرس الثامن من  دورة jquery غادي نشوفوا نفس les méthodes لي شفنا فالجزء السابق ولكن هاد المرة غادي نستعملوهم فتعديل المحتوى ديال واحد ل élément لي اختاريناه.


1- استعمال ل MÉTHODE TEXT ف JQUERY لتغيير المحتوى

فل  méthode text شفنا قبل كيفاش استرجعنا بها المحتوى ديال un élément دبا غادي نشوفوا كيفاش نغيروا المحتوى فالمثال لي عندنا :
- احتفظنا بنفس الكود السابق فملي كنكليكي على ل bouton كانسترجع لمحتوى ديال h3 وبين القوسين كنعطي texte الجديد لي بغيت يتعرض.
هنا بدلنا من DCoding ل bonjour الكود لي زدنا هو :

                                <!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>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 mt-2">
                <h3>DCoding</h3>
                <button id="btn">click</button>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('#btn').click(function(){
                $('h3').text('bonjour');
            });
        });
    </script>
</body>
</html>
                            

2- استعمال ل MÉTHODE html ف JQUERY لتغيير المحتوى

فل méthode html كنغير بها المحتوى texte وhtml فالمثال لي عندنا :
- احتفظنا بنفس الكود السابق فملي كنكليكي على ل bouton كانسترجع لمحتوى ديال h3 وبين القوسين كنعطي ل html الجديد لي بغيت يتعرض.
هنا زدنا فالوسط span مع class د bootstrap الكود لي زدنا هو :

                                <!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>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 mt-2">
                <h3>DCoding</h3>
                <button id="btn">click</button>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('#btn').click(function(){
                $('h3').html(`
                    <span class="text text-danger">DCoding</h3>
                `);
            });
        });
    </script>
</body>
</html>
                            

3- استعمال ل MÉTHODE attr ف JQUERY لتغيير المحتوى

فل méthode attr كنغير بها المحتوى ديال attribut هنا اختارينا رابط فكنغير ماشي texte وإنما فين غادي يدي الرابط  يعني ل attribut href فالمثال لي عندنا :
- زدنا رابط فل href عطيناه كيدي ل google منبعد بالكود jquery رديناه كيدي ل facebook كيف كنشوف فالصورة :

                                <!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>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 mt-2">
                <a href="googlr.com" id="link">google.com</a>
                <button id="btn">click</button>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('#btn').click(function(){
                $("#link").attr("href", "https://www.facebook.com");
            });
        });
    </script>
</body>
</html>