الخطوة الأولى مع jquery

دورة jQuery

ان jQuery هي مكتبة للجافاسكربت JavaScript .

تقوم jQuery بتبسيط أكواد الجافاسكربت JavaScript البرمجية .

ان لغة jQuery بسيطة سهلة التعلم .

اكتب الكود بنفسك

باستخدام برنامج محرر النصوص الجافاسكربت JavaScript الخاص بالمعهد يمكنك كتابة الكود بنفسك في كل درس .

مثال


<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>

<p>ان ضغطت هنا سيختفي النص</p>

</body>
</html>

مقدمة عامة حول jquery

يمكن إضافة مكتبة jQuery إلى صفحات الويب من خلال سطر واحد .

ماذا ينبغي أن تعرف

قبل البدء بدراسة jQuery يجب أن تكون على علم باللغات التالية :

HTML

JavaScript

ان أردت دراسة هذه المواد يمكنك التوجه للصفحة الرئيسية للمعهد .

ماهي لغة jQuery ؟

ان لغة jQuery هي عبارة أن أكود الجافاسكربت JavaScript الوظيفية .

تعتبر لغة jQuery لغة خفيفة لمكتبةJavaScript "أقل كتابة و لكن أكثر مفعولاً " .

تحتوي لغة jQuery على المزايا التالية :

اختيار لعناصر HTML .

التعديل على عناصر HTML .

التعديل على CSS .

أكواد وظيفية functions خاصة بالأحداث .

تأثيرات JavaScript بالإضافة الى animation .

العمل و التعديل على HTML DOM .

AJAX

إضافة jQuery الى صفحات الويب لديك

يتم تخزين مكتبة jQuery في ملف JavaScript مستقل يحتوي على جميع طرق jQuery .

يمكن اضافتها على صفحة الويب من خلال الوسم التالي :

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

لاحظ بأن وسم <script> يجب أن يكون ضمن قسم <head> .

مثال بسيط jQuery

يشرح المثال التالي الخاص jQuery مثال عن طريقة hide() الاختفاء والتي تقوم بإخفاء جميع عناصر <p> في صفحة HTML .

مثال

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

</script>
</head>
<body>

<h2>هذا عنوان</h2>
<p>هذا موضوع</p>
<p> هذا موضوع آخر</p>
<button>اضغط هنا</button>

</body>
</html>

تحميل jQuery

متوفر نسختين من لغة jQuery : واحدة مصغرة والأخرى غير مضغوطة ( خاصة للقراءة و الكتابة ) .

كلا النسختين يمكن تحميلهم من خلال موقع jQuery.com

مكان آخر للتحميل

ان لم تكن تريد تخزين ملف مكتبة jQuery على موقعك الخاص عندها يمكنك استخدام مكتبة jQuery من خلال موقع Google أو Microsoft .

Google

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

Microsoft

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
</head>

تركيبة jQuery

باستخدام jQuery يمكنك اختبار "أمر" برمجي لعنصر HTML ثم إنشاء "أفعال" عليهم .

تركيبة jQuery

ان تركيبة jQuery هي اختيار Selecting عناصر HTML و إنجاز بين الأفعال action على العناصر .

التركيبة هي : $(selector).action()

يتم استخدام اشارة $ لتعريف jQuery .

ان selector هي أمر أو إيجاد عنصر HTML .

استخدام action() للتعديل و إظهار على العناصر .

أمثلة

$(this).hide() : إخفاء العنصر الحالي .

$("p").hide() : إخفاء جميع الفقرات / المواضيع .

$("p.test").hide() : إخفاء جميع الفقرات ذات اللاحقة test .

$("#test").hide() : إخفاء جميع الفقرات ذات اللاحقة test .

تستخدم jQuery مجموعة من تركيبة المنتقى selector CSS و Xpath .

ستتعلم المزيد تركيبة المنتقى في الدرس القادم من هذا الدورة .

وظيفة الصفحة Ready

يمكنك ملاحظة بأن طرق jQuery في الأمثلة لدينا هي داخل الكود الوظيفي document.ready() :

$(document).ready(function(){
// يكتب هنا الكود الوظيفي
});

تم استخدام read لتجنب كود jQuery قبل انتهاء تحميل الصفحة .

هنا بعض الأمثلة للأفعال التي يمكن أن تفشل اذا تم تشغيل function قبل تحميل الصفحة بشكل كامل :

محاولة إخفاء عنصر غير موجود .

محاولة الحصول على حجم صورة لم يتم تحميلها .

تعديل المقال

تعلم البرمجة مجانا

الخطوة الأولى مع jquery | مقدمة و تركيبة jquery