برگه تقلب ضروری: جی کوئری را به جاوا اسکریپت تبدیل کنید

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

جی کوئری:

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

/* Syntax */

jQuery();
$();        // shortcut

/** 
 * Example
 * 
 * Selects all the links among the descendants of the 'my-class' class
 */
 
jQuery('.my-class a');
$('.my-class a');

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

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

/* Syntax */

Document.querySelectorAll();

/* Example */

document.querySelectorAll('.my-class a');

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

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

جی کوئری:

/* Syntax */

.first();

/**
 * Example
 * 
 * Selects the first link among the descendants of the 'my-class' class
 */

$('.my-class a').first();

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

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

/* Syntax */

Document.querySelector();

/* Example */

document.querySelector('.my-class a');

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

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

جی کوئری:

/* Syntax */

.find();

/**
 * Example
 * 
 * Find all the span tags that are descendants of links within 
 * the 'my-class' class
 * 
 * Note: searches for all descendants not just for children
 */
 
$('.my-class a').find('span');

$('.my-class a').find('span').css('color', 'red');  // for testing

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

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

/* Syntax */

// to find the first element (also if there's only one)
Document.querySelector();

// to find all elements
Document.querySelectorAll();

/**
 * Example
 * 
 * At first querySelectorAll() returns a NodeList, so we have to loop
 * through it to find all the span tags we want
 * 
 * For the sake of testing, I made the selected elements red, 
 * you can find the 'style.color' property below in this cheat sheet 
 */

// finds all '.my-class a'
let nodes = document.querySelectorAll('.my-class a');

// loops through all '.my-class a'
for (let i = 0; i < nodes.length; i++) {
    
    // checks if the individual '.my-class a' element has a 
    // 'span' descendant to avoid 'undefined' error
    if (nodes[i].querySelector('span')) {
        
      // colors span tags that are desdendants of '.my-class a'
      nodes[i].querySelector('span').style.color="red";
   
   }

}

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

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

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

جی کوئری:

/* Syntax */

.children();
.children('selector');

/**
 * Example
 * 
 * (1) Finds all the children of all '.my-class a' elements on the age
 * 
 * (2) Finds all the 'span' elements that are the children of 
 * any '.my-class a' element on the page
 * 
 * Note: searches only for children (first-level of descendants)
 */
 
$('.my-class a').children();

$('.my-class a').children('span');

$('.my-class a').children('span').css('color', 'blue'); // for testing

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

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

/* Syntax */

ParentNode.children;

/**
 * Example 
 * 
 * 2nd example of the jQuery version above, plus makes the selected span 
 * tags blue for the sake of easy testing
 * 
 * for 1st example, only leave out the if check at the end (we need this 
 * because the JS version is not a method but a property, so we 
 * need to check which children are 'span')
 * 
 */

// selects all the elements with 'my-class a' on the page
let items = document.querySelectorAll('.my-class a');

// loops through all the elements with '.my-class a'
for (let i = 0; i < items.length; i++) {
    
        // finds the children of the current '.my-class a' element
    	let kids = items[i].children;
        
		// loops through the children of the current '.my-class a' element
    	for (let j = 0; j < kids.length; j++) {
    	    
            // checks if the child element is a span tag
            if (kids[j].tagName == 'SPAN') {
        
			      kids[j].style.color="blue";
      
            }
		
		}

}

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

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

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

جی کوئری:

/* Syntax */

.parent();

/**
 * Example
 * 
 * Selects the parent elements of ALL elements with 'my-class a' 
 * on the page
 */
 
$('.my-class a');

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

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

/* Syntax */

Node.parentNode;

/** 
 * Example 
 * 
 * Selects the parent of the FIRST element with 'my-class a' on the page 
 * (for the sake of less repetition)
 * 
 * For looping through all '.my-class a' elements, use the looping 
 * solution and querySelectorAll() from the two examples above.
 */

let item = document.querySelector('.my-class a');
item.parentNode;

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

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

جی کوئری:

/* Syntax */

.siblings();

/**
 * Example
 * 
 * Selects the siblings of ALL elements with the 'find-siblings' 
 * class on the page
 */
 
$('.find-siblings').siblings();

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

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

/* Syntax */

Node.parentNode.querySelectorAll(":not(#elem)");

/**
 * Example
 * 
 * Selects the siblings of the FIRST element with the
 * 'find-siblings' class
 * 
 * For looping through all 'find-siblings' elements, see examples #3 and #4
 * 
 * the ':scope' pseudoclass is necessary for preventing the child 
 * elements of 'item' from being selected (otherwise querySelectorAll() 
 * searches through all descendants of 'item', with ':scope >' it loops 
 * through just the first level)
 * 
 */

