مقدمة إلى jQuery (الجزء الثاني): الطرق والوظائف

الإعلانات

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

$(محدد).طريقة();

إذا كنت تتذكر من الدرس 1 ، فهذا هو الهيكل الأساسي لمعالجة DOM في jQuery. ليس التلاعب في DOM هو الشيء الوحيد الذي يمكنك القيام به باستخدام jQuery بالطبع ، ولكنه أسهل مكان للبدء منه والأكثر شيوعًا ، لذلك اخترنا ذلك.

لتلخيص بسرعة ، محدد يسمح لك جزء من هذا البيان باستخدام أسماء عناصر أو فئات أو معرّفات تشبه CSS لتحديد أجزاء من DOM. على سبيل المثال ، للاستيلاء على كل باسم فئة . مخفي، نستخدم:

$ ('div.hidden')

الجزء الثاني من هذه المعادلة هو طريقة لأداء هذه DIVs بمجرد العثور عليها (إذا كانت موجودة على الإطلاق ؛ أو قد تكون عنصرًا واحدًا "مطابقًا"). تذكر أن jQuery سيعيد عنصرًا واحدًا فقط لتحديدات المعرف ، حيث يجب أن تشير المعرفات إلى عناصر فريدة. إذا كنت ستحصل على أكثر من شيء ، فيجب تعريفه على أنه فئة في CSS.

إلى الأساليب ثم ؛ ماذا يمكنك أن تفعل مع عناصر DOM على أي حال؟

أولا ، عرفتك على .css الطريقة الأخيرة حتى تتمكن من استخدامها للاختبار. التنسيق بسيط:

.css ("property" ، "value") ؛

يمكن تعديل أي شيء يمكن تحديده بواسطة CSS بواسطة jQuery - الألوان والشفافية والموقع والحجم - على سبيل المثال لا الحصر. التغيير فوري.

إذا كنت تفضل تحريك تغييرات CSS ، فلدي أخبار سارة لك ؛ هناك أيضا طريقة تسمى .animate (). ولكن الأمر أكثر تعقيدًا بقليل:

.animate ({'property': 'value'}، speed)؛

كمثال:

.animate ({'opacity': '0.25'، 'height': '100px'}، 'fast')؛

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

الدفع هذه الصفحة للعديد من الأمثلة العملية للطريقة المتحركة.

بالإضافة إلى معالجة خصائص CSS لشيء ما ، يمكنك ضبط محتوياته باستخدام .طرق text () و .html () و .val () أيضًا (فال هو لمحتويات عناصر النموذج). تعمل هذه الأساليب على حد سواء جلسفقرات و احصل علىTers. إذا لم تحدد قيمة ، فسيحصلون على القيمة الحالية. إذا قمت بتحديد قيمة ، فسيتم استبدال القيمة الحالية.

إليك بعض الأمثلة السريعة:

احصل على القيمة الحالية لحقل الاسم في نموذج التعليق وقم بتعيينه لمتغير اسم_التعليق:

var commenter_name = $ (# comment-form #name) .val () ؛

قم بتعيين قيمة إلى القيمة التي تم الحصول عليها من اسم المعلق:

$ ('span.name'). text (commenter_name) ؛

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

لنفترض أنك تريد إدراج كتلة صورة إعلانية بشكل ديناميكي بعد كل ثالث فقرة في عمود المحتوى ، ولكنك تفعل ذلك في جافا سكريبت بحيث يمكن أن يكون التحميل الأولي للصفحة تبقى نظيفة. يبدو معقدًا جدًا ، أليس كذلك؟ بالكاد…

$('div # contentص: الطفل الثاني (3 ن)').بعد('');

وبتفصيل ذلك ، طلبنا من jQuery:

1. ابحث عن div بمعرف "content"
2. أوجد قيمة p داخل ذلك div
3. تصفية لكل ص 3 باستخدام محدد الزائفة nth-child (المزيد عن ذلك هنا)
4. إدراج img تعسفي بعد كل عنصر مطابق

لا يمكنني سرد ​​جميع الطرق هنا ولا تريد قراءة ذلك. الفكرة هي أن هناك طريقة للقيام بكل ما يمكن أن تفكر فيه عندما يتعلق الأمر بالتلاعب ، لذلك تحقق من API لشخص يمكنك استخدامه.

ضع في اعتبارك أيضًا أنه قد يكون هناك أكثر من طريقة لفعل شيء ما. على سبيل المثال ، لا يمكنك تضييق الكائن الصحيح insertAfter () ، ربما فكر في العثور على التالى الطفل أسفل واستخدام insertBefore () في حين أن.

طريقة التسلسل

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

$ ('nav # menu'). fadeIn ('fast') ؛ $ ('nav # menu'). addClass ('beingShown') ؛ $ ('nav # menu'). css ('margin-right'، '10px')؛

هذا يبدو معقولا بما فيه الكفاية ، أليس كذلك؟ ولكن يمكنك أن تفعل الشيء نفسه في سطر واحد فقط:

$ ('nav # menu'). fadeIn ('fast'). addClass ('beingShown'). css ('margin-right'، '10px')؛

يفعل نفس الشيء بالضبط ، ويسمى تسلسل طريقة. نظرًا لأن جميع طرق jQuery تقريبًا ترجع كائن jQuery بنفسها ، يمكن لكل واحد أن يتغذى على التالي. هذا يعني رمز أقل - وهو أمر جيد دائمًا - ولكنه يعمل أيضًا بشكل أسرع.

لماذا ا؟ حسنًا ، في كل مرة تستدعي فيها jQuery الأساسي $ الأمر والمحدد ، أنت تطلب منه البحث عبر شجرة DOM بحثًا عن عنصر مطابق. عندما تقوم بسلسلة الطرق ، لا تحتاج إلى الاستمرار في الرجوع إلى DOM ، لأنها تعرف مكانها الآن ، ويمكنها تنفيذ الطريقة على الفور.

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

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