* on the page, see examples examples #3, #4, #5 * For declaring the 'item' variable by selecting elements with 'my-class' * Adds the 'second-class' class to every 'my-class' element * For declaring the 'item' variable, see examples #3, #4, #5 * Checks item and all of its parents and returns the first div it finds * then returns the first paragraph element it finds. * Checks each 'my-class' element and all of its parent elements, * 'my-class a' on the page, see examples examples #3, #4, #5 NonDocumentTypeChildNode.previousElementSibling /** ![]() * Selects the previous siblings of all elements with 'my-class a' * 'my-class a' on the page, see examples #3, #4, #5 * For declaring the 'item' variable by selecting elements with NonDocumentTypeChildNode.nextElementSibling /** * Selects the next siblings of all elements with 'my-class a' querySelectorAll() method, :scope pseudo-class (see 'Direct Children' section). Let siblings = (':scope > :not(.find-siblings)') Let item = document.querySelector('.find-siblings') Let nodes = document.querySelectorAll('.my-class a') * you can find the 'lor' property below in this cheat sheet * For the sake of testing, I made the selected elements red, * through it to find all the span tags we want * At first querySelectorAll() returns a NodeList, so we have to loop to find the first element (also if there's only one) * Note: searches for all descendants not just for children * Find all the span tags that are descendants of links within See more in the jQuery API docs: first() method. ![]() * Selects the first link among the descendants of the 'my-class' class See more in the jQuery API docs: jQuery() global function.ĭocument.querySelectorAll() /* Example */ĭocument.querySelectorAll('.my-class a') * Selects all the links among the descendants of the 'my-class' class The jQuery() function, or $() in short, is the global function in jQuery that you can use to select any element in the DOM. Now, let’s see the 30 most commonly used jQuery to JavaScript equivalents. ![]() So, the trade-off between jQuery and JavaScript is more custom-written code vs. However you need to judge for yourself if it’s worth moving to native JavaScript as you’ll need to write more code to achieve the same result. For instance, this is how the code above looks in JavaScript: let toggle = document.querySelector('#toggle') Įven though JavaScript is more verbose, you don’t have to use a third-party library, as the DOM API (that you call with your JavaScript code) is built into your web browser. As a result, you’ll have one less dependency and in most cases, your page will also load faster than with jQuery. Native JavaScript is more verbose, you can’t just add actions to any DOM element–first you need to pass it to a variable, then you can perform different actions on it. Its biggest advantage is that it lets you easily select any DOM element on the page and add user actions to it by using the “dot notation”, for instance: /* Adds the. JQuery is a JavaScript library that helps web developers manipulate the document object model (DOM) to dynamically react to user actions and state changes. To help you with the move, here’s a jQuery to JavaScript cheat sheet that includes the JavaScript equivalents to the most frequently used jQuery functionality. As a result, many frontend developers have decided to move from jQuery to JavaScript to decrease the number of dependencies and thus page load times. As modern browsers support a wide range of JavaScript functionalities, we no longer need a third-party library to manipulate the DOM with relative ease. Even though jQuery is still a popular JavaScript library and has a place in web development, native web APIs have evolved a lot in recent years.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |