البرمجة بلغة jQuery

لنبدأ هذه الرحلة مع JQUERY ونقدم لك التعريفات الأولية التى توفر لك المعلومات اللازمة لتبدأ المشوار وذلك من خلال النقاط التالية :

- مقدمة عن لغة JQUERY .
- مزايا لغة JQUERY .
- الأدوات المستعملة .
- طرق كتابة أوامر JQUERY .


تطوير صفحات الإنترنت

الشكل التالى يصف لنا المهارات المختلفة التى تدور حول تصميم وتطوير صفحات وتطبيقات الإنترنت مع تحديد وظيفة كل أداة :

تطوير صفحات الانترت


مراجعة سريعة JavaScript

بالطبع فى هذه المرحلة من المفترض أن لديك خلفية عن البرمجة باستعمال JavaScript ، وحتى إن لم يكن لديك تلك الخبرة يمكنك الاعتماد على كورس جافا سكريبت 2020 من خلال منصة إيزيتى التعليمية .


ما هي تقنية JQUERY ؟

هى عبارة عن مجموعة من القواعد لإعداد تنسيقات وتصميمات صفحات الإنترنت بطريقة سهلة وسريعة تحقق خاصية إعادة الاستخدام Re-usability .


إمكانيات JQUERY

تعتبر JQUERY مجموعة من الأوامر والدوال المكتوبة باستخدام JavaScript والتى توفر عليك الكثير فى برمجة موقع الإنترنت حيث توفر عليك إعادة كتابة هذه الدوال بسهولة فى التعامل مع مكونات صفحة الإنترنت وإضافة تأثيرات jQuery Effects وبرمجة عناصر صفحة الإنترنت وعمل انعاش Refresh واستخدام AJAX ، وهى توفر الكثير من الوقت حيث تم إنشاء مجموعة الدوال Functions مرة واحدة واستخدامها أكثر من مرة .


ما الفرق بين JQUERY و HTML ؟

ملفات HTML تستخدم لإعداد محتويات صفحات الإنترنت ، أما JQUERY فهي تستخدم لإضافة تصميم لهذه المحتويات وتنسيق صفحاتها وألوانها.

قام (تيم بيرنرز لي) باختراع شبكة الويب وكانت HTML تستخدم فقط فى عرض النصوص وذلك باستخدام مجموعة علامات "تاجات" HTML مثل <h1> و<p> ، ومع انتشار شبكة الويب بدأ الطلب عن إضافة تصميم جيد للمستندات ولتحقيق ذلك قام مبرمجو المتصفحات - نيتكسيب ومايكروسوفت - باختراع علامات HTML جديدة مثل <font> .

وقد ابتكرتJQUERY لأنها توفر للمصممين طرقاً فعالة وعملية لإنشاء التصميمات وهى مدعومة من قبل جميع المتصفحات ، والفصل بين شكل الصفحة ومحتوياتها يبسط عملية إدارة الموقع بشكل كبير.


كيف تعمل تقنية JQUERY؟

تعال نتعلم أساسيات JQUERY وما هي العلامات اللازمة لتستخدم JQUERY في وثيقة HTML، تشبه الكثير من خصائص JQUERY تلك علامات JavaScript داخل مستند HTML، لذلك يساعدكHTML فى تعلم JQUERY بسهولة .


طرق استعمال JQUERY

استعمال المكتبة من خلال الموقع :

https://jquery.com/download

حيث يمكنك عمل Download للمكتبة وحفظها على جهازك واستعمالها فى مشاريعك .

استعمال المكتبة من خلال الإشارة إلى الموقع :

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1

يمكن الإشارة الى ملف مكتبة jQuery بشرط تكون متصل بالإنترنت ولا يحتاج ذلك الى عمل تنزيل للملف وبالتالى ستعمل دوال مكتبة jQuery وكأنها موجودة لديك ويتضح ذلك من المثال التالى :

<!DOCTYPE html>

<html>

<head>

</script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

</script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Click me</button>

</body>

</html>

قم بكتابة هذه السطور وحفظها فى ملف ثم قم بفتح هذا الملف فى مستعرض ملفات الإنترنت Browser تحصل على النتيجة التالية :

Jquery Code


عمل Download لمكتبة Jquery واستعمالها

يمكن تحميل مكتبة البوتستراب Bootstrap من خلال العنوان الموقع www.jQuery.com تحصل على الصفحة الرسمية كما فى الشكل التالى :

