1. عناصر را انتخاب کنید

جی کوئری:

را jQuery() تابع، یا $() به طور خلاصه، تابع سراسری در jQuery است که می توانید از آن برای انتخاب هر عنصری در DOM استفاده کنید.

در اسناد jQuery API بیشتر ببینید: تابع جهانی jQuery()..

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: متد ()querySelectorAll.

2. First Element را انتخاب کنید

جی کوئری:

در اسناد jQuery API بیشتر ببینید: روش first()..

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: متد ()querySelector.

3. عناصر را پیدا کنید

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد .find()..

جاوا اسکریپت:

مشاهده کد نمایشی:

در اسناد DOM API بیشتر ببینید: متد ()querySelector، متد ()querySelectorAll.

4. کودکان را انتخاب کنید

جی کوئری:

در اسناد jQuery API بیشتر ببینید: روش .children()..

جاوا اسکریپت:

مشاهده کد آزمون:

در اسناد DOM API بیشتر ببینید: .اموال کودکان – به یاد داشته باشید که در حالی که نسخه جاوا اسکریپت یک ویژگی است، نسخه jQuery یک متد با پرانتز بعد از آن بود.

5. Parent را انتخاب کنید

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد ()parent

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: ویژگی .parentNode.

6. خواهر و برادر را انتخاب کنید

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد .siblings()..

جاوا اسکریپت:

مشاهده نسخه آزمایشی:

در اسناد DOM API بیشتر ببینید: ویژگی .parentNode، متد ()querySelectorAll، :scope شبه کلاس (به بخش «فرزندان مستقیم» مراجعه کنید).

7. خواهر و برادر بعدی را انتخاب کنید

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد .next()..

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: ویژگی NextElementSibling.

8. خواهر و برادر قبلی را انتخاب کنید

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد .prev()..

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: ویژگی .previousElementSibling.

9. نزدیکترین عنصر منطبق را پیدا کنید

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد .closest()..

جاوا اسکریپت:

مشاهده نسخه آزمایشی:

در اسناد DOM API بیشتر ببینید: متد .closest()..

10. اضافه کردن کلاس

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد ()addClass.

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: ویژگی .classList و متد .add()..

11. حذف کلاس

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد ()removeClass.

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: ویژگی .classList، متد .remove()..

12. تغییر حالت کلاس

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد ()toggleClass.

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: ویژگی .classList، روش .toggle()..

13. کلاس دارد

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد .hasClass()..

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: ویژگی .classList، متد .contains()..

14. دریافت ویژگی

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد ()attr.

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: متد ()getAttribute.

15. صفت را تنظیم کنید

جی کوئری:

در jQuery API Docs بیشتر ببینید: متد ()attr (شما باید از همان استفاده کنید .attr() روشی برای دریافت مقدار مشخصه، اما با دو پارامتر به جای یک).

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: متد ()setAttribute.

16. حذف ویژگی

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد ()removeAttr.

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: متد .removeAttribute()..

17. یک عنصر فرزند جدید اضافه کنید

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد .append()..

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: متد ()appendChild و متد ()createElement.

18. یک عنصر کودک جدید را آماده کنید

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد ()prepend.

جاوا اسکریپت:

به کد تست (هم برای الحاق و هم برای اضافه کردن یک گره فرزند) مراجعه کنید:

در اسناد DOM API بیشتر ببینید: متد ()insertBefore، متد ()createElement، و دارایی firstChild.

19. همه گره های فرزند را حذف کنید

جی کوئری:

در اسناد jQuery API بیشتر ببینید: روش ()empty.

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: متد ()replaceChildren.

20. دریافت یا تنظیم محتوای HTML

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد ()html.

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: ویژگی innerHTML.

21. یک عنصر را با محتوای جدید HTML جایگزین کنید

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد ()replaceWith.

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: ویژگی outerHTML.

22. دریافت یا تنظیم ویژگی CSS

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد ()css.

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: .سبک خاصیت و مرجع خصوصیات CSS (برای نام جاوا اسکریپت خصوصیات CSS).

23. دریافت یا تنظیم محتوای متنی یک عنصر و همه فرزندان آن

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد ()text.

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: ویژگی .textContent.

24. مقادیر ورودی را دریافت یا تنظیم کنید

جی کوئری:

در اسناد jQuery API بیشتر ببینید: روش ()val.

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: دارایی .value (در لیست “خواصی که برای هر نوع عنصر ورودی که پنهان نیست اعمال می شود”).

25. پنهان کردن عنصر

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد .hide()..

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: .سبک خاصیت.

26. نمایش عنصر

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد ()show.

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: .سبک خاصیت.

27. اضافه کردن شنونده رویداد

جی کوئری:

در اسناد jQuery API بیشتر ببینید: روش .on().

جاوا اسکریپت:

مشاهده کد آزمون:

در اسناد DOM API بیشتر ببینید: متد ()addEventListener و مرجع رویداد DOM.

28. حذف شنونده رویداد

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد .off()..

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: متد ()removeEventListener و مرجع رویداد DOM.

29. وقتی DOM آماده است یک تابع را اجرا کنید

جی کوئری:

در اسناد jQuery API بیشتر ببینید: متد .ready()..

جاوا اسکریپت:

در اسناد DOM API بیشتر ببینید: دارایی آماده دولت، متد addEventListener().

30. حلقه را از طریق یک شی، آرایه یا مجموعه انجام دهید

جی کوئری:

در اسناد jQuery API بیشتر ببینید: روش هر().

جاوا اسکریپت:

مشاهده نسخه آزمایشی:

در اسناد DOM API بیشتر ببینید: متدهای .foreach() از NodeList، آرایه، نقشه، و تنظیم رابط ها

مراحل بعدی

این برگه تقلب از جی کوئری به جاوا اسکریپت شامل مهمترین عملکردهایی است که برای ساختن یک وب سایت به آنها نیاز دارید. با آشنایی با این ویژگی ها و روش ها، می توانید از jQuery به جاوا اسکریپت پرش کنید. با این حال، اگر می‌خواهید عملکرد پیچیده‌تری ایجاد کنید، احتمالاً باید بیشتر بدانید.

دو منبع دیگر وجود دارد که برای یافتن معادل jQuery به جاوا اسکریپ که نیاز دارید توصیه می کنم: ممکن است به jQuery نیاز نداشته باشید وب سایت و جک اوکانر جی کوئری به جاوا اسکریپت مخزن در GitHub.

با اینکه از کلاسیک استفاده کردم for حلقه به حلقه از طریق querySelectorAll() جاوا اسکریپت مدرن گزینه های دیگری را نیز در اختیار شما قرار می دهد – کریس کویر برخی از آنها را در آن نشان می دهد این مقاله در مورد حلقه های جاوا اسکریپت است.

اگر می‌خواهید با اطمینان از جاوا اسکریپت بومی و DOM API در گردش کار روزمره خود استفاده کنید، آزمایش و ایجاد تکه‌های کد خود نیز می‌تواند کمک زیادی کند.

جاوا اسکریپت با Tuts+ را بیاموزید

اگر به تازگی با جاوا اسکریپت شروع کرده اید، این آموزش ها، راهنماها و دوره های آموزشی Tuts+ شما را در مسیر درست قرار می دهد: