تعلم كيفية انشاء و إدارة المواقع و التعامل مع الإستضافة وتسجيل أسماء النطاقات
جي كويري jQuery
جي كويري “jQuery” هي مكتبة بلغة جافا سكريبت “JavaScript library” بحيث تجعل من السهل خلق تأثيرات رائعة على محتويات صفحات المواقع في اسطر قليلة من التعليمات البرمجية.
كيف يعمل جي كويري jQuery
0منذ 1 من سنوات
بواسطة محمد العفيف
في جي كويري jQuery
أساسيات جي كويري
هذا الدرس لمساعدتك على البدء باستخدام جي كويري. قم بتصميم صفحة اختبار، وذلك من خلال إنشاء صفحة أتش تي أم أل جديدة “HTML page” تحتوي على هذه الرموز:
<html> <head>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
</script>
</head>
<body>
<a href=“http://jquery.com/”>jQuery</a>
</body>
</html>
حرر المصدر “src” بحيث انك توجه صفحة الرموز الى مكان وجود نسختك من jquery.js. على سبيل المثال ، إذا كان jquery.js في نفس الدليل “directory ” الذي يحتوي على صفحة أتش تي أم أل الخاص بالاختبار ، فيمكنك اذا استخدام هذه الرموز :
<script type=“text/javascript” src=“jquery.js”></script>
يمكنك تحميل نسخة من جي كويري من صفحة التحميل jQuery
جي كويري لديها حالة “event” تسمى “ready” هذه الحالة تنتظر الى ان تتحقق من ان الوثيقة ” document ” اصبحت جاهزة للتعامل معها يعني انه قد تم تحميل كل الصور و النصوص و الميديا على الصفحة ثم تقوم بتشغيل الرموز:
$(document).ready(function(){
// Your code here الرموز التي تريد تشغيلها توضع هنا
});
على سبيل المثال داخل الحادثة “event”، قم باضافة معالج النقر”click ” على الرابط “link”:
$(document).ready(function(){
$(“a”).click(function(event){
alert(“Thanks for visiting!”);
});
});
قم بحفظ ملف الاختبار أتش تي أم أل “HTML” ثم قم بإعادة شحن صفحة الاختبار “reload the test page” على المتصفح الخاص بك. ثم بالنقر على الرابط و بذلك ستظهر نافذة التنبيه “alert pop-up” ، قبل مغادرتك الصفحة و الذهاب إلى الصفحة الرئيسية لموقع جي كويري.
بالنسبة للنقر “click” و بقية الأحداث الأخرى ، يمكنك منع السلوك الافتراضي من خلال الدعوة “event.preventDefault()” :
$(document).ready(function(){
$(“a”).click(function(event){
alert(“As you can see, the link no longer took you to jquery.com”);
event.preventDefault();
});
});
المهم : إن أمثلة جي كويري المتبقية يجب أن توضع داخل الحدث “ready event” بحيث يتم تنفيذها عندما يكون الملف جاهزا للعمل.
يمكنك تحميل هذا الاختبار من هنا pack1 او القيام بالتجربة مباشرة من الموقع
إضافة وإزالة قسم “Class” على أتش تي أم أل
مهمة أخرى هي إضافة (أو إزالة) قسم “class”.
أولا، قم بإضافة بعض المعلومات للستايل “style” في <head> في ملف الاختبار ، مثل هذا:
<style type=“text/css”>
a.test { font-weight: bold; }
</style>
ثم قم بإضافة “addClass” الى الرموز :
$(“a”).addClass(“test”);
كل العناصر التابعة لـ “a” ستصبح الآن بمظهر خشن “bold”.
لإزالة الكلاس “class”، استخدم “removeClass”:
$(“a”).removeClass(“test”);
أتش تي أم أل “HTML” تسمح بإضافة فئات متعددة “classes” إلى اي عنصر.
<html>
<head>
<script type=“text/javascript” src=“jquery.js”></script>
<style type=“text/css”>
a.test { font-weight: bold; }
</style>
<script type=“text/javascript”>
$(document).ready(function(){
$(“a”).addClass(“test”); // Add class test إضافة فئة
//$(“a”).removeClass(“test”);// Remove class test حذف فئة
});
</script>
</head>
<body>
<a href=“http://jquery.com/”>jQuery</a>
</body>
</html>
المؤثرات خاصة
جي كويري ، تقدم لك بعض المؤثرات ، لجعل موقع الويب الخاص بك يبرز بمظهر جيد. للقيام بهذا الاختبار ،قم بتغيير عملية النقر “click” التي قمن بها سابقا بهذه:
$(“a”).click(function(event){
event.preventDefault();
$(this).hide(“slow”);
});
الآن ، إذا تقوم بالنقر على الرابط، فسيقوم الرابط بالاختفاء و ببطء.
يمكنك تحميل هذا الاختبار من هنا pack2 او القيام بالتجربة مباشرة من الموقع
ما هي جي كويري jQuery؟
0منذ 1 من سنوات
بواسطة محمد العفيف
في جي كويري jQuery
جي كويري “jQuery” هي مكتبة بلغة جافا سكريبت “JavaScript library” بحيث تجعل من السهل خلق تأثيرات رائعة على محتويات صفحات المواقع في اسطر قليلة من التعليمات البرمجية.
جي كويري هي مكتبة جافا سكريبت تتمثل في تبسيط كتابة شفرة جافا سكريبت بحيث تصبح سهلة. تحقق جي كويري هذا الهدف من خلال انها معممة “common”، ومجرد من جميع العلامات الغير ضرورية ، و يجعل كتابة شفرة جافا سكريبت قصيرة ، ذكية ومفهومة.
ربما انت تفكر… “لماذا انت بحاجة الى مكتبة جافا سكريبت”؟ قم بمجرد محاولة وسترى كيف انها بسيطة وقوية.
لماذا يجب أن أستخدم جي كويري “jQuery“؟
بسيطة. في لمحة واحدة فقط على شفرة المصدر لصفحة “source code of a page” تعتمد على التعليمات البرمجية باستخدام جي كويري سترى كم هو سهل استخدامها، وكم نستطيع ان ننجز في سطور قليلة جدا من شفرة جي كويري ، و كم هي مرنة.
وماذا عن رموز او ما يسمى بالشفرة؟
تظهر الرموز بسيطة تقريبا. فبعد الاطلاع على الوثائق المساعدة لجي كويري فستستغرب كثيرا عندما ترى انه يمكنك تحقيق هدفك باستعمال اسطر قليلة جدا من الرموز.
متى يمكنك استخدام جي كويري؟
يجب استخدام جي كويري عندما تحتاج الى:
- مكتبة صغيرة والتي تمنحك السيطرة القويةعلى نموذج كائنية الوثيقة “Document Object Model”
- القليل جدا من الجهد أو العمل من طرفك
- الوصول السريع لأجاكس “AJAX”
- التقليل من التضخم ( تكرار كتابة الرموز)
- بعض تأثيرات الحركة الأساسية
ولكن اذا كنت بحاجة الى بعض تأثيرات الحركة الممتازة و المتقدمة ، والسحب والإسقاط “drag and drop”، والرسوم المتحركة فعليك باستخدام نموذج لواحد من الإضافات “plugins” الكثيرة لتعزيز تأثيرات الحركة.
من أين تحصل عليه؟
يمكنك تحميل الشفرة المصدر (15 كيلو بايت) “source code”، والكثير من الإضافات وقراءة بعض الدروس الممتازة على موقع جي كويري “jquery.com“. جي كويري تم إنشاؤه من قبل جون ريزيج.
جي كويري مجاني للتحميل والاستخدام ، وثنائي الترخيص من طرف إم إي تي معهد ماساتشوستس للتكنولوجيا “MIT” وترخيص جنو العمومية “GNU GPL”.
فضلا عن مكتبة جي كويري نفسها ، فالمئات من الإضافات “plugins” لجي كويري متاحة لإضافة المزيد من القوة والأداء الوظيفي.
