Usage examples of tag element attributes used by jQuery_jquery

The example in this article describes the usage of tag element attributes used by jQuery. Share it with everyone for your reference. The specific analysis is as follows:

The use of jQuery introduced here mainly includes how jQuery controls the page, including element attributes, css style, DOM model, form elements and event processing, etc.

Attributes of tag elements

Every tag in HTML has some attributes, and their tags present various states in the page, such as the following tag

Copy code The code is as follows:

The tag represents the name of the tag, which is a hyperlink. In addition, attributes such as href titile target id indicate the various states of this hyperlink in the page.

This article further explains the page attribute control method from the perspective of jQuery.

1.each() traverses elements

The

each(callback) method is mainly used to traverse the elements in the selector. It accepts a function as a parameter. This function accepts a parameter that refers to the serial number of the element. For marked attributes, you can use the each() method with the this keyword to get or set the attribute value corresponding to each element in the selector.

Use each() method to traverse all elements.

Copy code The code is as follows:

First paragraph

Second paragraph

Second paragraph

Second paragraph

Second paragraph

Second paragraph

Second paragraph

There are 7 P elements in the above code. First, use $("p") to obtain the set of all p elements in the page, and then use the each() method to traverse all pictures. Access the image through the this keyword, obtain the image's ID, and set the image's ID attribute. The function index of each() method is the serial number of the element.

2. Get the value of the attribute. attr(name) method

Except when iterating over the elements in the entire selector. Many times you need to get the value of the characteristics of an object. This can be easily achieved through the attr(name) method in jQuery. This method gets the first attribute value in the element set. If there is no match, return unfefined.

Copy code The code is as follows:

script type="text/javascript">
$(function() {
var sTitle = $("p").attr("title");//Get the title attribute value of the first p element
$("#display").text(sTitle);
});

First paragraph

Second paragraph

Second paragraph

Second paragraph

Second paragraph

Second paragraph

Second paragraph

If you want to get the title attribute value of the second p, you can do it through the position selector.

Copy code The code is as follows:

$(function() {
var sTitle = $("p:eq(1)").attr("title");//Get the title attribute value of the second p element
$("#display").text(sTitle);
});

3. Set the value of the attribute. attr(name,value) In addition to getting the value of the element, the

attr() method can also set the value of the attribute. The general expression is

Copy code The code is as follows:

attr(name,value)

For example: The following code will cause all hyperlinks on the page to open in a new window.

Copy code The code is as follows:

Example:

Copy code The code is as follows:

First Button
Second Button
The third Button

With the position selector, when the first button is clicked, the following two buttons are disabled at the same time.

Many times, we hope that the value of an attribute can change regularly based on different elements. At this time we can use attr(name,fn), the second parameter is a function. This function accepts one parameter, which is the serial number of the element, and the return value is a string.

Copy code The code is as follows:

Item 0

Item 1

Item 2

Return content:

Copy code The code is as follows:

Item 0 (id='div-id0')
Item 1 (id='div-id1')
Item 2 (id='div-id2')

The above code sets the id attribute value of all

blocks in the page to serial number-related parameters through attr(name,fn). And traverse the div block through the each() method to display the id value in the respective tag. This shows the power of jQuery chain.

Sometimes for some elements, you want to set different attributes at the same time. If you use the above method, you need to set the attributes one by one. jQuery is very user-friendly, and attr() also provides a list setting attr(properties) method. Multiple properties can be set.

Copy code The code is as follows:

Execution result:

Copy code The code is as follows:

4. Delete attributes

When setting the value of an element attribute, the attribute value can be deleted through the removeAttr(name) method. The element will then be restored to its default settings. For example, the following code makes all buttons undisabled.

Copy code The code is as follows:

$(function() {
$("button").removeAttr("disabled")
});

removeAttr(name) deleting the attribute is equivalent to not deleting the attribute in the html tag. This does not mean that this feature of the mark has been eliminated. After the above code is run, all buttons still have the ability to be set to disabled.

I hope this article will be helpful to everyone’s jQuery programming.