تأثيرات الرسوم المتحركة مثيرة للإعجاب. أمثلة على استخدام أمثلة وصف jQuery Jquery

بالنسبة لأولئك الذين لا يستطيعون (أو لا يريدون) لسبب ما تنزيل jQuery، هناك طريقة بديلة لاستخدام المكتبة التي توفرها Google عن بعد.

لاستخدام jQuery عن بعد، ما عليك سوى إضافة الكود التالي إلى قسم رأس الصفحة:

يرجى ملاحظة: عند إجراء هذا التمرين والتمارين التالية، نوصي بإيقاف تشغيل مصححات الأخطاء (مثل Firebug)، والتي قد توفر تلميحات. أثناء إكمال المهام، يجب عليك بنفسك العثور على الأخطاء وتصحيحها للأغراض التعليمية.

تم تحديد كود jQuery للمهمة 1 على الصفحة، لكنه لا يعمل لأن ملف مكتبة jquery.js الضروري غير متصل به. قم بتوصيل jquery.js عن بعد (باستخدام خدمة Google) "لإصلاح" الرمز.

من المؤكد أنك سمعت عن مكتبة جافا سكريبت الرائعة التي تسمى jQuery. ما هو بالضبط مسج؟

كيف تجعل حياة مطور الويب أسهل؟ من أين نبدأ؟ jQuery يجعل كتابة جافا سكريبت ممتعة وسهلة. باستخدام هذه المكتبة، يمكن تنفيذ العديد من جوانب Javascript المعقدة إلى حد ما بسهولة في أي تطبيق.

سيخبرك درس اليوم بكيفية البدء باستخدام jQuery وكيفية كتابة البرنامج النصي الأول.

ما هو مسج؟

jQuery هي مكتبة جافا سكريبت خفيفة الوزن للغاية (يسميها البعض إطار عمل) والتي تريحك من كتابة كود جافا سكريبت. يحتوي على الكثير من الميزات القوية جدًا، مثل تتبع DOM، وإضافة تأثيرات جميلة ورسوم متحركة إلى العناصر، وتقنيات وأساليب Ajax فائقة البساطة. وفي الصفحة الرئيسية لموقع jQuery أدق وصف برأيي:

jQuery هي مكتبة سريعة وموجزة تعمل على تبسيط التعامل مع الأحداث والرسوم المتحركة وتفاعل Ajax لتطوير الويب بشكل أسرع. تم تصميم jQuery لتغيير طريقة كتابة JavaScript.

ما هي فوائد مسج؟

دعونا نلقي نظرة سريعة على بعض مزايا وخصائص هذا الإطار:

يتم تقليل كمية التعليمات البرمجية (المطلوبة لتشغيل البرنامج النصي) بشكل كبير مقارنة بجافا سكريبت، وهذا بدوره يعني قضاء وقت أقل وتعليمات برمجية أكثر قابلية للقراءة. في وقت لاحق من المقالة سيتم مناقشة بعض الأمثلة.

أسهل بكثير في فهم التعليمات البرمجية (على عكس JavaScript). في عالمنا، كلما انتهيت من عملية البرمجة مبكرًا، كلما تمكنت من تخصيص المزيد من الوقت لأهداف أخرى.

وثائق مريحة للغاية ومجتمع نشط، مستعد دائمًا للمساعدة إذا لزم الأمر.

يصبح استخدام Ajax أسهل بكثير. ما عليك سوى 5 أسطر من التعليمات البرمجية (أحيانًا أقل) لإنشاء طلب Ajax بسيط.

عدد كبير من المكونات الإضافية التي يمكنك من خلالها فعل أي شيء تقريبًا.

مسج ممتع :)

كيف تبدأ؟

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

وبدلاً من ذلك، يمكنك الاستعانة بمساعدة Google الرائعة ووضع رابط لخادمهم، حيث توجد دائمًا أحدث الإصدارات من أي أطر عمل. يمكن العثور على الرابط الضروري.

هل الوثيقة جاهزة؟

لتنفيذ برنامجنا النصي jQuery الأول، نحتاج إلى تغليف البرنامج النصي بأكمله في دالة. سيتم تنفيذ هذه الوظيفة عندما يكون DOM جاهزًا تمامًا (عندما يكون "المستند جاهزًا" - ترجمة حرفية من الإنجليزية). لاحظ أن هذا مشابه جدًا لحدث "onload" الشائع، ولكنه ليس هو نفسه. لنلقي نظرة على مثال:

