بسم الله الرحمن الرحيم والصلاة والسلام على محمد واله وصحبه اجمعين
قبل ان نبدأ درسنا اود ان تعرف انك بحاجة الى معرفة مسبقة باستخدام اوامر جافاسكريبت لأن المكتبة مبنية عليها
كذلك معرفة اوامر html/xhtml css ولو القليل .. اذا وجدت نفسك على دراية بما ذكرت فكمل معي هذه الدروس والا خذ لك فكرة عن هذه المكتبة واذهب لتعلم الأمور التي ذكرتها وارجع 
اسف غلى هذا الكلام ولكن هذا لمصلحتك عزيزي المتعلم
المكتبة عبارة عن دوال واوامر تختصر عليك الكثير من الوقت والجهد كذلك فيها مميزات رائعة
تستطيع اضافة تأثيرات جميلة على صفحتك ومعالجة احداث الصفحة بالمتصفح بسهولة ودون معالجتها بالخادم لما يستغرق من وقت ...
يمكنك تحميل المكتبة من موقعها الرسمي www.jQuery.com وقم بتحميل اخر اصدار من المكتبة
الاصدار الحالي عند وقت كتابة هذا الدرس هو 1.2.6
ملاحظة : اضغط على PLAIN TEXT ليظهر الكود بشكل واضح
عند بداية استخدام المكتبة يتوجب عليك دائما اضافة المكتبة وكتابة امر قراءة الملف بالكامل سأشرح هذه النقطة بعد الكود
-
<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>
معنى قراءة الملف بالكامل لان المكتبة تقوم بمعالجة الأحداث عن طريق ID
سأشرح الفكرة
بالجافاسكريبت نقوم بمعالجة حدث click
-
<html>
-
<head>
-
<title>تجربة جافاسكريبت</title>
-
<script type="text/javascript>
-
myfunc(){
-
alert('السلام عليكم');
-
}
-
</script>
-
</head>
-
<body>
-
<span onClick="myfunc('السلام عليكم')">اضغط هنا</span>
-
</body>
-
</html>
-
[/php]
-
بمكتبة jQuery
-
-
[php]
-
<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>
ركز على وسم span اصبح نظيف
هذا مثال بسيط جدا ربما لا يقنعك باستخدام المكتبة ولكن ما سيأتي سيبهرك ...
مثال عن اخفاء واظهار نص بشكل جميل
سأستخدم الحدث click
-
<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>
هذا فان اخطأت فمن نفسي ومن الشيطان وان اصبت فمن الله عز وجل
لا يسمح اطلاقا بنقل الدرس بدون ذكر المصدر بشكل واضح
19 ديسمبر, 2008 في الساعة 9:05 م
أخي الفاضل.. أبدئ أولا بشكرك على الدرس الرائع ..لكن ما أود الاشارة اليه في التعليق لا يتعلق بالدرس وليس له علاقة بالبرمجة ..الحقيقة أريد لفت انتباهك لموضوع خطير قد لا تلقي له بالا ولا توليه اهتماما أو بالأحرى أنك غافل عنه ..الأمر أخي يخص بعض اعلانات غوغل أدسنس تعرض مواقع تنصيرية أو تبشيرية في صفحات موقعك …و كما سبق ان ذكرت فالموضوع جدي للغاية ولا يحتمل الــتأجيل ..فالازم أن تسرع بحذف هذه الاعلانات من لوحة التحكم الخاصة بك في غوغل أدسنس قبل أن يتحول موقعك من منبر تعليمي الى معول هدم و أداة تدمير .
20 ديسمبر, 2008 في الساعة 10:04 م
بارك الله فيك اخي
اشكر فيك حبك لدينك
اخي الكريم انا وضعت عدة مواقع في الفلتر اي لا يظهرون في الاعلانات
لو كانت لديك قائمة بالمواقع التنصيرية او المخلة بالأدب ارجوك ضعها في هنا وانا سأضيفها الى الفلتر وامسحها من التعليق
الاعلانات لحد الأن لم استفد منها ماديا …..
ربما لاحقا امسحها !!
8 سبتمبر, 2009 في الساعة 1:15 ص
هذا الموقع قد يفيذكم في تعلم html css php java
مشكور أخي البشيري على هذه التدوينة
http://apprendre.uuuq.com
7 فبراير, 2010 في الساعة 3:09 م
بارك الله فيك اخي عبد الواحد
مكتبة رائعة
و كنت اعتقد ان استخدامها معقد
لكن اكتشفت بان الامر ليس بهذه الصعوبة
جزاك الله عنا خيرا