let item = document.querySelector('.find-siblings');
let siblings = item.parentNode.querySelectorAll(':scope > :not(.find-siblings)');

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

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

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

جی کوئری:

/* Syntax */

.next();

/**
 * Example
 * 
 * Selects the next siblings of all elements with 'my-class a' 
 * on the page
 */
 
$('.my-class a').next();

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

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

/* Syntax */

NonDocumentTypeChildNode.nextElementSibling;

/**
 * Example 
 * 
 * For declaring the 'item' variable by selecting elements with 
 * 'my-class a' on the page, see examples #3, #4, #5
 */
item.nextElementSibling;

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

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

جی کوئری:

/* Syntax */

.prev();

/**
 * Example
 * 
 * Selects the previous siblings of all elements with 'my-class a' 
 * on the page
 */
 
$('.my-class a').prev();

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

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

/* Syntax */

NonDocumentTypeChildNode.previousElementSibling;

/**
 * Example 
 * 
 * For declaring the 'item' variable by selecting elements with 
 * 'my-class a' on the page, see examples examples #3, #4, #5
 */
item.previousElementSibling;

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

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

جی کوئری:

/* Syntax */
.closest('selector-name');

/** 
 * Example 
 * 
 * Checks each 'my-class' element and all of its parent elements, 
 * then returns the first paragraph element it finds.
 */
$('.my-class').closest('p');

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

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

/* Syntax */
Element.closest();

/** Example
 * 
 * Checks item and all of its parents and returns the first div it finds
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
item.closest('div');

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

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

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

جی کوئری:

/* Syntax */

.addClass();

/**
 * Example 
 * 
 * Adds the 'second-class' class to every 'my-class' element
 * 
 */
$('.my-class').addClass('second-class');

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

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

/* Syntax */

Element.classList.add();

/**
 * Example 
 * 
 * For declaring the 'item' variable by selecting elements with 'my-class' 
 * on the page, see examples examples #3, #4, #5
 */

item.classList.add('second-class');

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

11. حذف کلاس

جی کوئری:

/* Syntax */

.removeClass();

/**
 * Example 
 * 
 * (1) Removes the 'second-class' class from every 'my-class' element
 * 
 * (2) Removes 'second-class', then add 'third-class' to 
 * every 'my-class' element
 */
$('.my-class').removeClass('second-class');
$('.my-class').removeClass('second-class').addClass('third-class');

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

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

/* Syntax */

Element.classList.remove();

/**
 * Example 
 * 
 * For declaring the 'item' variable by selecting elements with 'my-class' 
 * on the page, see examples examples #3, #4, #5
 */
 
item.classList.remove('second-class');

// To use it together with add(), you need two separate statements
item.classList.remove('second-class');
item.classList.add('third-class');

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

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

جی کوئری:

/* Syntax */

.toggleClass();

/** Example
 * 
 * Adds the 'active' class to elements with 'my-class' if they don' have it
 * remove it if they have it
 * 
 */
 
$('.my-class').toggleClass('active');

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

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

/* Syntax */

Element.classList.toggle();

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
item.classList.toggle('active');

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

13. کلاس دارد

جی کوئری:

/* Syntax */

.hasClass();

/**
 * Example
 * 
 * Checks if any element with 'my-class' has the 'active' class
 * 
 * Returns true or false
 * 
 * If there's at least one element with 'active' it's true,
 * otherwise false.
 * 
 */

$('.my-class').hasClass('active');

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

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

/* Syntax */

Element.classList.contains();

/**
 * Example 
 * 
 * Similar to the jQuery version, this one also checks if any element
 * in the whole classList has the 'active' class
 * 
 * If at least one element has 'active', it's true, otherwise false
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
item.classList.contains('active');

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

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

جی کوئری:

/* Syntax */

.attr('attr-name');

/**
 * Example
 * 
 * Returns the value of the href property of the FIRST occurrence of 
 * an element with 'my-class'
 * 
 */
 
$('.my-class').attr('href');

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

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

/* Syntax */

Element.getAttribute('attr-name');

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
 item.getAttribute('href');

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

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

جی کوئری:

/* Syntax */

.attr('attr-name', value);

/**
 * Example
 * 
 * Sets the value of the href property for ALL contact links that
 * have the 'contact-link' class
 * 
 */
 
$('.contact-link').attr('href', 'contact.html');

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

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

/* Syntax */

Element.setAttribute();

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
 item.setAttribute('href', 'contact.html');

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

