Self-learning Selector in jQuery


In the previous lesson, readers read along with Taimienphi.vn to learn about the basic syntax of jQuery, in the next lesson below, Taimienphi.vn will introduce you more about Selector in jQuery.


Self-learning Selector in jQuery

The following jQuery lesson Taimienphi.vn will introduce you to Selector in jQuery as well as how to select HTML elements with jQuery.

Table of Contents:
1. Select elements with jQuery
2. Select elements by ID
3. Select elements according to Class Name
4. Select elements by name
5. Select elements by attribute
6. Select elements by combining the CSS selector
7. Custom selector in jQuery

1. Select elements in jQuery

JavaScript is commonly used to retrieve or modify the content, value of HTML elements on the page, as well as to apply some effects such as hiding, showing …. However, before taking any action periodically we have to find or select the target HTML element.

Selecting elements through JavaScript approaches can be a bit difficult, but with the help of jQuery, this task is much simpler. One of the most salient features of jQuery is to make it easier to select DOM elements.

Tips: jQuery supports most of the selectors defined in the latest CSS3 as well as custom selectors. Custom selectors improve the ability to select HTML elements on a page.

2. Select elements by ID

Alternatively, we can use the ID selector to select a unique element with a unique ID on the page.

For example: The following jQuery code snippet will select and highlight an element with the ID id = “mark” attribute when the document is ready:

selector in jquery

The output will look like the following:

selector in jquery 2

In the example above $ (document) .ready () is the event used to manipulate a secure page with jQuery. The code included in this event only runs when the DOM page is ready.

3. Select elements according to Class Name

The class selector (class selector) can be used to select elements with a specific class.

For example: In the example below the jQuery code will select and highlight elements with class = “mark” when the document is ready:

selector in jquery 3

The output will look like the following:

selector in jquery 4

4. Select elements by name

The selector element is used to select elements based on the element’s name.

For example: The jQuery code snippet below will select and highlight all the text snippets, ie the elements p in the document:

selector in jquery 5

The output will look like the following:

selector in jquery 6

5. Select elements by attribute

We can also use the selector attribute to select an element within HTML attributes, such as an attribute. target of the link or attribute type of the input.

For example: In the example below the jQuery code snippet will select and highlight all the input text, ie the element input have the type = “text” attribute when the document is ready:

selector in jquery 7

The output will look like the following:

selector in jquery 8

6. Select elements by combining the CSS selector

If desired, we can also combine CSS selectors to select elements more precisely. For example, combining the selector class with the selector element to find elements in documents that contain specific types and classes.

For example: The following example illustrates how to select elements by combining the CSS selector:

selector in jquery 9

The output will look like the following:

selector in jquery 10

7. Custom selector in jQuery

In addition to the CSS selectors defined, jQuery also provides custom selectors to improve the ability to select elements on the page.

For example: The following example illustrates custom selectors in jQuery:

selector in jquery 11

The output will look like the following:

selector in jquery 12

The above lesson Taimienphi.vn has just introduced you to the selector in jQuery. In the next lesson, Taimienphi.vn will introduce you further JQuery event.

https://thuthuat.taimienphi.vn/selector-in-jquery-51486n.aspx
If you have any questions or questions, you can leave your comments in the comments section below.

.

Add a Comment

Your email address will not be published. Required fields are marked *