This content originally appeared on DEV Community and was authored by Kemystra
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")
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")
Anyway, you get the point.
Load when ready! 🔫
A special boilerplate code for programmers:
$(document).ready(function() {
// stuff you want to do immediately
});
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");
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");
prop(prop, val)
Add/modifies HTML properties of targeted elements.
$("button").prop("disabled", true);
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!
This content originally appeared on DEV Community and was authored by Kemystra
Kemystra | Sciencx (2022-04-07T14:00:13+00:00) Day 3: Fighting jQuery. Retrieved from https://www.scien.cx/2022/04/07/day-3-fighting-jquery/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.