16. حذف ویژگی

جی کوئری:

/* Syntax */

.removeAttr('attr-name');

/**
 * Example
 * 
 * Removes 'target' attributes from contact links
 */
 
$('.contact-link').removeAttr('target');

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

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

/* Syntax */

Element.removeAttribute();

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
 item.removeAttribute('target');

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

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

جی کوئری:

/* Syntax */
 
.append('html-string');

/**
 * Example
 * 
 * Appends an extra list element to the end of every ordered list on the page
 * 
 */
  
$("ol").append("<li>");

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

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

/* Syntax */
 
Node.appendChild();

/**
 * Example 
 * 
 * For declaring the 'ol' variable, see examples #3, #4, #5
 */
  
ol.appendChild(document.createElement("li"));

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

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

جی کوئری:

/* Syntax */
 
.prepend('html-string');

/**
 * Example
 * 
 * Prepends an extra list element to the beginning of every ordered list on the page
 * 
 */
  
$("ol").prepend("<li>");

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

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

/* Syntax */
 
Node.insertBefore();

/**
 * Example 
 * 
 * For declaring the 'ol' variable, see examples #3, #4, #5
 */
  
ol.insertBefore(document.createElement("li"), ol.firstChild);

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

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

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

جی کوئری:

/* Syntax */
.empty();

/**
 * Example
 * 
 * Removes all child nodes (HTML + text) of each element 
 * that has 'my-class'
 */
$('.my-class').empty();

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

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

/* Syntax */
Element.replaceChildren();

/**
 * Example
 * 
 * Empties the 'item' node of all of its children
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 item.replaceChildren();

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

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

جی کوئری:

/* Syntax */

.html();
.html('html-string');

/**
 * Example
 * 
 * (1) Gets the HTML content of the FIRST element that matches 'my-class'
 * 
 * (2) Sets/resets the HTML content of EACH element that matches 'my-class'
 * 
 */
 
$('.my-class').html();

$('.my-class').html('<em>Hello</em>');

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

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

/* Syntax */

Element.innerHTML;

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
item.innerHTML;                         // gets the value
item.innerHTML = '<em>Hello</em>';      // sets the value

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

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

جی کوئری:

/* Syntax */
.replaceWith('new-html-content');

/**
 * Example
 * 
 * 
 * Selects a heading, then replaces the full HTML content, 
 * including the parent element
 */
$('#my-heading').replaceWith('<h3 id="my-heading">New Heading</h3>');

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

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

/* Syntax */
Element.outerHTML = 'new HTML content';

/**
 * Example
 * 
 * Replaces the full HTML content, including the parent element
 * 
 */
let item = document.querySelector('#my-heading');
item.outerHTML = '<h3 id="my-new-heading">New Subheading</h3>';

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

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

جی کوئری:

/* Syntax */

.css('property-name');
.css('property-name', value);

/**
 * Example
 * 
 * (1) Gets the 'color' value of the FIRST element
 * that has 'my-class'
 * 
 * (2) Sets the 'color' value to 'white' for EVERY element that has 
 * 'my-class'
 */
 
$('.my-class').css('color');

$('.my-class').css('color', 'white');

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

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

/* Syntax */

ElementCSSInlineStyle.style.{propertyName};

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
item.style.color;               // getting value

item.style.color="white";     // setting value

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

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

جی کوئری:

/* Syntax */
 
.text();
.text('text');

/**
 * Example
 * 
 * (1) Gets the text content of the FIRST element (and all of its descendants) that matches 'my-class' 
 * 
 * (2) Sets/resets the text content of EACH element that matches 'my-class'
 * 
 */
  
$('.my-class').text();
 
$('.my-class').text('<em>Hello</em>');

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

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

/* Syntax */
 
Element.textContent;

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
  
item.textContent;                         // gets the value
item.textContent="<em>Hello</em>";      // sets the value

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

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

جی کوئری:

/* Syntax */
 
.val();
.val(val);

/**
 * Example
 * 
 * (1) Gets the value of the input with the 'name' name 
 * 
 * (2) Sets/resets the value of the input with the 'name' name
 * 
 */
  
$('input[name=name]').val();
 
$('input[name=name]').val('Marilyn Monroe');

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

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

/* Syntax */
 
HTMLInputElement.value;

/**
 * Example 
 * 
 * For declaring the 'input' variable, see examples #3, #4, #5
 */
  
input.value;                         // gets the value
input.value="Marilyn Monroe";      // sets the value

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

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

جی کوئری:

/* Syntax */

.hide();

/**
 * Example
 * 
 * Hides all elements with 'my-class'
 */
 
