This week was jQuery from Colt Steele The Web Developer Bootcamp.
Intro to jQuery
-Why Use jQuery
-Including jQuery
-Selecting with jQuery
-Text and HTML
-Attr and Val
Advanced jQuery
-jQuery Events: Click
-jQuery Events: Keypress
-jQuery Events: On
Intro to jQuery
jQuery is known as write less do more. It is a DOM manipulation library.
jQuery is a JavaScript library that interacts with HTML/CSS, document object model, and much more.
With jQuery it is possible to
Select Elements, Manipulate Elements, Create Elements, Add Event Listeners, Animate Elements, Add Effects and Make HTTP Request (AJAX).
It is simple to include jQuery in projects either by downloading from the website or linking to the CDN.
https://jquery.com/
Why Use jQuery
It is not always necessary to use jQuery. jQuery has a purpose but it is not always a first option to get something done.
http://youmightnotneedjquery.com/
jQuery was first created to fix broken DOM API, but now most issues with the DOM API have been addresses there are not as much broken features which renders most of jQuery unnecessary.
These are the reasons not to use jQuery
The DOM API is no longer broken
It doesn’t do anything that you cant do on your own
It is an unnecessary dependency
Performance issues
Lots of people are moving away from jQuery
These are the reasons to use jQuery
There is a lot of projects that use jQuery
It is a popular framework
It is still a supported JavaScript library
It expands the concept of DOM manipulation
Including jQuery
Similar to bootstrap, jQuery can be downloaded from the website to your local machine or you can link the jQuery CDN into your project.
Selecting with jQuery
$() is used to select elements with jQuery
$(“selectGoesHere”) this selector is similar to querySelectorAll
.css() is used to style elements with jQuery
.css(property, value)
Text and HTML
.text() is jQuery version of .textContent in that it returns every element as text only
.html() is jQuery version of .innerHTML in that it returns every element as html.
Attr and Val
.attr method is used to set the value of attributes. Setting multiple attributes or using values returned by a function.
.val method is primary used to get the values of form elements such as input, select and textarea.
jQuery Events: Click
Click() will add a click listener to the elements.
$(“#submit”).click(function() {
Console.log(“Another click”)
jQuery Events: Keypress
keypress() will add a keypress listener to the elements.
$(“input [type=”text”).keypress(function() {
alert(“text input keypress”)
jQuery Events: On
on() supports all types of events
$(“button”).on (“db click, function() {
alert(“clicked)
Top comments (4)
Hey Regina! Nice writeup.
It's true, a lot of folks are moving away from jQuery. I used it every day for many years - maybe even had some affection for it - but these days, there are legitimate problems with it. For example, jQuery has its own proprietary events system which doesn't work with the real events built into modern browsers. It seems like a small thing, but it means the writing is on the wall.
The library I moved to is called Stimulus. It's a lot more like jQuery than React and a lot of the other libraries you hear about. Check it out! You might like what you see.
Good luck with your program and don't be shy. I'm happy to answer questions if you're stuck.
Thank you for the comment. I am trying to learn as much as I can. Technology changes so quickly that it can sometimes feel overwhelming to understand it all. But I appreciate the even obsolete technology still has it utilization in the world.
You're not wrong, and it's a good attitude to have. Frankly, it's all overwhelming even if you've been at it a long time. The key is to enjoy the exploration. :)
Anyhow, the two most critical aspects of learning any technology are 1. have practical problem or project that you're motivated to solve and 2. have a community with mentors who don't mind questions or code review.
Number 2 is why I reached out. Keep up the great work!
Thank you for reaching out to me. I am still in my early stages so my projects have not really taken off yet but I look forward to the future and glad that I have someone I can use to help when those days arrive!