Day 3: Fighting jQuery

kemystra

Kemystra

Posted on April 7, 2022

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!

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
kemystra
Kemystra

Posted on April 7, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Day 12 / 100 Days of Code
100daysofcode Day 12 / 100 Days of Code

July 13, 2024

Day 6 / 100 Days of Code
100daysofcode Day 6 / 100 Days of Code

July 6, 2024

Day 4 / 100 Days of Code
100daysofcode Day 4 / 100 Days of Code

July 4, 2024

Day 3 / 100 Days of Code
100daysofcode Day 3 / 100 Days of Code

July 3, 2024

Day 2 / 100 Days of Code
100daysofcode Day 2 / 100 Days of Code

July 2, 2024

ยฉ TheLazy.dev

About