{"id":21284332,"url":"https://github.com/arnaldogonzalez81318/js-vs-jquery","last_synced_at":"2026-04-15T07:34:43.284Z","repository":{"id":163320634,"uuid":"386677103","full_name":"ArnaldoGonzalez81318/JS-vs-jQuery","owner":"ArnaldoGonzalez81318","description":"To help people, here’s a jQuery to JavaScript cheat sheet that includes the JavaScript equivalents to the most frequently used jQuery functionality.","archived":false,"fork":false,"pushed_at":"2025-12-10T14:25:33.000Z","size":3555,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-10T22:49:50.372Z","etag":null,"topics":["dom","html","javascript","javascript-vanilla","jquery","jquery-docs","js","js-documentation","js-vanilla","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"https://js-vs-jquery.netlify.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ArnaldoGonzalez81318.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-07-16T15:07:51.000Z","updated_at":"2025-12-10T14:25:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"f56c3360-4600-41ac-8156-02e3611be094","html_url":"https://github.com/ArnaldoGonzalez81318/JS-vs-jQuery","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ArnaldoGonzalez81318/JS-vs-jQuery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnaldoGonzalez81318%2FJS-vs-jQuery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnaldoGonzalez81318%2FJS-vs-jQuery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnaldoGonzalez81318%2FJS-vs-jQuery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnaldoGonzalez81318%2FJS-vs-jQuery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArnaldoGonzalez81318","download_url":"https://codeload.github.com/ArnaldoGonzalez81318/JS-vs-jQuery/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnaldoGonzalez81318%2FJS-vs-jQuery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31831844,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T07:17:56.427Z","status":"ssl_error","status_checked_at":"2026-04-15T07:17:30.007Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom","html","javascript","javascript-vanilla","jquery","jquery-docs","js","js-documentation","js-vanilla","vanilla-javascript","vanilla-js"],"created_at":"2024-11-21T11:15:39.463Z","updated_at":"2026-04-15T07:34:43.278Z","avatar_url":"https://github.com/ArnaldoGonzalez81318.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JS-vs-JQuery\n\n![JavaScript vs jQuery illustration](./Images/jquery-vs-javascript.jpeg)\n\nA practical jQuery-to-JavaScript cheat sheet with side-by-side equivalents for common DOM tasks.\n\n## Overview\n\nThis repo collects frequently used jQuery patterns and their modern JavaScript alternatives. It’s intended as a quick reference for learning or for migrating legacy jQuery code to vanilla JS.\n\n## Table of contents\n\n- [Quick start](#quick-start)\n- [Project structure](#project-structure)\n- [Cheat sheet](#convert-javascript-to-jquery)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Quick start\n\nOpen [index.html](index.html) in a browser to view the styled cheat sheet. No build tools or dependencies are required.\n\n## Project structure\n\n- [index.html](index.html) – main cheat sheet page\n- [css/style.css](css/style.css) – layout and theme styles\n- [js/index.js](js/index.js) – UI interactions\n- [js/themeSwitcher.js](js/themeSwitcher.js) – theme toggling logic\n- [Images](Images) – illustrations and icons\n\n## Contributing\n\nImprovements and fixes are welcome. Keep additions consistent with the existing formatting, and prefer concise, real-world examples.\n\n## License\n\nSee [LICENSE](LICENSE).\n\n## Convert JavaScript to jQuery\n\n***JavaScript:*** is an object orient programming language designed to make web development easier and more attractive.\n***jQuery:*** is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript.\n\n### How to convert JavaScript to jQuery ?\n\n**Selection:** In ***jQuery***, to select any element, we simply use the `$()` sign, but in JavaScript, to select any element, we can use `querySelector()` or `querySelectorAll()`.\n\n#### Program\n\n```javascript\n// jQuery to select all instances\n// of class \"select\"\n$(\".select\");\n\n// JavaScript to select only the\n// first instance of class \"select\"\ndocument.querySelector(\".select\");\n\n// To select all the instances\n// of class \"select\"\ndocument.querySelectorAll(\".select\");\n```\n\n##### Some other examples of selectors\n\n**Select Elements:**\n\n* ***jQuery:***\n\n```javascript\n// Syntax\njQuery();\n$(); // Shortcut\n\n// Example\n// Selects all the links among the descendants of the 'my-class' class.\njQuery('.my-class a');\n$('.my-class a');\n$(\"html\") // To select the entire html.\n$(\"body\") // To select the entire html body.\n```\n\n#### See more in the jQuery API docs: [jQuery() global function](https://api.jquery.com/jQuery/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\ndocument.querySelectorAll();\n// Example\ndocument.querySelector(selector)\ndocument.querySelector('.my-class a')\ndocument.body\n```\n\n#### See more in the DOM API docs: [.querySelectorAll() method.](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)\n\n### Select First Element\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.first();\n\n// Example\n$('.my-class a').first();\n```\n\n#### See more in the jQuery API docs: [first() method.](https://api.jquery.com/first/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\ndocument.querySelector();\n\n// Example\ndocument.querySelector('.my-class a');\n```\n\n#### See more in the DOM API docs: [.querySelector() method.](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)\n\n### Find Elements\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.find();\n\n// Example\n// Find all the span tags that are descendants of links within the 'my-class' class.\n// Note: searches for all descendants not just for children.\n$('.my-class a').find('span');\n$('.my-class a').find('span').css('color', 'red');\n```\n\n#### See more in the jQuery API docs: [.find() method.](https://api.jquery.com/find/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\n// To find the first element (also if there's only one)\ndocument.querySelector();\n\n// To find all elements\ndocument.querySelectorAll();\n\n// Example\n// At first querySelectorAll() returns a NodeList, so we have to loop through it to find all the span tags we want.\n// For the sake of testing, I made the selected elements red, you can find the 'style.color' property below in this cheat sheet.\n\n// finds all '.my-class a'\nlet nodes = document.querySelectorAll('.my-class a');\n\n// loops through all '.my-class a'\nfor (let i = 0; i \u003c nodes.length; i++) {\n\n    // checks if the individual '.my-class a' element has a\n    // 'span' descendant to avoid 'undefined' error\n    if (nodes[i].querySelector('span')) {\n\n      // colors span tags that are desdendants of '.my-class a'\n      nodes[i].querySelector('span').style.color = 'red';\n   }\n}\n```\n\n#### See more in the DOM API docs: [.querySelector() method](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), [.querySelectorAll() method.](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)\n\n### Select Children\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.children();\n.children('selector');\n\n// Example\n// Finds all the children of all '.my-class a' elements on the age\n// Finds all the 'span' elements that are the children of any '.my-class a' element on the page\n// Note: searches only for children (first-level of descendants)\n$('.my-class a').children();\n$('.my-class a').children('span');\n$('.my-class a').children('span').css('color', 'blue'); // for testing\n```\n\n#### See more in the jQuery API docs: [.children() method.](https://api.jquery.com/children/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nparentNode.children;\n\n// Example\n// 2nd example of the jQuery version above, plus makes the selected span tags blue for the sake of easy testing.\n// 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')\n\n// selects all the elements with 'my-class a' on the page\nlet items = document.querySelectorAll('.my-class a');\n\n// loops through all the elements with '.my-class a'\nfor (let i = 0; i \u003c items.length; i++) {\n\n        // finds the children of the current '.my-class a' element\n        let kids = items[i].children;\n\n        // loops through the children of the current '.my-class a' element\n        for (let j = 0; j \u003c kids.length; j++) {\n\n            // checks if the child element is a span tag\n            if (kids[j].tagName == 'SPAN') {\n\n                  kids[j].style.color = 'blue';\n\n            }\n        }\n}\n```\n\n#### See more in the DOM API docs: [.children property](https://developer.mozilla.org/en-US/docs/Web/API/Element/children)\n\n### Select Parent\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.parent();\n\n// Example\n// Selects the parent elements of ALL elements with 'my-class a' on the page.\n\n$('.my-class a');\n```\n\n#### See more in the jQuery API docs: [.parent() method](https://api.jquery.com/parent/)\n\n* ***JavaScript:***\n\n```javascript\n/* Syntax */\nNode.parentNode;\n\n// Example\n// Selects the parent of the FIRST element with 'my-class a' on the page (for the sake of less repetition)\n// For looping through all '.my-class a' elements, use the looping solution and querySelectorAll() from the two examples above.\n\nlet item = document.querySelector('.my-class a');\nitem.parentNode;\n```\n\n#### See more in the DOM API docs: [.parentNode property.](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)\n\n### Select Siblings\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.siblings();\n\n// Example\n// Selects the siblings of ALL elements with the 'find-siblings' class on the page.\n\n$('.find-siblings').siblings();\n```\n\n#### See more in the jQuery API docs: [.siblings() method.](https://api.jquery.com/siblings/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nNode.parentNode.querySelectorAll(\":not(#elem)\");\n\n// Example\n// Selects the siblings of the FIRST element with the 'find-siblings' class.\n// 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 \u003e' it loops through just the first level).\nlet item = document.querySelector('.find-siblings');\nlet siblings = item.parentNode.querySelectorAll(':scope \u003e :not(.find-siblings)');\n```\n\n#### See more in the DOM API docs: [.parentNode property](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode), [.querySelectorAll() method](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll), [:scope pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope)\n\n### Select Next Sibling\n\n* ***jQuery:***\n\n```javascript\n//Syntax\n.next();\n\n// Example\n// Selects the next siblings of all elements with 'my-class a' on the page.\n$('.my-class a').next();\n```\n\n#### See more in the jQuery API docs: [.next() method.](https://api.jquery.com/next/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nnonDocumentTypeChildNode.nextElementSibling;\n\n// Example\n// For declaring the 'item' variable by selecting elements with 'my-class a' on the page, see examples #3, #4, #5.\nitem.nextElementSibling;\n```\n\n#### See more in the DOM API docs: [.nextElementSibling property.](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling)\n\n### Select Previous Sibling\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.prev();\n\n// Example\n// Selects the previous siblings of all elements with 'my-class a' on the page.\n$('.my-class a').prev();\n```\n\n#### See more in the jQuery API docs: [.prev() method.](https://api.jquery.com/prev/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nnonDocumentTypeChildNode.previousElementSibling;\n\n// Example\n// For declaring the 'item' variable by selecting elements with 'my-class a' on the page, see examples examples #3, #4, #5.\nitem.previousElementSibling;\n```\n\n#### See more in the DOM API docs: [.previousElementSibling property.](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling)\n\n### Add Class\n\n* ***jQuery:***\n\n```javascript\n// Syntax\naddClass();\n\n// Example\n// Adds the 'second-class' class to every 'my-class' element.\n$('.my-class').addClass('second-class');\n```\n\n#### See more in the jQuery API docs: [.addClass() method.](https://api.jquery.com/addclass/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\n// Example\n// For declaring the 'item' variable by selecting elements with 'my-class' on the page, see examples examples #3, #4, #5.\nitem.classList.add('second-class');\n```\n\n#### See more in the DOM API docs: [.classList property](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) and [.add() method](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add)\n\n### Remove Class\n\n* ***jQuery:***\n\n```javascript\n//Syntax\n.removeClass();\n\n// Example\n// Removes the 'second-class' class from every 'my-class' element.\n// Removes 'second-class', then add 'third-class' to every 'my-class' element.\n$('.my-class').removeClass('second-class');\n$('.my-class').removeClass('second-class').addClass('third-class');\n```\n\n#### See more in the jQuery API docs: [.removeClass() method.](https://api.jquery.com/removeclass/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nElement.classList.remove();\n\n// Example\n// For declaring the 'item' variable by selecting elements with 'my-class' on the page, see examples examples #3, #4, #5.\n\nitem.classList.remove('second-class');\n\n// To use it together with add(), you need two separate statements.\nitem.classList.remove('second-class');\nitem.classList.add('third-class');\n```\n\n#### See more in the DOM API docs: [.classList property](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList), [.remove() method.](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove)\n\n### Toggle Class\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.toggleClass();\n\n// Example\n// Adds the 'active' class to elements with 'my-class' if they don' have it remove it if they have it.\n$('.my-class').toggleClass('active');\n```\n\n#### See more in the jQuery API docs: [.toggleClass() method.](https://api.jquery.com/toggleclass/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nElement.classList.toggle();\n\n// Example\n// For declaring the 'item' variable, see examples #3, #4, #5.\nitem.classList.toggle('active');\n```\n\n#### See more in the DOM API docs: [.classList property](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList), [.toggle() method.](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle)\n\n### Has Class\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.hasClass();\n\n// Example\n// Checks if any element with 'my-class' has the 'active' class.\n// Returns true or false\n// If there's at least one element with 'active' it's true, otherwise false.\n$('.my-class').hasClass('active');\n```\n\n#### See more in the jQuery API docs: [.hasClass() method.](https://api.jquery.com/hasclass/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nelement.classList.contains();\n\n// Example\n// Similar to the jQuery version, this one also checks if any element in the whole classList has the 'active' class\n// If at least one element has 'active', it's true, otherwise false.\n// For declaring the 'item' variable, see examples #3, #4, #5.\nitem.classList.contains('active');\n```\n\n#### See more in the DOM API docs: [.classList property](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList), [.contains() method.](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/contains)\n\n### Get Attribute\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.attr('attr-name');\n\n// Example\n// Returns the value of the href property of the FIRST occurrence of an element with 'my-class'\n$('.my-class').attr('href');\n```\n\n#### See more in the jQuery API docs: [.attr() method.](https://api.jquery.com/attr/)\n\n* ***JavaScript:***\n\n```javascript\n/* Syntax */\nElement.getAttribute('attr-name');\n\n// Example\n// For declaring the 'item' variable, see examples #3, #4, #5.\n item.getAttribute('href');\n```\n\n#### See more in the DOM API docs: [.getAttribute() method.](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute)\n\n### Set Attribute\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.attr('attr-name', value);\n\n// Example\n// Sets the value of the href property for ALL contact links that have the 'contact-link' class\n$('.contact-link').attr('href', 'contact.html');\n```\n\n#### See more in jQuery API docs: [.attr() method](https://api.jquery.com/attr/) (you need to use the same `.attr()` method as for getting an attribute value, but with two parameters instead of one)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nElement.setAttribute();\n\n// Example\n// For declaring the 'item' variable, see examples #3, #4, #5.\nitem.setAttribute('href', 'contact.html');\n```\n\n#### See more in the DOM API docs: [.setAttribute() method.](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)\n\n### Remove Attribute\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.removeAttr('attr-name');\n// Example\n// Removes 'target' attributes from contact links.\n$('.contact-link').removeAttr('target');\n```\n\n#### See more in the jQuery API docs: [.removeAttr() method.](https://api.jquery.com/removeAttr/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nElement.removeAttribute();\n\n// Example\n// For declaring the 'item' variable, see examples #3, #4, #5.\n item.removeAttribute('target');\n```\n\n#### See more in the DOM API docs: [.removeAttribute() method.](https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute)\n\n### Append a New Child Element\n\n* ***jQuery:***\n\n```javascript\n//Syntax\n.append('html-string');\n\n// Example\n// Appends an extra list element to the end of every ordered list on the page.\n$(\"ol\").append(\"\u003cli\u003e\");\n```\n\n#### See more in the jQuery API docs: [.append() method.](https://api.jquery.com/append/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nNode.appendChild();\n// Example\n// For declaring the 'ol' variable, see examples #3, #4, #5.\nol.appendChild(document.createElement(\"li\"));\n```\n\n#### See more in the DOM API docs: [.appendChild() method](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) and [.createElement() method.](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)\n\n### Prepend a New Child Element\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n\n.prepend('html-string');\n\n// Example\n// Prepends an extra list element to the beginning of every ordered list on the page.\n$(\"ol\").prepend(\"\u003cli\u003e\");\n```\n\n#### See more in the jQuery API docs: [.prepend() method.](https://api.jquery.com/prepend/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\n\nNode.insertBefore();\n\n// Example\n// For declaring the 'ol' variable, see examples #3, #4, #5.\nol.insertBefore(document.createElement(\"li\"), ol.firstChild);\n```\n\n#### See more in the DOM API docs: [.insertBefore() method](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore), [.createElement() method](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) and [firstChild property.](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)\n\n### Get or Set HTML Content\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.html();\n.html('html-string');\n\n// Example\n// Gets the HTML content of the FIRST element that matches 'my-class'.\n// Sets/resets the HTML content of EACH element that matches 'my-class'.\n$('.my-class').html();\n$('.my-class').html('\u003cem\u003eHello\u003c/em\u003e');\n```\n\n#### See more in the jQuery API docs: [.html() method.](https://api.jquery.com/html/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nElement.innerHTML;\n// Example\n// For declaring the 'item' variable, see examples #3, #4, #5.\nitem.innerHTML; // gets the value.\nitem.innerHTML = '\u003cem\u003eHello\u003c/em\u003e'; // sets the value.\n```\n\n#### See more in the DOM API docs: [.innerHTML property.](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)\n\n### Get or Set CSS Property\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.css('property-name');\n.css('property-name', value);\n\n// Example\n// Gets the 'color' value of the FIRST element that has 'my-class'.\n// Sets the 'color' value to 'white' for EVERY element that has 'my-class'.\n$('.my-class').css('color');\n$('.my-class').css('color', 'white');\n```\n\n#### See more in the jQuery API docs: [.css() method.](https://api.jquery.com/css/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nElementCSSInlineStyle.style.{propertyName};\n\n// Example\n// For declaring the 'item' variable, see examples #3, #4, #5.\nitem.style.color; // getting value\nitem.style.color = 'white'; // setting value\n```\n\n#### See more in the DOM API docs: [.style property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) and [CSS Properties Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) (for the JavaScript names of CSS properties)\n\n### Get or Set Text Content of an Element and All of Its Descendants\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.text();\n.text('text');\n\n// Example\n// Gets the text content of the FIRST element (and all of its descendants) that matches 'my-class'.\n// Sets/resets the text content of EACH element that matches 'my-class'.\n$('.my-class').text();\n$('.my-class').text('\u003cem\u003eHello\u003c/em\u003e');\n```\n\n#### See more in the jQuery API docs: [.text() method.](https://api.jquery.com/text/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nElement.textContent;\n\n// Example\n// For declaring the 'item' variable, see examples #3, #4, #5.\nitem.textContent; // gets the value\nitem.textContent = '\u003cem\u003eHello\u003c/em\u003e'; // sets the value\n```\n\n#### See more in the DOM API docs: [.textContent property.](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)\n\n### Get or Set Input Values\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.val();\n.val(val);\n\n// Example\n// Gets the value of the input with the 'name' name.\n// Sets/resets the value of the input with the 'name' name.\n$('input[name=name]').val();\n$('input[name=name]').val('Marilyn Monroe');\n```\n\n#### See more in the jQuery API docs: [.val() method.](https://api.jquery.com/val/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nHTMLInputElement.value;\n\n// Example\n// For declaring the 'input' variable, see examples #3, #4, #5.\ninput.value; // gets the value\ninput.value = 'Marilyn Monroe'; // sets the value\n```\n\n#### See more in the DOM API docs: [.value property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) (in the list of ''Properties that apply to any type of input element that is not hidden\")\n\n### Hide Element\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.hide();\n\n// Example\n// Hides all elements with 'my-class'.\n$('.my-class').hide();\n```\n\n#### See more in the jQuery API docs: [.hide() method.](https://api.jquery.com/hide/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nElementCSSInlineStyle.style.display = 'none';\n\n// Example\n// For declaring the 'item' variable, see examples #3, #4, #5.\nitem.style.display = 'none';\n```\n\n#### See more in the DOM API docs: [.style property.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)\n\n### Show Element\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.show();\n\n// Example\n// Displays all elements with 'my-class'.\n$('.my-class').show()\n```\n\n#### See more in the jQuery API docs: [.show() method.](https://api.jquery.com/show/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nElementCSSInlineStyle.style.display = '';\n\n// Example\n// For declaring the 'item' variable, see examples #3, #4, #5.\nitem.style.display = ''; // resets default.\nitem.style.display = 'block'; // sets display as block.\nitem.style.display = 'flex'; // sets display as flex.\n```\n\n#### See more in the DOM API docs: [.style property.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style#syntax)\n\n### Add Event Listener\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.on();\n\n// Example\n// Adds or removes the 'active' class to/from all elements with '.submenu' when #toggle is clicked.\n$('#toggle').on('click', function(){\n    $('.submenu').toggleClass('active');\n});\n```\n\n#### See more in the jQuery API docs: [.on() method](https://api.jquery.com/on/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nEventTarget.addEventListener('event', functionName);\n\n// Example\n// The code below only selects the FIRST element with the 'submenu' class.\n// To select all submenus, use the 'for' loop in // Example #3 and #4.\nlet toggle = document.querySelector(\"#toggle\");\nlet submenu = document.querySelector(\".submenu\");\n\ntoggle.addEventListener('click', function() {\n   submenu.classList.toggle('active');\n});\n```\n\n#### See more in the DOM API docs: [.addEventListener() method](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) and [DOM Event Reference.](https://developer.mozilla.org/en-US/docs/Web/Events)\n\n### Remove Event Listener\n\n* ***jQuery:***\n\n```javascript\n// Syntax\n.off();\n\n// Example\n// Removes the listed event handler when #toggle is clicked.\n$('#toggle').off('click', function(){\n    $('.submenu').toggleClass('active');\n});\n```\n\n#### See more in the jQuery API docs: [.off() method.](https://api.jquery.com/off/)\n\n* ***JavaScript:***\n\n```javascript\n// Syntax\nEventTarget.removeEventListener('event', functionName);\n\n// Example\n// The code below only selects the FIRST element with the 'submenu' class.\n// To select all submenus, use the 'for' loop in Example #3 and #4.\nlet toggle = document.querySelector(\"#toggle\");\nlet submenu = document.querySelector(\".submenu\");\n\ntoggle.removeEventListener('click', function() {\n   submenu.classList.toggle('active');\n});\n```\n\n#### See more in the DOM API docs: [.removeEventListener() method](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) and [DOM Event Reference.](https://developer.mozilla.org/en-US/docs/Web/Events)\n\n## Contributing\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\nPlease make sure to update tests as appropriate.\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnaldogonzalez81318%2Fjs-vs-jquery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnaldogonzalez81318%2Fjs-vs-jquery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnaldogonzalez81318%2Fjs-vs-jquery/lists"}