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.
网友评论