Probably one of the most popular things to do with jQuery, and it’s so underrated as to how easy it really is with raw JavaScript. click (function (){$ (this). Feed. Twitter

The first parameter removes the specified class from an element, and returns false. With jQuery, this looks like so: Which would toggle the class ‘active’ for one click, and toggle it back for the second click. I can’t think of that many more reasons to use jQuery; it saves time, does the job for us, cross-browser support already nailed, makes selectors and my life real easy. add – Adds a class to an element’s list of classes.
✌️ Like this article? document.documentElement refers to the root element of the document, i.e. What an idiot. Alternatively, if you want to support old browsers without using any polyfill, just use the element's className property to check whether the class exists or not: In the above code, we first split the className property value, which refers to the class attribute, into string tokens.

We can then begin to take this and create our own little function that does this for us: Using some more RegEx and our hasClass function again, we can reuse most of the removeClass function and simply provide an else, to then add the class back on if it doesn’t exist!

In vanilla JavaScript, you can use the contains() method provided by the classList object to check if any element contains a specific CSS class. Check your email for the download link. for free! What happened before jQuery? This also comes in handy now in our addClass function, as we’ll be using it again! Copyright © 2016-2020 Ultimate Courses. you can invert it’s meaning, so technically this means ‘if the element doesn’t have the class’.

write about modern JavaScript, Node.js, Spring Boot, core Java, RESTful APIs, and all things Klassendeklarationen. We’ll start with hasClass, typically in jQuery this looks like so: With it’s usage potentially something like this: So we want to create our own hasClass now.

Tip: Learn more about the classList property in our JavaScript Reference. In this post you’ll learn how to use JavaScript to find a substring inside a string. I’d succumbed to being lazy, and at times have included the mighty jquery.js file for a few simple lines of code. I’m writing this post because of many observations I’ve seen from around the web development community. Klassenausdrücke und 2.

used by the world’s best instructors. Another useful jQuery gizmo, usually seen doing this: Now we can create a removeClass function, which is a little more complicated, using RegEx again and our earlier hasClass: The toggle functions tend to be my favourites, allowing you to simply add/remove things as you please.


I'm Todd, creator of Ultimate Courses and Google Developer Expert teaching beginner to advanced JavaScript, Angular, NGRX, TypeScript through my online courses and blogs. Tip: Learn more about the className property in our JavaScript Reference. “This book is straight to the point, syntax exploration, comprehensive guide, real-world examples, tips and tricks - it covers all you need Todd Motto, author of Exploring JavaScript Array Methods. Things might look a little backwards here, specifying the element inside the function as opposed to hooking off the selector, but don’t worry – it’s totally cool. I’m slowly phasing jQuery out, and focusing more on my JavaScript skills to become fully framework agnostic.

Your straight-forward guide to the JavaScript ecosystem. Here’s a few to get you started. jQuery makes you as a developer reliant on a framework, and (I’m going to say it! Build next generation applications, beginner to master. Let us say we have the following HTML element: And we want to check if the