دليلك السهل في تعلم استخدام مكتبة jQuery [ الدرس الأول]

JavaScript Ajax أضف تعليق

بسم الله الرحمن الرحيم والصلاة والسلام على محمد واله وصحبه اجمعين

قبل ان نبدأ درسنا اود ان تعرف انك بحاجة الى معرفة مسبقة باستخدام اوامر جافاسكريبت لأن المكتبة مبنية عليها
كذلك معرفة اوامر html/xhtml css ولو القليل .. اذا وجدت نفسك على دراية بما ذكرت فكمل معي هذه الدروس والا خذ لك فكرة عن هذه المكتبة واذهب لتعلم الأمور التي ذكرتها وارجع :) اسف غلى هذا الكلام ولكن هذا لمصلحتك عزيزي المتعلم
المكتبة عبارة عن دوال واوامر تختصر عليك الكثير من الوقت والجهد كذلك فيها مميزات رائعة
تستطيع اضافة تأثيرات جميلة على صفحتك ومعالجة احداث الصفحة بالمتصفح  بسهولة ودون معالجتها بالخادم لما يستغرق من وقت ...

يمكنك تحميل المكتبة من موقعها الرسمي www.jQuery.com وقم بتحميل اخر اصدار من المكتبة

الاصدار الحالي عند وقت كتابة هذا الدرس هو 1.2.6

ملاحظة : اضغط على PLAIN TEXT ليظهر الكود بشكل واضح

عند بداية استخدام المكتبة يتوجب عليك دائما اضافة المكتبة وكتابة امر قراءة الملف بالكامل سأشرح هذه النقطة بعد الكود

HTML:
  1. <html>
  2. <head>
  3. <title>تجربة استخدام مكتبة jQuery</title>
  4. <script type="text/javascript src="jquery.js"></script>
  5. <script type="text/javascript>
  6. $(document).ready(function(){
  7. // هنا اوامر المكتبة
  8. });
  9. </script>
  10. </head>
  11. <body>
  12. </body>
  13. </html>

معنى قراءة الملف بالكامل لان المكتبة تقوم بمعالجة الأحداث  عن طريق ID
سأشرح الفكرة

بالجافاسكريبت نقوم بمعالجة حدث click

HTML:
  1. <html>
  2. <head>
  3. <title>تجربة جافاسكريبت</title>
  4. <script type="text/javascript>
  5. myfunc(){
  6. alert('السلام عليكم');
  7. }
  8. </script>
  9. </head>
  10. <body>
  11. <span onClick="myfunc('السلام عليكم')">اضغط هنا</span>
  12. </body>
  13. </html>
  14. [/php]
  15. بمكتبة jQuery
  16.  
  17. [php]
  18. <html>
  19. <head>
  20. <title>تجربة استخدام مكتبة jQuery</title>
  21. <script type="text/javascript src="jquery.js"></script>
  22. <script type="text/javascript>
  23. $(document).ready(function(){
  24. $("#test").click(function(){
  25. alert('السلام عليكم');
  26. });
  27. // هنا اوامر المكتبة
  28. });
  29. </script>
  30. </head>
  31. <body>
  32. <span id="test">اضغط هنا</span>
  33. </body>
  34. </html>

ركز على وسم span اصبح نظيف
هذا مثال بسيط جدا ربما لا يقنعك باستخدام المكتبة ولكن ما سيأتي سيبهرك ...

مثال عن اخفاء واظهار نص بشكل جميل

سأستخدم الحدث click

HTML:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>تجربة استخدام مكتبة jQuery</title>
  5. <style type="text/css">
  6. div{
  7. text-align:right;
  8. margin: 100px 100px;
  9. padding: 10px 10px;
  10. background-color:silver;
  11. }
  12. </style>
  13. <script type="text/javascript" src="jquery.js"></script>
  14. <script type="text/javascript">
  15. $(document).ready(function(){
  16.  
  17. $("#show").click(function(){
  18. $("#mydiv").show('fast');
  19. });
  20.  
  21. $("#hide").click(function(){
  22. $("#mydiv").hide('fast');
  23. });
  24.  
  25. });
  26. </script>
  27. </head>
  28. <body>
  29.  
  30. <div><span id="hide" style="color:red">  اخفاء</span>
  31. <span id="show" style="color:#22a822">  اظهار</span></div>
  32. <div id="mydiv">
  33. بسم الله الرحمن الرحيم
  34. <br />
  35. والصلاة والسلام على محمد وعلى اله وصحبه اجمعين
  36. </div>
  37. </body>
  38. </html>

للتجربة الحية

هذا فان اخطأت فمن نفسي ومن الشيطان وان اصبت فمن الله عز وجل

لا يسمح اطلاقا بنقل الدرس بدون ذكر المصدر بشكل واضح

4 عدد التعليقات على “دليلك السهل في تعلم استخدام مكتبة jQuery [ الدرس الأول]”

  1. ناصح يعلق:

    أخي الفاضل.. أبدئ أولا بشكرك على الدرس الرائع ..لكن ما أود الاشارة اليه في التعليق لا يتعلق بالدرس وليس له علاقة بالبرمجة ..الحقيقة أريد لفت انتباهك لموضوع خطير قد لا تلقي له بالا ولا توليه اهتماما أو بالأحرى أنك غافل عنه ..الأمر أخي يخص بعض اعلانات غوغل أدسنس تعرض مواقع تنصيرية أو تبشيرية في صفحات موقعك …و كما سبق ان ذكرت فالموضوع جدي للغاية ولا يحتمل الــتأجيل ..فالازم أن تسرع بحذف هذه الاعلانات من لوحة التحكم الخاصة بك في غوغل أدسنس قبل أن يتحول موقعك من منبر تعليمي الى معول هدم و أداة تدمير .

  2. عبد الواحد البشيري يعلق:

    بارك الله فيك اخي
    اشكر فيك حبك لدينك
    اخي الكريم انا وضعت عدة مواقع في الفلتر اي لا يظهرون في الاعلانات

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

    الاعلانات لحد الأن لم استفد منها ماديا …..

    ربما لاحقا امسحها !!

  3. عبد الله يعلق:

    هذا الموقع قد يفيذكم في تعلم html css php java
    مشكور أخي البشيري على هذه التدوينة
    http://apprendre.uuuq.com

  4. محسن بن عبد الله يعلق:

    بارك الله فيك اخي عبد الواحد
    مكتبة رائعة
    و كنت اعتقد ان استخدامها معقد
    لكن اكتشفت بان الامر ليس بهذه الصعوبة
    جزاك الله عنا خيرا

أضف تعليق.

مدونة مبرمج مغربي © 2010 WP Theme & Icons by N.Design Studio | b4udecide | تعريب قياسي
التدويناتRSS | التعليقاتRSS | تسجيل الدخول