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

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

فأول درس من دورة 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>
                                                        
                                                    

دروس ذات صلة

JQ

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

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


JQ

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

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


JQ

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

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


JQ

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

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


JQ

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

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


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...