$('.my-class').hide();

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

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

/* Syntax */

ElementCSSInlineStyle.style.display = 'none';

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
item.style.display = 'none';

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

26. نمایش عنصر

جی کوئری:

/* Syntax */

.show();

/**
 * Example
 * 
 * Displays all elements with 'my-class'
 */

$('.my-class').show()

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

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

/* Syntax */

ElementCSSInlineStyle.style.display = '';

/**
 * Example  
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */

item.style.display = '';            // resets default
item.style.display = 'block';       // sets display as block
item.style.display = 'flex';        // sets display as flex

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

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

جی کوئری:

/* Syntax */

.on();

/**
 * Example
 * 
 * Adds or removes the 'active' class to/from all elements with 
 * '.submenu' when #toggle is clicked
 */
 
$('#toggle').on('click', function(){
    $('.submenu').toggleClass('active');
});

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

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

/* Syntax */

EventTarget.addEventListener('event', functionName);

/**
 * Example  
 * 
 * The code below only selects the FIRST element with the 
 * 'submenu' class.
 * 
 * To select all submenus, use the 'for' loop in Example #3 and #4
 */

let toggle = document.querySelector("#toggle");
let submenu = document.querySelector(".submenu");

toggle.addEventListener('click', function() {
   submenu.classList.toggle('active'); 
});

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

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

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

جی کوئری:

/* Syntax */
 
.off();

/**
 * Example
 * 
 * Removes the listed event handler when #toggle is clicked
 */
  
$('#toggle').off('click', function(){
    $('.submenu').toggleClass('active');
});

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

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

/* Syntax */
 
EventTarget.removeEventListener('event', functionName);

/**
 * Example  
 * 
 * The code below only selects the FIRST element with the 
 * 'submenu' class.
 * 
 * To select all submenus, use the 'for' loop in Example #3 and #4
 */
 
let toggle = document.querySelector("#toggle");
let submenu = document.querySelector(".submenu");
 
toggle.removeEventListener('click', function() {
   submenu.classList.toggle('active'); 
});

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

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

جی کوئری:

/**
 * Syntax
 * 
 * This is the jQuery 3 version of $(document).ready(function(){}); 
 * which is now deprecated.
 */
$(function() {
    // event handler    
}); 

/**
 * Example
 * 
 * Event: The DOM (document) is fully loaded
 * 
 * Action triggered by this event: Message in the console
 */
$(function() {
    console.log('The DOM is ready!');
});

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

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

/* Syntax version 01 */
if(document.readyState === 'complete' || (document.readyState !== 'loading')) {
    // event handler
} else {
	document.addEventListener('DOMContentLoaded', function() {
		// event handler
	});
}

/**
 * Syntax version 02 - you can store the event handler 
 * in a custom callback function 
 */
let handler() = function(){
    // event handler
};

if(document.readyState === 'complete' || (document.readyState !== 'loading')) {
    handler()
} else {
    document.addEventListener('DOMContentLoaded', handler);
}

/** Example 
 *  
 *  When the document is fully loaded, a message is logged to the console.
 */

// version 01
if(document.readyState === 'complete' || (document.readyState !== 'loading')) {
    console.log('The DOM is ready!');
} else {
	document.addEventListener('DOMContentLoaded', function() {
		console.log('The DOM is ready!');
	});
}

// version 02 
// (with a custom 'logMessage' function that holds the event handler)
let logMessage = function(){
    console.log('The DOM is ready!');
};

if(document.readyState === 'complete' || (document.readyState !== 'loading')) {
	logMessage();
} else {
	document.addEventListener('DOMContentLoaded', logMessage);
}

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

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

جی کوئری:

/* Syntax */
.each();

/**
 * Example
 * 
 * Finds each paragraph and turns them yellow
 */
$('p').each(function() {
    $(this).css('color', '#fbdf00');
});

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

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

/* Syntax */
NodeList.prototype.forEach();   // we'll use this in the example below
Array.prototype.forEach();
Map.prototype.forEach();
Set.prototype.forEach();

/**
 * Example
 * 
 * v1 turns red all paragraphs on the page
 * 
 * v2 turns green all list items on the page
 */
 
// v1 (inline callback function syntax)
let itemsV1 = document.querySelectorAll('p');
itemsV1.forEach(
    function(item) {
		item.style.color="white";
	}
);

// v2 (arrow function syntax)
let itemsV2 = document.querySelectorAll('li');
itemsV2.forEach(item => item.style.color="#fbdf00");

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

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

مراحل بعدی

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

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

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

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

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

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