Web Dev Week 5: jQuery

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)

jQuery is a beneficial tool to utilize when it comes to DOM manipulation.

Comments

[leastbad]

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.

[Code_Regina]

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.

[leastbad]

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!

[Code_Regina]

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!