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

عبد الواحد البشيري · 16-12-2008, 06:53 PM

بسم الله الرحمن الرحيم والصلاة والسلام على محمد واله وصحبه اجمعين
قبل ان نبدأ درسنا اود ان تعرف انك بحاجة الى معرفة مسبقة باستخدام اوامر جافاسكريبت لأن المكتبة مبنية عليها
كذلك معرفة اوامر html/xhtml css ولو القليل .. اذا وجدت نفسك على دراية بما ذكرت فكمل معي هذه الدروس والا خذ لك فكرة عن هذه المكتبة واذهب لتعلم الأمور التي ذكرتها وارجع

اسف غلى هذا الكلام ولكن هذا لمصلحتك عزيزي المتعلم
المكتبة عبارة عن دوال واوامر تختصر عليك الكثير من الوقت والجهد كذلك فيها مميزات رائعة
تستطيع اضافة تأثيرات جميلة على صفحتك ومعالجة احداث الصفحة بالمتصفح بسهولة ودون معالجتها بالخادم لما يستغرق من وقت ...
يمكنك تحميل المكتبة من موقعها الرسمي www.jQuery.com وقم بتحميل اخر اصدار من المكتبة
الاصدار الحالي عند وقت كتابة هذا الدرس هو 1.2.6

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

كود هتمل:

<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>

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

gaser · 20-12-2008, 05:06 PM

اخي عبد الواحد اسألك بالله ان تكمل الدروس كلها

متاااااااااااااااابع بحماس

سوف احمل المكتبه ابدأ معك درس درس

اريد منك طلب ام تجعل بين كل درس مهله يومان او 3 ايام حتى نستطبع التطبيق بشكل اكبر

يكون عندنا الوقت الكافي

جزاك الله خير اخوي

عبد الواحد البشيري · 20-12-2008, 05:35 PM

ان شاء الله سأضيف درس اخر الليلة ان بقيت حي
ان شاء الله سأضيف الدروس حسب الوقت اتمنى ان يوفقني الله في شرح اكثر ما نحتاجه من المكتبة

bastr · 06-01-2009, 08:19 PM

جزاك الله خيرا
الشرح جميل
متابع...

aroon · 22-01-2009, 02:28 PM

شكرا اخي علي الشرح
انا متابع معاك الدروس

وقنت بتجربة الشرح الاول و الحمد لله لم تظهر اي مشاكل

عبد الواحد البشيري · 22-01-2009, 10:13 PM

اشكركم جميعا

محمد الشرقاوي · 24-08-2009, 07:29 PM

درس مميز بارك الله يك وجاري المتابعة،

16-12-2008, 06:53 PM	#1 (permalink)
عبد الواحد البشيري مبرمج php تاريخ الانتساب: 21-01-2007 المكان: المغرب السن: 28 مشاركات: 862 مستوى السمعة : 4	دليلك السهل في تعلم استخدام مكتبة jQuery [ الدرس الأول] بسم الله الرحمن الرحيم والصلاة والسلام على محمد واله وصحبه اجمعين قبل ان نبدأ درسنا اود ان تعرف انك بحاجة الى معرفة مسبقة باستخدام اوامر جافاسكريبت لأن المكتبة مبنية عليها كذلك معرفة اوامر html/xhtml css ولو القليل .. اذا وجدت نفسك على دراية بما ذكرت فكمل معي هذه الدروس والا خذ لك فكرة عن هذه المكتبة واذهب لتعلم الأمور التي ذكرتها وارجع اسف غلى هذا الكلام ولكن هذا لمصلحتك عزيزي المتعلم المكتبة عبارة عن دوال واوامر تختصر عليك الكثير من الوقت والجهد كذلك فيها مميزات رائعة تستطيع اضافة تأثيرات جميلة على صفحتك ومعالجة احداث الصفحة بالمتصفح بسهولة ودون معالجتها بالخادم لما يستغرق من وقت ... يمكنك تحميل المكتبة من موقعها الرسمي www.jQuery.com وقم بتحميل اخر اصدار من المكتبة الاصدار الحالي عند وقت كتابة هذا الدرس هو 1.2.6 عند بداية استخدام المكتبة يتوجب عليك دائما اضافة المكتبة وكتابة امر قراءة الملف بالكامل سأشرح هذه النقطة بعد الكود كود هتمل: <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> للتجربة الحية هذا فان اخطأت فمن نفسي ومن الشيطان وان اصبت فمن الله عز وجل لا يسمح اطلاقا بنقل الدرس بدون ذكر المصدر بشكل واضحر __________________ مدونة مبرمج مغربي لضمان رد سريع على استفسارك أو موضوعك تأكد من البحث في المنتدى قبل أن تسأل احرص على أن تنتقي العنوان المناسب لموضوعك أو سؤالك قم بصياغة سؤالك بطريقة واضحة مع ذكر تجربتك ومكان الخطأ فيها قام بآخر تعديل عبد الواحد البشيري يوم 16-12-2008 في 07:07 PM

