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

منذ 5 سنوات imadbelasri Jquery
JQ

فهاد الدرس السابع  من دورة 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>
                                                        
                                                    

دروس ذات صلة

JQ

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

فأول درس من دورة jquery للمبتدئين غادي نشوفوا شنو هو jquery وغادي نشوفوا كيفاش نزيدوه فل projet ديال...


JQ

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

فهاد الجزء الثاني من دورة jquery للمبتدئين غادي نكملو الدورة ديالنا غادي نشوفوا المز...


JQ

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

فهاد الدرس الثالت من دورة jquery للمبتدئين غادي نشوفوا كيفاش نتعاملو مع les événements. فشنو هما  le...


JQ

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

فهاد الدرس الرابع من دورة jquery للمبتدئين غادي نكملو الدورة ديالنا باستكمال المزيد من les...


JQ

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

فهاد الدرس الخامس من دورة jquery للمبتدئين غادي نكملو الدورة ديالنا وغادي ندوزو نشوفوا le...


JQ

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

فهاد الدرس السادس من دورة jquery للمبتدئين غادي نكملوا الدورة ديالنا فهاد الجزء غادي نشوفوا الم...


JQ

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

فهاد الدرس الثامن من دورة jquery غادي نشوفوا نفس les méthodes لي شفنا فالجزء السابق ولكن هاد ا...


JQ

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

فهاد الدرس التاسع من دورة jquery للمبتدئين غادي نشوفوا كيفاش نزيدو des éléments ل document html باست...


JQ

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

فهاد الدرس العاشر من دورة jquery للمبتدئين منبعد ما شفنا فالدرس السابق كيفاش زدنا des élé...


JQ

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

فهاد الدرس الحادي عشر من دورة jquery للمبتدئين غادي نشوفوا حاجة جديدة غادي نشوفوا كيفاش نزيدو des cl...