Intro to jQuery: The Power Of jQ

How to select element?

In jQuery, we select an element with$().

$(“Selector Name”)

Selecting with “$” is very similar to querySelector and querySelectorAll. In that we provide a CSS style selector. Then, jQuery will return all matching element.

I updated the jQuery Demo HTML page a little by adding a <a> tag and id “test” in the list.

If I want to select the h1, I just need to type $(“h1”)[0] in the console, and it will return us the h1.

If I want to select the link, I just need to type $(“a”)[0], and it will return the link.

If I want to select the list with special id, I just need to type $(“#test”)[0], and it will return that list.

Moreover, selecting element with the dollar sign in jQuery will return a list even if there’s only one item. And it is much shorter and easier to write syntax.

How to manipulate style?

The .css() method is jQuery’s interface to styling.

$(select).css(property, value)

If I want to style the h1 to be pink, I just need to write $(“h1”).css(“color”, “pink”).

If I want to add a background and a border as well as change the color, I will pass in an object with styles.

In addition, we can style multiple elements at once.

If I want to change all list item color to be purple, I will do that:

The .css() method is very powerful because we can change individual properties and also pass on an object full of key pairs. With jQuery, if I have a collection of elements, it automatically loops over that and applies .css() to every single one.