jQuery is a JavaScript library that provides tools to make life simpler for web developers. Behind the scenes, the jQuery source code is written in JavaScript. That means that anything we do in jQuery could be accomplished in JavaScript with more code. jQuery is designed to simplify DOM manipulation, and its syntax is easier to grasp. It uses CSS-style selectors to pick DOM elements (elements from the HTML). That is, you can select an element by using its tag, class, or id. For example:
$(‘span’) will select all of the span elements,
$(‘.container’) will select all of the elements with a class of container, and
$(‘#hero-image’) will select the element with the id of “hero-image”.
Because CSS selectors can get complex, you can select very specific elements on your page.
Once you have selected a DOM element, you can change it at will using a large array of jQuery manipulation methods.
Here is an example of using jQuery to manipulate some HTML.
The HTML:
DOM’s JavaScript component:
The above code will change all of the paragraph elements on the page to have a value of “Boo!”. Go to a webpage with jQuery loaded on it, like css-tricks.com, open the console with `command` + `option` + `j`, and paste that code into the prompt. When you execute that code, you’ll notice all of the paragraphs will have changed to say “Boo!”
As you’re working with jQuery to manipulate DOM elements, you are almost always either getting or setting a value. If you want to find out the current value of some attribute, you are getting. If you want to change the value, you should be setting. This is the pattern:
- Getting a value: $(“CSS Selector”).someJqueryMethodName()
- Settings a value: $(“CSS Selector”).someJqueryMethodName(valueToSet)
Notice that getting a value doesn’t require an argument to the jQuery method, but setting a value does.
Following that pattern, we could get the value of the text of an element on the page:
- Get the text of the readme (it lives inside of an article tag): $(‘p’).text()
- Set the text of the readme to: “Boo!”: $(‘p’).text(“Boo!”)
Some jQuery methods require an argument in either case. For example, the .css() jQuery method works as follows:
- Get the background color: $(‘p’).css(“background-color”)
- Set the background color to blue: $(‘p’).css(“background-color”, “orange”)
Some of the most common jQuery DOM manipulations are:
You can use these manipulation methods, along with event listeners, to change your page in response to user actions.
- Append HTML content as a child of the current selected element: $(‘.selected-element’).append(htmlContent)
- Add/remove a new class to/from the selected element: $(‘.selected-element’).addClass(className) / .removeClass(className)
- Replace all of the current HTML content within the selected element with the inputted htmlContent: $(‘.selected-element’).html(htmlContent)
- Replace the current text content of the selected element with new text: $(‘.selected-element’).text(newTextString)
- Change the value within an input element: $(‘.selected-input-element’).val(newValue)
- Remove the selected element from the page: $(‘.selected-element’).remove()
You can use these manipulation methods, along with event listeners, to change your page in response to user actions.
“Now is a great time to learn web development because there are so many quality resources available to find and use. Once you gain that skill, there’s an entire world of learning to do!”
“Writing code is a craft as well as a creative outlet, and it’s not limited by industry. The discipline of creating software is useful to anyone, as it’s a way to think about problems and know how to technically solve them.”