20-12-2008, 05:06 PM	#2 (permalink)
gaser عضو نشيط تاريخ الانتساب: 16-05-2008 مشاركات: 79 مستوى السمعة : 2	رد : دليلك السهل في تعلم استخدام مكتبة jQuery [ الدرس الأول] اخي عبد الواحد اسألك بالله ان تكمل الدروس كلها متاااااااااااااااابع بحماس سوف احمل المكتبه ابدأ معك درس درس اريد منك طلب ام تجعل بين كل درس مهله يومان او 3 ايام حتى نستطبع التطبيق بشكل اكبر يكون عندنا الوقت الكافي جزاك الله خير اخوي __________________ كود PHP: `echo " I LOVE PHP ! ";`

20-12-2008, 05:35 PM	#3 (permalink)
عبد الواحد البشيري مبرمج php تاريخ الانتساب: 21-01-2007 المكان: المغرب السن: 28 مشاركات: 862 مستوى السمعة : 4	رد : دليلك السهل في تعلم استخدام مكتبة jQuery [ الدرس الأول] ان شاء الله سأضيف درس اخر الليلة ان بقيت حي ان شاء الله سأضيف الدروس حسب الوقت اتمنى ان يوفقني الله في شرح اكثر ما نحتاجه من المكتبة __________________ مدونة مبرمج مغربي لضمان رد سريع على استفسارك أو موضوعك تأكد من البحث في المنتدى قبل أن تسأل احرص على أن تنتقي العنوان المناسب لموضوعك أو سؤالك قم بصياغة سؤالك بطريقة واضحة مع ذكر تجربتك ومكان الخطأ فيها

06-01-2009, 08:19 PM	#4 (permalink)
bastr عضو نشيط تاريخ الانتساب: 11-09-2008 المكان: الأردن السن: 29 مشاركات: 55 مستوى السمعة : 2	رد : دليلك السهل في تعلم استخدام مكتبة jQuery [ الدرس الأول] جزاك الله خيرا الشرح جميل متابع... __________________ جميل أن تعرف معنى الحريه والأجمل أن تبحث عنها وما أجمل من هذا وهذا هو أن تجدها جد لك هدفا ثم إجعل لهدفك طريقا وقم بتمهيد الطريق وأبدا حياتك فلا حياة بدون هدف نحن لسنا حيوانات تأكل وتنام وتتكاثر هدفي في هذه الحياه هو الفوز والنجاح مهما كلف الأمر فلن يعاد الإختبار وكل ثانية مرت لن ترجع كود PHP: `echo "my sites : <br>" /* http://www.saprinna.com http://www.e51g.com http://www.urorbit.com */`

22-01-2009, 02:28 PM	#5 (permalink)
aroon عضو فعال تاريخ الانتساب: 29-06-2007 المكان: Egypt السن: 23 مشاركات: 372 مستوى السمعة : 3	رد : دليلك السهل في تعلم استخدام مكتبة jQuery [ الدرس الأول] شكرا اخي علي الشرح انا متابع معاك الدروس وقنت بتجربة الشرح الاول و الحمد لله لم تظهر اي مشاكل __________________ قناة التكنولوجيا - الفكر العربي شارك في مشروع أول قناة عربية تتحدث عن التكنولوجيا www.alfker.com دليل سوق الموبيلات www.mob4me.com

22-01-2009, 10:13 PM	#6 (permalink)
عبد الواحد البشيري مبرمج php تاريخ الانتساب: 21-01-2007 المكان: المغرب السن: 28 مشاركات: 862 مستوى السمعة : 4	رد : دليلك السهل في تعلم استخدام مكتبة jQuery [ الدرس الأول] اشكركم جميعا __________________ مدونة مبرمج مغربي لضمان رد سريع على استفسارك أو موضوعك تأكد من البحث في المنتدى قبل أن تسأل احرص على أن تنتقي العنوان المناسب لموضوعك أو سؤالك قم بصياغة سؤالك بطريقة واضحة مع ذكر تجربتك ومكان الخطأ فيها

24-08-2009, 07:29 PM	#7 (permalink)
محمد الشرقاوي عضو نشيط تاريخ الانتساب: 26-07-2009 مشاركات: 59 مستوى السمعة : 1	رد : دليلك السهل في تعلم استخدام مكتبة jQuery [ الدرس الأول] درس مميز بارك الله يك وجاري المتابعة،

زوار هذا الموضوع الآن : 1 (0 عضو و 1 ضيف)

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

مواضيع ذات صلة
الموضوع	الكاتب	المجلس	المشاركات	المشاركة الأخيرة
دليلك السهل في تعلم استخدام مكتبة jQuery [الدرس الثالث والأخير] -ajax-	عبد الواحد البشيري	jQuery	4	16-06-2009 05:16 PM
درس كتاب شرح استخدام مكتبة fpdf	eltiriak	دروس بي اتش بي PHP Lessons	3	12-06-2009 02:05 AM
دليلك السهل في تعلم استخدام مكتبة jQuery [الدرس الثاني] - الأحداث والتأثيرات-	عبد الواحد البشيري	jQuery	13	30-01-2009 07:13 PM
دليلك السهل في تعلم استخدام مكتبة jQuery [الدرس الثاني] - الأحداث والتأثيرات-	عبد الواحد البشيري	jQuery	0	21-12-2008 01:47 AM

الاسم		حفظ ؟
كلمة المرور