DEV Community

Cover image for Day 3: Fighting jQuery
Kemystra
Kemystra

Posted on

Day 3: Fighting jQuery

The Feynman technique says that teaching a subject makes you better at it, which is what I'm trying to do here. You may correct me if you saw mistakes in this post

Intro to jQuery

Alright, so what is jQuery?
Well in the past, browsers set up different standards of JS for websites. This is cumbersome for developers. Like, no, I'm not gonna dive into my spaghetti code just because Bing can't load my site 🤣.

jQuery is intended to make accessing elements in HTML easy, with less boilerplate code. The syntax is guiltily simple:

$("#element")
Enter fullscreen mode Exit fullscreen mode

A dollar sign (or bling, if you may.), with a selector for elements in HTML. The selector use the same syntax as CSS selectors.

Compare that to this monstrosity:

document.getElementById("demo")
Enter fullscreen mode Exit fullscreen mode

Anyway, you get the point.

Load when ready! 🔫

A special boilerplate code for programmers:

$(document).ready(function() {
// stuff you want to do immediately
});
Enter fullscreen mode Exit fullscreen mode

If the JS script finishes loading before the HTML itself, immediately running the code will wreak havoc and bugs will surely spawn. This codeblock ensures that the document loads first, and when it's ready, we can run the necessary code without clashing with the loading of HTML files 🤯.

Functions for elements

  • addClass()

Obviously it adds new classes to the element.

$("button").addClass("btn btn-primary");
Enter fullscreen mode Exit fullscreen mode
  • removeClass()

...I don't think you need explanation on this one.

  • css(prop, val)

Add/modifies new CSS properties onto targeted elements.

$("h1").css("color", "white");
Enter fullscreen mode Exit fullscreen mode
  • prop(prop, val)

Add/modifies HTML properties of targeted elements.

$("button").prop("disabled", true);
Enter fullscreen mode Exit fullscreen mode

Afterwords

Not much is done today, either. The whole village lost internet connections to several ISPs for half of the day. Had to crunch my time for getting through courses and writing this blog. Hope tomorrow would be better. See ya 👋!

Follow me on Github!
Also on Twitter!

Top comments (0)