Spread the love

لغة JQuery تعتبر لغة جافا سكريبت وهي أصبحت رئيسية الان فى كل صفحات الإنترنت

مميزات الجيكويري هي

  • جافاسكريبت تعمل فى أي متصفح وعلى أي جهاز
  • مكتبة جافاسكريبت تعمل سريعا على تغيير الستايل CSS
  • هي تغير حالة مكونات الصفحة من HTML
  • هي تستطيع إرسال أوامر أجاكس AJAX

لكي تفهم هذا الدرس من الأفضل مراجعة باقي الدروس

تعلم لغة HTML

تعلم لغة الجافاسكريبت Javascript

هنا سنستطيع تغيير بعض أجزاء صفحة عن طريق الجي كويري

1- ضع مكتبة الجيكويري فى الصفحة HTML

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
</head>
2- سوف نكتب كل صفحة ال HTML
تحتوي على أزرار لإظهار وإخفاء مكونات الصفحة

<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“#hide”).click(function(){
$(“p”).hide();
});
$(“#show”).click(function(){
$(“p”).show();
});
});
</script>
</head>
<body>

<p>If you click on the “Hide” button, I will disappear.</p>

<button id=”hide”>Hide</button>
<button id=”show”>Show</button>

</body>
</html>

3- الشرح

لاحظ بداية كود الجافسكريبت ثم يبداء كتابة الجيكويري

هذا البلوك أو السطر يعني بداية عمل الكود داخلة بعد تحميل الصفحة

$(document).ready(function(){

لاتنسى إغلاق هذا البلوك بهذا الشكل

});

ثم لا تنسى إغلاق كود الجافا سكريبت كما تعلمنا سابقا بهذا الشكل

</script>

4- هذا كود الجيكويري لإظهار المكون

$(“p”).show();

أو إخفائة هذا الجزء من الصفحة بهذا الكود

$(“p”).hide();

5- هذا السطر يعني ان هذا البلوك يعمل عند الضغط على الزر

$(“#show”).click(function(){

أيضا لا تنسى إغلاق البلوك

});

تستطيع ممارسة هذا الكود هنا

See the Pen
JQuery 1
by MobyEgy (@mobyegy)
on CodePen.

او من خلال هذا اللنك

الرابط https://codepen.io/mobyegy/pen/KJdPzZ

Leave a Reply

Your email address will not be published. Required fields are marked *