4. قم بتحريك HTML الخاص بك
يمكنك استخدام jQuery للقيام ببعض الرسوم المتحركة والتأثيرات الأساسية. جوهر تأثير الرسوم المتحركة هو وظيفة animate()، والتي يمكنها تغيير نمط CSS المحدد في أي وقت، على سبيل المثال، يمكنك تغيير الارتفاع أو العرض أو الشفافية أو الموضع يمكنك استخدام ميلي ثانية عند تغيير السرعة (ملي ثانية)، أو يمكنك استخدام قيم السرعة المحددة مسبقًا: بطيئة أو عادية أو سريعة،
إليك مثال للرسوم المتحركة يغير عرض العنصر وارتفاعه في نفس الوقت ليست قيمة أولية، فقط القيمة النهائية يمكن أخذها مباشرة من العنصر الموجود. وفي الوقت نفسه، أضفت أيضًا وظيفة رد الاتصال:
$('#grow').animate({ height: 500). , width: 500 }, "slow", function() {alert('لقد انتهى العنصر من النمو!');}); باستخدام هذه الوظائف المضمنة في jQuery، من السهل جدًا إنشاء تأثيرات الرسوم المتحركة يمكن ضبط الدالة show() وhide() لإظهار العناصر وإخفائها للتنفيذ على الفور أو بسرعة محددة. يمكنك أيضًا استخدام الدالتين FadeIn() وfadeOut() أو الدالتين SlideDown() وslideUp() لإظهار عنصر أو إخفائه، اعتمادًا على التأثير الذي تريده. فيما يلي مثال بسيط لإظهار تأثير الانزلاق لأسفل لشريط التنقل:
$('#nav').slideDown('slow'); ربما تكون البرمجة النصية ومعالجة الأحداث jQuery هي الأفضل في التعامل مع DOM، وقد تم تنفيذ معالجة الأحداث، ومن السهل جدًا اجتياز أحداث DOM وتشغيلها، كما أن ربط الأحداث وإزالتها واستدعاءها أمر طبيعي جدًا وسهل الاستخدام، ويمكن مقارنتها يدويًا عند كتابة هذه الرموز، يمكن تقليل الأخطاء بشكل كبير. في الواقع، يعمل jQuery على تبسيط عمليات DOM المختلفة. يمكنك إنشاء عنصر وربطه بعناصر أخرى باستخدام وظيفة append()، ويمكنك نسخ العنصر باستخدام clone(). قم بتعيين المحتوى باستخدام html ()، ويمكنك حذف المحتوى باستخدام الوظيفة الفارغة ()، والإزالة باستخدام وظيفة () تحذف العناصر والمحتوى، ويمكنك حتى استخدام وظيفة الالتفاف () لتغليف هذا العنصر بعنصر آخر الدوال التي يمكنها تغيير محتوى كائن jQuery نفسه عن طريق اجتياز DOM، يمكنك أيضًا الحصول على الأشقاء () للعنصر، أو الآباء () أو الأطفال () يمكنك أيضًا استخدام التابعين التاليين () و () السابقين ربما يكون العثور على الأشقاء () هو أقوى هذه الوظائف، فهو يسمح لك باستخدام محدد jQuery للبحث داخل كائن jQuery الخاص بك، وتصبح هذه الوظائف أكثر قوة عند إقرانها بوظيفة end() تعمل وظيفة end() مثل التراجع، مما يتسبب في عودة كائن jQuery الخاص بك إلى الوقت الذي اتصلت فيه بـ find () أوparent() أو أي حالة أخرى قبل وظيفة الاجتياز، إذا كنت تستخدم رابط الطريقة الذي ذكرناه أعلاه، فستكون وظائف معقدة للغاية يمكن تنفيذها باستخدام رمز بسيط. تعرض List7 مثالاً، وستجد نموذج تسجيل دخول وتنفذ بعض العمليات على العناصر الموجودة فيه. القائمة 7. اجتياز DOM ومعالجته بسهولة$('form#login')// إخفاء الكل. التسميات الموجودة داخل النموذج مع الفئة "الاختيارية" class.find( 'label.Optional').hide().end()// أضف حدًا أحمر إلى أي حقول كلمة مرور في النموذج.find('input:password') .css('border', '1px Solid red').// أضف معالج إرسال إلى النموذج.submit(function(){return تأكيد('هل أنت متأكد من أنك تريد الإرسال؟');}) صدق أو لا تصدق، يحتوي هذا المثال في الواقع على رابط واحد فقط، وهو عبارة عن سطر من التعليمات البرمجية مع بعض المسافات في المنتصف. أولاً، قمت بتحديد نموذج تسجيل الدخول، ثم وجدت التصنيفات الاختيارية بالداخل، وقمت بإخفائها، ثم اتصلت بالنهاية (. ) للعودة إلى النموذج. لقد وجدت مربع إدخال كلمة المرور وقمت بتغيير الحدود إلى اللون الأحمر، ثم اتصلت بـ end() مرة أخرى للعودة إلى النموذج. وأخيرًا، أضفت وظيفة معالجة وقت الإرسال إلى هذا النموذج ومن المثير للاهتمام أنه بالإضافة إلى التعليمات البرمجية المختصرة للغاية، قامت jQuery أيضًا بتحسين جميع العمليات بنفسها للتأكد من أنه عندما يكون كل شيء متصلاً بشكل جيد، فلن تحتاج إلى البحث عن عنصر مرتين، كما أن التعامل مع الأحداث العامة أمر بسيط جدًا، تمامًا مثل استدعاء الدالة click() أو Submit() أو mouseover() ثم تمريرها إلى مستمع الأحداث. الوظائف هي نفسها بالإضافة إلى ذلك، يمكنك أيضًا استخدام bind('eventname', function(){}) لـ حدد وظيفة معالجة الحدث. يمكنك استخدام unbind('eventname') لإلغاء ربط حدث ما، أو استخدام unbind() لإلغاء ربط جميع الأحداث. لمزيد من المعلومات حول سلسلة الوظائف هذه وكيفية استخدامها، يرجى الرجوع إلى برمجة تطبيقات jQuery توثيق الواجهة (API) 6. الكشف عن قوة محددات jQuery
عادةً، يمكنك استخدام المعرف لتحديد العناصر، مثل #myid؛ أو استخدام أسماء الفئات للاختيار، مثل div.myclass، ومع ذلك، فإن jQuery معقدة وكاملة إلى حد ما بناء جملة المحدد الذي يسمح لك باستخدام محدد واحد للعثور على أي مجموعة من العناصر
يعتمد بناء جملة محدد jQuery إلى حد كبير على CSS3 وXPath، كلما زادت معرفتك بـ CSS3 وXPath، كان بإمكانك استخدام jQuery بشكل أفضل ، بما في ذلك CSS3 وXPath، يرجى الرجوع إلى روابط الموارد في نهاية هذه المقالة.
يتضمن CSS3 بعض تركيبات الجملة المدعومة من قبل الجميع، لذلك قد لا تراها كثيرًا، ومع ذلك، لا يزال بإمكانك استخدامها لتحديد العناصر في jQuery. نظرًا لأن jQuery لديه محرك تحليل محدد خاص به، على سبيل المثال، لإضافة شرطة إلى كل عمود فارغ في الجدول، يمكنك استخدام :empty pseudo-operator:
$('td:empty').html('-). '); كيف يمكن العثور على كل عنصر لا يحتوي على اسم فئة محدد؟ يحتوي CSS3 على بناء جملة محدد لهذه الحالة، وذلك باستخدام عامل التشغيل: not pseudo اسم الفئة. $('input:not(.required)').hide( ); يمكنك أيضًا استخدام الفواصل لربط محددات متعددة معًا، تمامًا كما هو الحال في CSS في نفس الوقت $('ul, ol, dl' ).hide();XPath هو أداة قوية للعثور على العناصر في المستند، وهو يختلف إلى حد ما عن CSS ويسمح لك بالعثور على العديد من الأشياء التي لا يمكن العثور عليها باستخدام CSS على سبيل المثال، تريد إضافة حد، يمكنك القيام بذلك: $("input:checkbox/..").css('border', '1px Solid #777'); يحتوي jQuery أيضًا على بعض المحددات الإضافية لا توجد في CSS و XPath، على سبيل المثال، لزيادة سهولة قراءة الجدول، قد ترغب في تعيين صفوف فردية وزوجية لاستخدام أسماء فئات مختلفة، وهذا ما يسمى أشرطة الحمار الوحشي. يعد القيام بذلك باستخدام jQuery أمرًا سهلاً. بفضل المحدد :odd، إليك الكود الذي يوضح استخدام الفئة الشريطية لتغيير لون خلفية الصفوف ذات الأرقام الفردية في الجدول: $('table.striped > tr:odd').css('background', ' #999999'); انظر، يمكن لمحددات jQuery القوية تبسيط التعليمات البرمجية الخاصة بك بغض النظر عن العنصر الذي تريد التأثير عليه، بغض النظر عن مدى وضوحه أو ضبابيته، يمكنك دائمًا العثور على طريقة لاستهدافه باستخدام محدد jQuery بسيط. توسيع jQuery باستخدام المكونات الإضافية على عكس البرامج الأخرى، لا تعد كتابة مكون إضافي لـ jQuery بأي حال من الأحوال محنة مؤلمة مع مجموعة من واجهات برمجة التطبيقات المعقدة. في الواقع، تعد كتابة مكون إضافي لـ jQuery أمرًا بسيطًا للغاية لدرجة أنك قد ترغب في ذلك اكتب مكونًا إضافيًا لاحقًا لجعل التعليمات البرمجية الخاصة بك أكثر إيجازًا، إليك الجزء الأساسي من المكون الإضافي الذي ستكتبه: $.fn.donothing = function(){return this;}; يحتاج الأمر إلى القليل من الشرح. أولاً، تحتاج إلى إضافة دالة إلى كل كائن jQuery، ويجب عليك تعيينها إلى $.fn. ثانيًا، يجب أن تقوم الوظيفة بإرجاع هذا (كائن jQuery) للتأكد من أنه لا يكسر تسلسل الطريقة القواعد المذكورة أعلاه يمكنك بسهولة تمديد الكود أعلاه لكتابة تغيير لون خلفية المكون الإضافي بدلاً من استخدام css('background')، يمكنك القيام بذلك: $.fn.background = function(bg) {return this.css('background', bg);}; لاحظ أنه يمكنني إرجاع وظيفة css () مباشرة، لأنها بالفعل كائن jQuey نفسه، لذا فإن تسلسل الأساليب يمكن أن يعمل بشكل جيد تجد أنك تكرر التعليمات البرمجية باستمرار. على سبيل المثال، عندما تستخدم كل وظيفة ( ) للتعامل مع نفس الشيء مرارًا وتكرارًا، قد تفكر في استخدام مكون إضافي [تعليق توضيحي: ليس واضحًا جدًا.]. من السهل جدًا تطويرها، وهناك الآلاف من المكونات الإضافية المتاحة لك. يحتوي jQuery على مكونات إضافية للجداول، والزوايا الدائرية، وعروض الشرائح، وتلميحات الأدوات، واختيار التاريخ، وأي تطبيق يمكنك العثور عليه قائمة كاملة من المكونات الإضافية في قائمة الموارد في نهاية هذه المقالة. المكون الإضافي الأكثر تعقيدًا واستخدامًا على نطاق واسع هو الواجهة، وهو مكون إضافي للرسوم المتحركة يتعامل مع تأثيرات الفرز والسحب والمؤثرات الخاصة المعقدة المتنوعة وغيرها. تأثيرات واجهة المستخدم المثيرة للاهتمام والمعقدة. تمثل الواجهة بالنسبة لـ jQuery ما يمثله Scriptaculous بالنسبة للنموذج الأولي. كما أن المكون الإضافي الشائع والمفيد هو المكون الإضافي للنموذج، والذي يسمح لك ببساطة بإرسال نموذج في الخلفية باستخدام ajax هذا الموقف: عندما تحتاج إلى اختطاف حدث إرسال النموذج، ابحث عن جميع حقول إخراج النص المختلفة واستخدمها لبناء استدعاء ajax 8. jQuery بعد ذلك، تحدثت للتو عن بعض الأشياء السطحية حول jQuery من المثير للاهتمام الاستخدام، لأن الميزات الجديدة والأساليب الجديدة التي تتعلمها تبدو طبيعية ومنطقية للغاية. بمجرد استخدام jQuery، ستدرك أنه يمكن أن يبسط عملك في تطوير Javascript وAjax، وفي كل مرة تتعلم فيها شيئًا ما، سيصبح الكود أكثر بساطة
بعد تعلم jQuery،
وجدت الكثير من المرح في برمجة Javascript، ويتم التعامل مع جميع الأشياء المملة بشكل جيد، لذلك أحتاج فقط إلى التركيز على الجزء الأساسي بعد استخدام jQuery، بالكاد أتذكر آخر مرة استخدمت فيها Loop. حتى أنني أخشى استخدام مكتبات Javascript الأخرى. لقد غيرت jQuery وجهة نظري تمامًا حول برمجة Javascript.