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


فهاد الدرس السابع  من دورة jquery غادي نشوفوا حوايج جداد غادي نشوفوا كيفاش نتعاملو مع DOM لي هو document html ديالنا فغادي نشوفوا كيفاش نسترجعوا المحتوى من واحد ل élément سواء الروابط أو غيرها دائما باستعمال jquery.


1- ل MÉTHODE text ف JQUERY

فل  méthode text ف jquery كتمكن من استرجاع المحتوى ديال واحد ل élément لي هو texte فالمثال لي عندنا :
- احتفظنا بنفس الكود السابق فملي كنكليكي على ل bouton كانسترجع لمحتوى ديال 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>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 mx-auto 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(){
                alert($('h3').text());
            });
        });
    </script>
</body>
</html>
                            

2- ل MÉTHODE html ف JQUERY

فل  méthode html ف jquery كتمكن من استرجاع المحتوى ديال واحد ل élément لي هو html فالمثال لي عندنا :
- احتفظنا بنفس الكود السابق غير زدت فوسط ل h3 span لي فيها texte فملي كنكليكي على ل bouton كانسترجع لمحتوى ديال 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>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 mx-auto mt-2">
                <h3><span>DCoding</span></h3>
                <button id="btn">click</button>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('#btn').click(function(){
                alert($('h3').html());
            });
        });
    </script>
</body>
</html>
                            

3- ل MÉTHODE val ف JQUERY

فل  méthode val ف jquery كتمكن من استرجاع القيمة ديال واحد ل input فالمثال لي عندنا :
- زدنا حقل input text عطيناه id field منبعد ملي كنكليكي على ل bouton كنسترجع القيمة لي دخلت فيه وكنعرضها فميساج كيف كنشوف فالصورة :



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

                                <!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">
                <input type="text" id="field" class="form-control">
                <button id="btn">click</button>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('#btn').click(function(){
                alert($('#field').val());
            });
        });
    </script>
</body>
</html>
                            

4- ل MÉTHODE attr ف JQUERY

فل  méthode attr ف jquery كتمكن من استرجاع القيمة ديال واحد ل attribut فالمثال لي عندنا :
- زدنا رابط عطيناه id link منبعد ملي كنكليكي على ل bouton كنسترجع القيمة لي فل href ديال الرابط وكنعرضها فميساج كيف كنشوف فالصورة :



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

                                    <!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="google.com" id="link" class="btn-link">google</a>
                <button id="btn">click</button>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('#btn').click(function(){
                alert($('#link').attr("href"));
            });
        });
    </script>
</body>
</html>