learn-co-curriculum / cssi-3.4-jquery-basics Goto Github PK

#jQuery Basics

Okay, so we know how to include the jQuery library, and we’ve seen that it can help us change the text on elements we select. jQuery is a whole lot more than that, though! It makes tons of things we’d want to do a breeze, like:

• finding particular elements on the page
• adding and removing elements
• changing content on the fly
• triggering an action when a user clicks a particular element
• triggering an action when a user types on the keyboard
• hiding and showing elements
• changing the style of elements on the fly
• getting data from a server
• sending data to a server

If you are looking for something in particular, check out the jQuery Cheatsheet and look for what you want to do. We'll go over the main things you can do now, but don't worry about memorizing - you'll always be able to look up the syntax when you need to.

JQuery - Selection and the DOM

In order to do anything with jQuery, we first need to be able to navigate the DOM. In the Twitter example, we saw that we could select all elements that match a certain critera with the $() method.

Some examples:

##DOM Traversal(Movement) Sometimes, you have an element selected already, and you want to select an element or multiple elements that are related to it - maybe its parent or children, or all of its descendants, or the next child of its parent element (a sibling!).

JQuery gives us the power to move up and down the 'tree' of the DOM. There are a ton of methods for moving around, and you can browse through them on the cheatsheet under 'Tree Traversal'.

##Filtering After you select lots of elements, you want to do something to a selection of them. jQuery has some great methods for choosing the particular elements you want from a set of them. Check them out on the cheatsheet under 'Filtering'.

##More Selection There’s lots of ways to select elements, and pretty much any kind of element selection problem is easy with jQuery - if you can find the right method! If you have the time, check out the other methods on the cheatsheet. See if you can figure out what they do, and when you might need them.

##Adding and removing elements Now that we know how to select elements and get around the DOM, let’s check out some of the cool things we can do!

Say you want a user to be able to add and remove items on a list - you don’t want to send a whole new HTML document from the server every time they do! Instead, you can use jQuery to add an element dynamically.

$('#my_list').append("<li>New element</li>")

And to remove an element:

$('#elementToRemove').remove()

The cheatsheet has lots more ways to add and remove elements. How would you add an element around a group of elements? How about removing an element without removing the elements inside it?

JQuery and CSS

JQuery doesn’t just work to modify HTML - it also works to change the style of a page! Any kind of css that you might want to add, you can add!

Here are some methods you can use to edit your CSS with JQuery:

• addClass() - Adds one or more classes to the selected elements
• removeClass() - Removes one or more classes from the selected elements
• toggleClass() - Toggles between adding/removing classes from the selected elements
• css() - Sets or returns the style attribute

View jQuery Basics on Learn.co and start learning to code for free.