الإعلانات
هذا جزء من مقدمة مستمرة للمبتدئين لسلسلة برمجة الويب 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:
- ابحث عن div بمعرف "content"
- أوجد قيمة p داخل ذلك div
- تصفية لكل ص 3 باستخدام محدد الزائفة nth-child (المزيد عن ذلك هنا)
- إدراج 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 يفعل الأشياء فقط عندما يتم تحميل كل شيء بشكل صحيح بالأحداث ، والحالة الغريبة للوظائف المجهولة.
إذا عثرت على هذه المشاركة للتو ، فأنت على الأرجح مطور ويب من نوع ما وقد ترغب في الاطلاع على كل وورد وبلوق المقالات ، أو حتى مقالاتنا أفضل الإضافات وورد أفضل الإضافات وورد قراءة المزيد الصفحة.
جيمس حاصل على درجة البكالوريوس في الذكاء الاصطناعي ، وهو حاصل على شهادة CompTIA A + و Network +. وهو المطور الرئيسي لـ MakeUseOf ، ويقضي وقت فراغه في لعب كرة الطلاء VR وألعاب الطاولة. لقد كان يبني أجهزة الكمبيوتر منذ أن كان طفلاً.