$(document).ready(function())( // الكود هنا ));

أعلاه نطلب من jQuery تنفيذ أي تعليمات برمجية داخل الوظيفة، مع أن يكون DOM جاهزًا تمامًا. وهذا له مميزاته، على الرغم من أنه قد لا يكون واضحًا للكثيرين. أولاً، باستخدام هذه التقنية، نقوم بفصل Javascript عن HTML تمامًا. ثانيًا، لا نحتاج إلى الانتظار حتى يتم تحميل الصفحة بالكامل، فنموذج DOM يكفي للتحميل.

بالنسبة للمبرمجين الكسالى، أو لأولئك الذين يحسبون كل حرف، يمكنك اختصار الكود أعلاه:

$(function())( // الكود هنا ));

أول برنامج نصي لـ jQuery

نحن نعرف بالفعل كيفية الرجوع إلى المكتبة. نحن أيضًا نفهم قليلاً عن وظيفة document.ready. الآن حان الوقت لكتابة نص بسيط.

دعونا نجعل الأمر بسيطا قدر الإمكان. في هذا المثال، لنقم بإنشاء صفحة تحتوي على نص واقتباس في النهاية. نريد إظهار الاقتباس فقط إذا قام المستخدم بالنقر فوق الزر. ألق نظرة أدناه على الكود المطلوب لهذا:

$(مستند).جاهز(وظيفة())(
var myQuote = $("#my_quote");
hide();
$(".زر").انقر(وظيفة())(
myQuote.show(500);
});
});

دعونا نلقي نظرة فاحصة على الكود بأكمله.

كما ذكرنا سابقًا، قمنا بوضع كافة التعليمات البرمجية المراد تنفيذها داخل الدالة $document.ready()‎.

نقوم بتعيين معرف عرض الأسعار الخاص بنا (my_quote) لمتغير myQuote. الآن لدينا إمكانية الوصول إلى الاقتباس بالمعرف my_quote.

هذا كل شئ. عند الضغط على الزر لمدة 0.5 ثانية، سيتم عرض الاقتباس. من السهل جدا، أليس كذلك؟

يتبع....

شكرًا لكم على اهتمامكم! أتمنى لك كل خير!

JQuery هي مكتبة عظيمة. لقد ساعد على تجنب جميع مخاطر IE6 بشكل مثالي. في الماضي، كان التوافق عبر المتصفحات يمثل مشكلة كبيرة تواجه المطورين. تعاملت Jquery جيدًا مع جميع التناقضات في عرض التخطيطات في المتصفحات المختلفة.

اليوم، تتمتع المتصفحات بحلول موحدة ممتازة. يمكننا استخدام جميع امتيازات ES5 بشكل مريح، ولدينا أيضًا واجهة برمجة تطبيقات HTML5 تحت تصرفنا، مما يجعل معالجة عناصر DOM أسهل بكثير. المطورون على وشك النسيان والابتعاد عن jQuery لبعض المشاريع. خاصة في حالة الخدمات المصغرة والبرامج غير المعقدة.

لا تفهموني خطأ - لا تزال Jquery مكتبة رائعة، وبالطبع، سيتعين عليك استخدامها بنسبة 70٪ من الوقت. على الرغم من أنه بالنسبة للصفحات الصغيرة ذات JS المحدودة، يمكنك استخدام VanillaJS أو إطار عمل آخر. هذه مناسبة لتطبيقات الهاتف المحمول.

حسنًا، إليك 10 أمثلة على أكواد العمل التي يمكنك القيام بها بدون jquery.

أول شيء تفعله عند استخدام jQuery هو تغليف التعليمات البرمجية بطريقة $(document).ready()‎ لمعرفة متى يكون DOM جاهزًا للمعالجة. بدون Jquery، يمكننا استخدام حدث DOMContentLoaded. فيما يلي مثال على الكود:

// استمع إلى حدث DOMContentLoaded للمستند بأكمله، باستخدام وظيفة مجهولة // يمكنك لف التعليمات البرمجية الخاصة بك بين أذرع هذه الوظيفة // وسيتم تنفيذها عند تحميل الصفحة. document.addEventListener("DOMContentLoaded"، function () ( // سيتم عرض مرحبتنا الهاوايية في وحدة التحكم console.log("Aloha"); ));

يومًا ما، سيتعين علينا تحديد العناصر باستخدام المعرف أو الفئة أو العلامات، ويعد jQuery واحدًا من أفضل العناصر. محدداتها متطابقة تمامًا مع بناء جملة CSS. اليوم، قدمت المتصفحات اثنين من واجهات برمجة التطبيقات المهمة - querySelector وquerySelectorAll.

// يمكنك استخدام document.querySelector للحصول على العنصر الأول المطابق للمعايير // يأخذ وسيطة واحدة فقط - محددات CSS. var lochNess = document.querySelector(".monsters"); console.log("إنها من اسكتلندا - " + lochNess.textContent); // يمكننا أيضًا الحصول على المجموعة باستخدام document.querySelectorAll. // تُرجع قائمة بعناصر dom المطابقة للمعيار var Scary = document.querySelectorAll(" .monsters") ; console.log("إخفاء والبحث عن الأبطال:"); for (var i = 0; i< scary.length; i++) { console.log(scary[i].innerHTML); }

