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


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


1- إضافة jquery لل projet

ف jquery هو واحد ل bibliothèque javascript لي كتمكن باش نزيد code javascript للموقع ديالي بطريقة مختصرة وسريعة فالشعار ديال jquery هو whrite less do more يعني كودي أكثر كتب أقل.
باش نزيدو فل projet ديالي كنمشي للموقع الرسمي من هنا وكنطيليشارجيه وكتزيدو كأي ملف javascript فالملف index.html كاين ل production لي خاصة بالمواقع لي en ligne و développement لي خاصة بالتجريب.
او ممكن تخدم ب cdn وداكشي لي غادي ندير أنا فزدت cdn ولكن خص تكون عندك connexion internet الكود لي زدت هو : 

                                <!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>
    
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
                            

2- البنية الأساسية لملف jquery

فل code jquery بحال javascript دائما كيكون بين script tags فباش نبدا ننفذ لكود jquery لازم ما DOM يكون واجد ف DOM هو document object model لي بكل بساطة هو ل fichier ديالك.
وباش نحدد هادشي كاين واحد ل event سميتو document.ready لي كيعني بلي document ديالي واجد وفوسطو كتكون ل fonction لي غادي تنفذ.
فالمثال لي عندنا كنزيد ل event من بعد فقط كنعرض رسالة hello كيف كنشوف فالصورة :


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

                                <!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>
    
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            alert('hello');
        });
    </script>
</body>
</html>
                            

3- كيفاش نخدم ب selectors ف jquery

ف selectors كيمكنوني باش ن sélectionner واحد tag اولا class عندي ف document ديالي فالمثال لي عندنا زدنا p tag لي منبعد يلا بغيت نسترجعها :
- كنستعمل $ لي كتعني بلي غادي sélectionner شي حاجة وبين "" كنعطي اسم الحاجة لي بغيت هنا عطيناه p.
- منبعد لأقواس كنحدد ل fonction لي غادي تنفذ هنا عطيناه hide ولي كتمكن باش نخفي ل p. 
فيلا درتي actualiser ل la page غادي تلقى ل paragraphe invisible.
الكود لي زدنا هو :

                                <!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">
        <p>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(){
            $("p").hide();
        });
    </script>
</body>
</html>
                            

4- ل id selector ف jquery

ل id selector ف jquery كيمكني باش نسترجع واحد tag بل id ديالها فالمثال لي عندنا زدنا ل id text لل paragraphe منبعد استرجعناه ب jquery.
فل id كنحددو بهاد الرمز # بحال ف css راه سبق وشفنا هادشي منبعد لأقواس كنحدد ل fonction لي غادي تنفذ هنا عطيناه hide ولي كتمكن باش نخفي ل p. 

فيلا درتي actualiser ل la page غادي تلقى ل paragraphe invisible.
الكود لي زدنا هو :

                                    <!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">
        <p id="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(){
            $("#title").hide();
        });
    </script>
</body>
</html>
                                

5- ل class selector ف jquery

ل class selector ف jquery كيمكني باش نسترجع واحد tag بل class ديالها فالمثال لي عندنا زدنا ل class text لل paragraphe منبعد استرجعناه ب jquery.
فل class كنحددها بالنقطة . بحال ف css راه سبق وشفنا هادشي منبعد لأقواس كنحدد ل fonction لي غادي تنفذ هنا عطيناه hide كيف شفنا قبل.
الكود لي زدنا هو :

                                    <!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">
        <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(){
            $(".title").hide();
        });
    </script>
</body>
</html>