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


فهاد الجزء الثاني من دورة jquery  للمبتدئين غادي نكملو الدورة ديالنا غادي نشوفوا المزيد من selectors غادي نشوفوا كيفاش نسترجعوا جميع مكونات الملف وايضا كيفاش نسترجعوا عنصر من واحد liste وغيرها.


1- ل * SELECTOR ف JQUERY

ف selector * كيمكني باش نسترجع les tags كاملين فالمثال لي عندنا زدنا h3 مع ل paragraphe منبعد ب jquery استرجعناهم كاملين بنجمة وزدنا ل fonction لي كتمكن من اخفاء الجميع الكود لي زدنا هو :

                                <!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">
        <h3>Dcoding</h3>
        <p id="title" class="title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, accusamus cum repudiandae aperiam blanditiis tenetur, nulla, ipsum in sit eligendi voluptate laborum deserunt. Aliquid esse eveniet totam nostrum quisquam vitae.</p>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("*").hide();
        });
    </script>
</body>
</html>
                            

2- استرجاع أول عنصر من liste

فالمثال لي عندنا زدنا liste فسبق درنا هاشي فدورة bootstrap للمبتدئين منبعد ف jquery code كنسترجع ul منبعد li وب : كنحدد first يعني أول عنصر وزدنا ل fonction لي كتمكن من اخفاء أول li الكود لي زدنا هو :

                                <!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">
        <ul class="list-group col-md-6 mx-auto mt-3">
            <li class="list-group-item">Taza</li>
            <li class="list-group-item">Casa</li>
            <li class="list-group-item">Fes</li>
            <li class="list-group-item">Oujda</li>
        </ul>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("ul li:first").hide();
        });
    </script>
</body>
</html>
                            

3- استرجاع رابط من DOM

 فالمثال لي عندنا زدنا رابط  للكود السابق فباش نسترجع الرابط كنزيد لكود jquery لي فيه كنحدد الروابط لي عندهم href  وزدنا ل fonction لي كتمكن من اخفاء الرابط الكود لي زدنا هو :

                                <!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">
        <a href="#" class="btn btn-link">dcoding</a>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("[href]").hide();
        });
    </script>
</body>
</html>
                            

4- استرجاع رابط معين

فباش نسترجع واحد الرابط معين زدنا رابط اخر عطيناه فل href index.html منبعد فلكود jquery كنسترجع فقط الرابط لي ف href ديالو index.html وزدنا ل fonction لي كتمكن من اخفاء الرابط الكود لي زدنا هو :

                                    <!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">
        <a href="#" class="btn btn-link">dcoding</a>
        <a href="index.html" class="btn btn-link">index</a>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("a[href='index.html']").hide();
        });
    </script>
</body>
</html>
                                

5- استرجاع input type button

فباش نسترجع واحد ل input لي type ديالها bouton كنزيد ل input منبعد فل code jquery كنسترجعها وزدنا ل fonction لي كتمكن من اخفاء ل 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>Bootstrap Course</title>
</head>
<body>
    <div class="container">
        <a href="#" class="btn btn-link">dcoding</a>
        <a href="index.html" class="btn btn-link">index</a>
        <input type="button" value="valider" class="btn btn-primary">
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(":button").hide();
        });
    </script>
</body>
</html>