دليلك السهل في تعلم استخدام مكتبة jQuery [ الدرس الأول]
مدرج تحت قسم: دروس
قبل ان نبدأ درسنا أود أن تعرف أنك بحاجة إلى معرفة مسبقة باستخدام أوامر جافاسكريبت لأن المكتبة مبنية عليها، وكذلك معرفة أوامر html/xhtml css ولو القليل.
إذا وجدت نفسك على دراية بما ذكرت فكمل معي هذه الدروس وإلا فمن الأفضل لك أن تأخذ فكرة عن هذه المكتبة حالياً، وبعد تعلمك المطلوب تقرأ موضوعي مجدداً حتى تحقق أفضل فائدة :) عذراً على هذا الكلام ولكن هذا لمصلحتك عزيزي.
مكتبة JQuery هي عبارة عن دوال وأوامر تختصر عليك الكثير من الوقت والجهد. كذلك فيها مميزات رائعة، فتستطيع إضافة تأثيرات جميلة على صفحتك ومعالجة أحداث الصفحة بالمتصفح بسهولة ودون معالجتها بالخادم لما يستغرق من وقت.
يمكنك تحميل المكتبة من موقعها الرسمي 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>
بمكتبة jQuery
<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>
هذا وإن أخطأت فمن نفسي ومن الشيطان وإن أصبت فمن الله عز وجل
ولا يسمح إطلاقا بنقل الدرس بدون ذكر المصدر بشكل واضح.
مواضيع ذات علاقة
التعقيبات
- المشروع - تطوير المواقع » دليلك السهل في تعلم استخدام مكتبة jQuery [الدرس الأخير]: AJAX
- المشروع - تطوير المواقع » دليلك السهل في تعلم استخدام مكتبة jQuery [الدرس الثاني]: الأحداث والتأثيرات
- 20 مؤثر اجاكس Ajax احترافي عليك ان لا تفوته ! | دروس عربية
شكراً لك أخوي عبدالواحد على الدرس الجميل
بارك الله فيك
العفو اخي
اتمنى انك تعرفت على هذه المكتبة الرائعة
شكراً لك أخي عبد الواحد و بالفعل المكتبة أكثر من راائعة و جميلة جداً.
و شرحك راائع جداً.
تحياتي
فراس
مشكورين بجد ع كل مابتقدمه
المكتبة رائعة تعرفت عليها منذ مدة وأنا مرتاح كثيراً معها خصوصاً أنني أستخدم Aptana Studio !
——— تمت إضافة هذا الموقع لجوجل ريدر :)
بارك الله فيك يا اخى وجزاك الله عنا كل خير
تسلم عزيزي عالشرح المبسط،
في انتظار الدروس الأخرى،
تم تطبيق الدرس :)
ألف شكر على هذا الشرح أنا جالس ابرمج سكربت وهذه الطريقة ستختصر علي الكثير
أتمنى لك من الله التوفيق
السلام عليكم
بارك الله فيك اخي و حاليًا اتعلمها من اجد احترافها .
اتمنى المزيد من الدروس و تحياتي
السلام عليكم
جزاكم الله خيرا
كيف استخدم الاشياء المبرمجه باستخدام ال jquery كالقوائم مثلاً فى الصفحات العربيه اى ان تكون من اليمين الى اليسار ؟؟؟
اريدالتعديل على هذا السكريبت هذا السكريبت عباره عن تابز متحركه يتم الضغط على كل عنوان من تلك العنواين الموجوده بالاعلى ويتتم انبثاق قوائم منها تعمل بشكل جيد ولاكن عند فتح الصفحه ظهر جميع القوائم وعند اختيار العنوان يتم اختيار القوائم وعرضها
وهذا هو عنوان السكريبت
http://css-tricks.com/examples/FilteringBlocks/