بسم الله الرحمن الرحيم والصلاة والسلام على محمد واله وصحبه اجمعين
قبل ان نبدأ درسنا اود ان تعرف انك بحاجة الى معرفة مسبقة باستخدام اوامر جافاسكريبت لأن المكتبة مبنية عليها
كذلك معرفة اوامر html/xhtml css ولو القليل .. اذا وجدت نفسك على دراية بما ذكرت فكمل معي هذه الدروس والا خذ لك فكرة عن هذه المكتبة واذهب لتعلم الأمور التي ذكرتها وارجعاسف غلى هذا الكلام ولكن هذا لمصلحتك عزيزي المتعلم
المكتبة عبارة عن دوال واوامر تختصر عليك الكثير من الوقت والجهد كذلك فيها مميزات رائعة
تستطيع اضافة تأثيرات جميلة على صفحتك ومعالجة احداث الصفحة بالمتصفح بسهولة ودون معالجتها بالخادم لما يستغرق من وقت ...
يمكنك تحميل المكتبة من موقعها الرسمي jQuery: The Write Less, Do More, JavaScript Library وقم بتحميل اخر اصدار من المكتبة
الاصدار الحالي عند وقت كتابة هذا الدرس هو 1.2.6
عند بداية استخدام المكتبة يتوجب عليك دائما اضافة المكتبة وكتابة امر قراءة الملف بالكامل سأشرح هذه النقطة بعد الكود
معنى قراءة الملف بالكامل لان المكتبة تقوم بمعالجة الأحداث عن طريق IDكود HTML:<html> <head> <title>تجربة استخدام مكتبة jQuery</title> <script type="text/javascript src="jquery.js"></script> <script type="text/javascript > $(document).ready(function(){ // هنا اوامر المكتبة }); </script> </head> <body> </body> </html>
سأشرح الفكرة
بالجافاسكريبت نقوم بمعالجة حدث click
بمكتبة jQueryكود HTML:<html> <head> <title>تجربة جافاسكريبت</title> <script type="text/javascript > myfunc(){ alert('السلام عليكم'); } </script> </head> <body> <span onClick="myfunc('السلام عليكم')">اضغط هنا</span> </body> </html>
ركز على وسم span اصبح نظيفكود HTML:<html> <head> <title>تجربة استخدام مكتبة jQuery</title> <script type="text/javascript src="jquery.js"></script> <script type="text/javascript > $(document).ready(function(){ $("#test").click(function(){ alert('السلام عليكم'); }); // هنا اوامر المكتبة }); </script> </head> <body> <span id="test">اضغط هنا</span> </body> </html>
هذا مثال بسيط جدا ربما لا يقنعك باستخدام المكتبة ولكن ما سيأتي سيبهرك ...
مثال عن اخفاء واظهار نص بشكل جميل
سأستخدم الحدث click
للتجربة الحيةكود HTML:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>تجربة استخدام مكتبة jQuery</title> <style type="text/css"> div{ text-align:right; margin: 100px 100px; padding: 10px 10px; background-color:silver; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" > $(document).ready(function(){ $("#show").click(function(){ $("#mydiv").show('fast'); }); $("#hide").click(function(){ $("#mydiv").hide('fast'); }); }); </script> </head> <body> <div><span id="hide" style="color:red"> اخفاء</span> <span id="show" style="color:#22a822"> اظهار</span></div> <div id="mydiv"> بسم الله الرحمن الرحيم <br /> والصلاة والسلام على محمد وعلى اله وصحبه اجمعين </div> </body> </html>
هذا فان اخطأت فمن نفسي ومن الشيطان وان اصبت فمن الله عز وجل
لا يسمح اطلاقا بنقل الدرس بدون ذكر المصدر بشكل واضح
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة عبد الواحد البشيري 