• نيسي
• قدم كبيرة
• لا تشوباكابرا

يعد الاستماع إلى الأحداث جزءًا أساسيًا من بناء تطبيقات الويب. تاريخيًا، كان هناك معسكران كبيران - IE والبقية. لكن اليوم، نستخدم فقط addEventListener

var btn = document.querySelectorAll("button"), list = document.querySelector("ul"); // اتصل بـ addEventListener للحدث المطلوب. // يبدأ بتتبع حدث النقر على أحد العناصر. btn.addEventListener("click", function () ( // عند النقر فوق زر ما، نريد تشغيل مقياس حدث إلى قائمتنا. // للقيام بذلك، نحتاج إلى إضافة حدث إلى قائمتنا // بحيث عندما يمرر الماوس فوق عنصر ما، سيتم تشغيل الوظيفة .addEventListener("mouseover"، تكبير )); // لإلغاء حدث التكبير/التصغير، استخدم RemoveEventListener. btn.addEventListener("click", function () ( // لن تعمل إزالة الأحداث مع الوظائف غير المسماة، استخدم تلك المسماة فقط list.removeEventListener("mouseover"، تكبير)؛ )); // لنقم بإنشاء دالة قابلة للقياس. var تكبير = function () ( // أضف فئة للعناصر list.classList.add("zoomed"); // عندما يغادر المؤشر القائمة، قم بإزالة الفئة للعودة إلى المقياس الطبيعي list.addEventListener("mouseout" "، الوظيفة ( ) ( list.classList.remove("zoomed") )); // الآن نريد إبراز الأسماء عند النقر عليها. // عندما يتم تشغيل نقرة على عنصر ما، يجب أن يتحول إلى اللون الأخضر // بفضل تفويض الحدث، يمكننا ببساطة إضافة معالج إلى العنصر الأصلي // في هذه الطريقة، لن نقوم بإنشاء مستمعين للحدث لكل عنصر

أضف البطاطس المقلية إلى الغداء أضف الجبن إلى الساندويتش قم بإزالة المخللات غداءي

• شطيرة بلدي
• خبز
• مخللات
• لحم
• مايونيز
• خبز

مع ظهور jQuery، أصبح لدى مبرمجي الويب الفرصة لإنشاء تأثيرات بصرية مثيرة للإعجاب دون اللجوء إلى تقنية الفلاش. تقدم هذه المقالة عدة أمثلة مذهلة للنتائج المذهلة التي يمكن تحقيقها باستخدام أدوات المتصفح القياسية وخيالك.

تأثير منظم جيدًا يسمح لك بتكبير جزء الصورة الذي سيوضع عليه المؤشر. في المتصفحات التي لا تعرف CSS3، ستكون العدسة المكبرة مربعة.

يحتوي شريط التمرير هذا على ثمانية أوضاع مختلفة لقلب الصور، كل منها يرضي العين بديناميكياته المصقولة بشكل لا تشوبه شائبة.

ليس من الشائع أن تصادف موقعًا يحتوي على الكثير من العناصر الدائرية. يسمح لك المكوّن الإضافي Bubble Navigation بإنشاء تنقل ديناميكي يعتمد على الدوائر فقط.

يسمح لك بتشغيل عناصر الصفحة حول دائرة، وفي مستويات مختلفة من الفضاء.

يسمح لك المكون الإضافي Flip بقلب العناصر كما لو كانت بطاقات.

معرض الصور غير الرسمي. معاينة المحتوى عبارة عن مجموعة من الصور الفوتوغرافية المتفرقة التي تم التقاطها بكاميرا بولارويد.

شريط تمرير الصور بسيط ولكنه جميل جدًا.

عرض الشرائح مع الصور المتحركة في الفضاء.

طريقة مثيرة جدًا لإنشاء كتالوج منتجات تفاعلي.

يتيح لك التقاط صور لأجزاء فردية من الصورة على الصفحة. انقر على الجزء المطلوب من الصورة وشاهد النتيجة على الشاشة.

سيسمح لك المكون الإضافي Quicksand بفرز وتصفية مجموعة من العناصر باستخدام تأثيرات عالية الجودة.

سيكون هذا البرنامج المساعد مفيدًا جدًا لإنشاء أوصاف تفصيلية للكائنات المعقدة والجولات التفاعلية عند الحاجة، مع شغل أقل مساحة ممكنة لتوفير كمية كبيرة من المعلومات.

سيساعدك المكوّن الإضافي Sliding Boxes على إنشاء معرض ديناميكي غير عادي للصور مع تسميات توضيحية لها.

معرض صور ستظهر عناصره بشكل مبهج عند المرور فوقها.