jQuery Notes – Selecting & Modifying


Selection

jQuery is an extremely popular Javascript library. It helps to speed up common tasks if you don’t mind adding a script that is 9000 lines long to your project. This post will cover the very basic methods that jQuery uses to select and modify elements.

To begin, you select elements with jQuery with the $ symbol:

$()

This is simply referring to a function in the jQuery library. To select elements with vanilla Javascript see my post here. jQuery $() uses CSS style selectors and behaves very similarly to querySelectorAll(). Here are some examples of selections:

:nth-of-type(n)

How to select a specific number n in a list. Given this:

We can see that if we select all li‘s and ask for the first it will give us the first li in each list, whether the list is ordered or not. If we want to select just the first li in the unordered list we have to specify that.

Manipulation

Then to apply a style to the selected object you use the following jQuery method:

.css(property, value)

To modify elements with vanilla Javascript see my post here.

Here is a quick example of the .css method:

We can also pass in an object for the styles:

?is this the correct syntax for this? Camel case instead of background-color etc?

!Yes! In jQuery you use camel case instead of actual CSS selectors!

Here are some more quick examples:

See the Pen jQuerySimpleSelectAndManipulate by Nicholas Coughlin (@nicholascoughlin) on CodePen.

+ There are no comments

Add yours