Jquery Download

تلاحظ وجود ملفين للمكتبة :

الأول هو ملف المكتبة المضغوط :

Download the compressed, production jQuery 3.3.1

وهو الملف الذى يحتوى على جميع الدوال ولكن الملف غير منسق ولا يحتوى على توضيح لاعمال الدوال فقط للاستخدام

الثانى هو ملف المكتبة الغير مضغوط :

Download the uncompressed, development jQuery 3.3.1

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

وعند عمل تنزيل لملف مكتبة jQuery ستعمل دوال مكتبة jQuery لانها موجودة لديك ويتضح ذلك من المثال التالى :

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256"/>

<title>jQueryEx01</title>

<script type="text/javascript" src="resources/js/jquery-3.3.1.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Click me</button>

</body>

</html>

قم بكتابة هذه السطور وحفظها فى ملف ثم قم بفتح هذا الملف فى مستعرض ملفات الإنترنت Browser ثم الضغط على زر الأمر تلاحظ اختفاء النصوص و تحصل على النتيجة التالية :

Jquery heading


طرق التعامل مع عناصر الصفحة element Selector

يمكن الإشارة الى عناصر الصفحة من نصوص وصور وأدوات Buttons,Text,.. بأكثر من طريقة كما يلى:

استخدام id Selector :

يمكن التعامل مع أى عنصر برمجيا بالإشارة إلى id الخاص به ويتضح ذلك من المثال التالى :

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256"/>

<title>jQueryEx01</title>

<script type="text/javascript" src="resources/js/jquery-3.3.1.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("#t1").hide();

});

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p id="t1">This is a paragraph.</p>

<p id="t2">This is another paragraph.</p>

<button>Click me</button>

</body>

</html>

قم بكتابة هذه السطور وحفظها فى ملف ثم قم بفتح هذا الملف فى مستعرض ملفات الإنترنت Browser تحصل على النتيجة التالية :

Jquery ID Selector

استخدام class :

يمكن التعامل مع أى عنصر برمجيا بالإشارة الى class الخاص به ويتضح ذلك من خلال المثال التالى :

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256"/>

<title>jQueryEx01</title>

<script type="text/javascript" src="resources/js/jquery-3.3.1.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$(".t1").hide();

});

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p class="t1">This is a paragraph.</p>

<p id="t2">This is another paragraph.</p>

<button>Click me</button>

</body>

</html>

قم بكتابة هذه السطور وحفظها فى ملف ثم قم بفتح هذا الملف فى مستعرض ملفات الإنترنت Browser تحصل على النتيجة التالية :

jquery class

استخدام النوع Type :

يمكن التعامل مع أى عنصر برمجيا بالإشارة الى النوع Type الخاص به وبالتالى تنفذ العمليات على جميع العناصر من هذا النوع وستضح ذلك من المثال التالى :

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256"/>

<title>jQueryEx01</title>

<script type="text/javascript" src="resources/js/jquery-3.3.1.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("button").hide();

});

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p class="t1">This is a paragraph.</p>

<p id="t2">This is another paragraph.</p>

<button>Click me</button>

<button>Click me</button>

<button>Click me</button>

<button>Click me</button>

<button>Click me</button>

</body>

</html>

قم بكتابة هذه السطور وحفظها فى ملف ثم قم بفتح هذا الملف فى مستعرض ملفات الإنترنت Browser تحصل على النتيجة التالية :

jquery type

استخدام this :

يمكن استعمال الكلمة المحجوزة this للاشارة الى نفس العنصر الذى نكتب بداخله الاكواد لتنفيذ الاكواد عليه كما فى السطور التالية :

<!DOCTYPE html>

<html>

<head>

<script>

