close

البنية الأساسية لـ jQuery- التحديد والمعالجة والتأثيرات

تتضمن البنية الأساسية لـ jQuery استخدام محدد(محدد نمط CSS) وطرق لمعالجة العناصر المحددة. فيما يلي بعض أمثلة بناء الجملة الأساسية لـ jQuery:

 

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

  • حدد العناصر حسب اسم علامة HTML: $("tagname") مثال: $("p") يختار جميع <p> العناصر في الصفحة.

  • حدد العناصر حسب فئة CSS: $(".classname") مثال: $(".myClass") يختار جميع العناصر مع الفئة "myClass".

  • حدد العناصر حسب المعرف: $("#idname") مثال: $("#myElement") يختار العنصر بالمعرف "myElement".

  • حدد العناصر حسب السمة: $("[attribute='value']") مثال: $("[data-type='button']") يختار العناصر مع تعيين السمة data-type على "زر".

  • الجمع بين التحديدات: $("tagname.classname") ، $("#idname .classname") ، ...

 

معالجة العناصر المختارة

  • تغيير محتوى عنصر: .html() مثال .text(): $("#myElement").html("New content") تعيين محتوى HTML للعنصر بالمعرف "myElement".

  • تعديل سمات العنصر: .attr() مثال .prop(): $("img").attr("src", "newimage.jpg") يغير src سمة كل <img> العناصر.

  • معالجة فئات CSS لعنصر: .addClass() ، على سبيل المثال: .removeClass() يضيف الفئة "المميزة" إلى العنصر بالمعرف "myElement". .toggleClass() $("#myElement").addClass("highlight")

  • إخفاء / إظهار العناصر: .hide() ، .show() ، .toggle() على سبيل المثال: $(".myClass").hide() إخفاء جميع العناصر التي بها فئة "myClass".

  • معالجة الأحداث على العناصر: .click() ، .hover() ، .submit() ، ... مثال: $("button").click(function() { ... }) يسجل معالج حدث النقر

 

العمل مع مجموعات العناصر

  • التكرار من خلال مجموعة: .each() مثال: $("li").each(function() { ... }) يتكرر فوق كل <li> عنصر في الصفحة.

  • ترشيح مجموعة: .filter() مثال .not(): $("div").filter(".myClass") ترشيح <div> العناصر واختيار تلك التي تحتوي على الفئة "myClass".

  • إدراج عناصر في مجموعة: .append() ، .prepend() ، .after() ، ، .before() مثال: $("#myElement").append("<p>New paragraph</p>") إلحاق عنصر جديد <p> بالعنصر ذي المعرف "myElement".

 

المؤثرات والرسوم المتحركة

  • تنفيذ تأثيرات fadeIn / fadeOut: .fadeIn() ، .fadeOut() على سبيل المثال: $("#myElement").fadeIn(1000) يتلاشى في العنصر ذي المعرف "myElement" خلال مدة ثانية واحدة.

  • تنفيذ تأثيرات slideUp / slideDown: .slideUp() على .slideDown() سبيل المثال: $(".myClass").slideUp(500) تحريك جميع العناصر مع الفئة "myClass" لمدة 0.5 ثانية.

  • تنفيذ حركات مخصصة: .animate() مثال: $("#myElement").animate({ left: '250px', opacity: '0.5' }) تحريك العنصر بمعرف "myElement" عن طريق تغيير موضعه الأيسر والتعتيم.

 

توضح هذه الأمثلة كيفية استخدام جوانب مختلفة من بناء الجملة الأساسي لـ jQuery لتحديد العناصر ومعالجة خصائصها وتطبيق التأثيرات أو الرسوم المتحركة. يقدم jQuery مجموعة غنية من الأساليب والوظائف لتبسيط وتعزيز مهام تطوير الويب.