Shulou(Shulou.com)05/31 Report--

This article editor for you to introduce in detail the "jquery basic selector what are", the content is detailed, the steps are clear, the details are handled properly, I hope this "jquery basic selector what are" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

There are five basic selectors: 1, ID selector, match elements according to ID, syntax "$(" # id value ")"; 2, element selector, match elements according to element name, syntax "$(" element name ")"; 3, class selector, match elements according to class, syntax "$(". Class name ")"; 4, wildcard "*" selector, matching all elements, and so on.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

The basic selector is the most used selector in jQuery, and jquery has five basic selectors:

Selector function description ID selector # id matches an element element (tag) selector according to the given ID element matches all element class selectors based on the given element name. Class matches all elements according to the given class matching element wildcard * selector selector1,selector2,...,selectorN matches each selector to the element merge and returns together.

1. # id selector:

The jQuery # id selector selects the specified element through the id attribute of the HTML element.

The id of the elements in the page should be unique, so you need to use the # id selector to select the unique elements in the page

Example: use the # id selector to select the element of id= "myDiv1" and hide it.

My Test JQuery $(function () {$("button") .click (function () {$("# myDiv1"). Hide ();}); click

P element 1

P element 2

Hello

2. Element selector:

The jQuery element selector selects elements based on the element name.

Example: use the element selector to select all

Element to hide it.

My Test JQuery $(function () {$("button") .click (function () {$("p"). Hide ();}); click

P element 1

P element 2

Hello

3. Class selector:

The jQuery class selector can find elements through the specified class.

Example: use the class selector to select the element of Class= "myClass1" and hide it.

My Test JQuery $(function () {$("button") .click (function () {$(".myClass1"). Hide ();}); click

P element 1

P element 2

Hello, Hello.

4. Wildcard selector *

The jQuery wildcard selector can be used to select all elements, or all elements under an element

Example: add styles to all elements to make the font red

My Test JQuery $(function () {$("button") .click (function () {$("*") .css ("color", "red");}) }); click

P element 1

P element 2

Hello, Hello.

5. Union selector

When several elements have the same style attributes, you can call a declaration together, with elements separated by commas. The group selector is to group elements of the same style together, and each selector is separated by a comma. This comma tells the browser that the rule contains several different selectors. If there is no comma, then the meaning expressed is completely different. Omitting the comma will become the descendant selector we mentioned earlier, which we should be careful in using.

Example: set the font color of p and span elements to red

My Test JQuery $(function () {$("button") .click (function () {$("pjingspan") .css ("color", "red");}) }); click

P element

Span element 2 Hello Hello

After reading this, the article "what are the basic selectors of jquery" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.