$(document).ready(function(){

$("button").click(function(){

$(this).hide();

});

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Click me</button>

</body>

</html>

اختيار جميع العناصر :

يمكن اختيار جميع عناصر الصفحة والتعامل معها ببساطة باستعمال التعبير $("*")

ويتضح ذلك كما فى المثال التالى :

<!DOCTYPE html>

<html>

<head>

<script>

$(document).ready(function(){

$("button").click(function(){

$("*").hide();

});

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Click me</button>

</body>

</html>

قم بكتابة هذه السطور وحفظها فى ملف ثم قم بفتح هذا الملف فى مستعرض ملفات الإنترنت Browser تحصل على النتيجة التالية :

jquery select all

أحداث الصفحة jQuery Event Methods

تحتوى صفحة html على مجموعة من الاحداث التى يمكن برمجتها باستخدام jQuery نبدأ ذلك كما يلى :

الحدث Click :

ينفذ الحدث عند النقر على العنصر ويتضح ذلك من المثال التالى :

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256"/>

<title>jQueryEx01</title>

<script type="text/javascript" src="resources/js/jquery-3.3.1.min.js"></script>

<script>

$(document).ready(function(){

$("p").click(function(){

$(this).hide();

});

});

</script>

</head>

<body>

<p>If you click on me, I will disappear.</p>

<p>Click me away!</p>

<p>Click me too!</p>

</body>

</html>

قم بكتابة هذه السطور وحفظها فى ملف ثم قم بفتح هذا الملف فى مستعرض ملفات الإنترنت Browser تحصل على النتيجة التالية :

jquery click event

الحدث mouseenter :

ينفذ الحدث عند دخول حيز العنصر مثل إظهار رسالة أو إخفائها ويتضح ذلك من المثال التالى :

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256"/>

<title>jQueryEx01</title>

<script type="text/javascript" src="resources/js/jquery-3.3.1.min.js"></script>

<script>

$(document).ready(function(){

$("#p1").mouseenter(function(){

alert("You entered p1!");

});

});

</script>

</head>

<body>

<p id="p1">Enter this paragraph to show a message.</p>

</body>

</html>

قم بكتابة هذه السطور وحفظها فى ملف ثم قم بفتح هذا الملف فى مستعرض ملفات الإنترنت Browser تحصل على النتيجة التالية :

jquery mouse enter event

الحدث hover :

ينفذ هذا الحدث عند دخول حيز العنصر والتحرك فوق العنصر ويتضح ذلك من المثال التالى :

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256"/>

<title>jQueryEx01</title>

<script type="text/javascript" src="resources/js/jquery-3.3.1.min.js"></script>

<script>

$(document).ready(function(){

$("#p1").hover(function(){

alert("You entered p1!");

},

function(){

alert("Bye! You now leave p1!");

});

});

</script>

</head>

<body>

<p id="p1">This is a paragraph.</p>

</body>

</html>

قم بكتابة هذه السطور وحفظها فى ملف ثم قم بفتح هذا الملف فى مستعرض ملفات الإنترنت Browser تحصل على النتيجة التالية :

jquery hover event

الحدث focus :

ينفذ هذا الحدث عند التركيز علىالعنصر أى وضع مؤشر الماوس بداخله ويتضح ذلك من المثال التالى :

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256"/>

<title>jQueryEx01</title>

<script type="text/javascript" src="resources/js/jquery-3.3.1.min.js"></script>

<script>

$(document).ready(function(){

$("input").focus(function(){

$(this).jQuery("background-color", "#cccccc");

});

$("input").blur(function(){

$(this).jQuery("background-color", "#ffffff");

});

});

</script>

</head>

<body>

Name: <input type="text" name="fullname"><br>

Email: <input type="text" name="email">

</body>

</html>

قم بكتابة هذه السطور وحفظها فى ملف ثم قم بفتح هذا الملف فى مستعرض ملفات الإنترنت Browser تحصل على النتيجة التالية :

jquery focus event

الحدث on :

ينفذ هذا الحدث عند التركيز على العنصر أى وضع مؤشر الماوس بداخله ويتضح ذلك من المثال التالى :

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256"/>

<title>jQueryEx01</title>

<script type="text/javascript" src="resources/js/jquery-3.3.1.min.js"></script>

<script>

$(document).ready(function(){

$("p").on("click", function(){

$(this).hide();

});

});

</script>

</head>

<body>

<p>If you click on me, I will disappear.</p>

<p>Click me away!</p>

<p>Click me too!</p>

</body>

</html>

قم بكتابة هذه السطور وحفظها فى ملف ثم قم بفتح هذا الملف فى مستعرض ملفات الإنترنت Browser تحصل على النتيجة التالية :

jquery on event

هذه كانت مجرد مقدمة سريعة للتعرف على لغة jquery وبعض امكانياتها ، ويمكن الالتحاق بالكورس كاملا من خلال منصة إيزيتى التعليمية عند الضغط هنا .