The markup element attribute usage instance used by jquery _jquery

This example describes the markup element attribute usage that jquery uses. Share to everyone for your reference. The specific analysis is as follows:

The use of jquery here is mainly about how jquery controls pages, including attributes of elements, CSS style styles, Dom models, form elements, and event handling.

Tag attributes of an element

Each tag in the HTML has attributes that are displayed in various states on the page, such as the <a> tag below

Copy Code code as follows:

<a herf= "http://www.baidu.com" title= "Isaac" target= "_blank" id= "LINKISAAC" >

The tag <a> represents the name of the tag, a hyperlink, and an attribute such as the href titile target ID that represents the various states of the hyperlink on the page.

This article from the jquery point of view, further explain the page attribute control method.

1.each () Traverse element

The each (callback) method is used primarily to traverse an element in a selector, which takes a function as an argument, which takes an argument and refers to the ordinal of an element. For a tagged property, you can use the each () method to match the This keyword to get or set the property value for each element in the selector.

Use the each () method to traverse all elements.

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("P"). each (function (index) {
This.title = "This is the first" + (index+1) + "A p,id is:" + this.id;
});
});
</script>
<div>
<p id= "001" > the first paragraph </p>
<p id= "002" > second paragraph </p>
<p id= "003" > second paragraph </p>
<p id= "004" > second paragraph </p>
<p id= "005" > second paragraph </p>
<p id= "006" > second paragraph </p>
<p id= "007" > second paragraph </p>
</div>

There are 7 p elements in the above code, first taking advantage of $ ("P") to get all the P elements in the page collection, and then using each () method to traverse all the pictures. Access the picture through the This keyword, get the picture's ID, and set the picture's ID attribute. Where the function of each () method is index to the ordinal of the element.

2. Gets the value of the property. attr (name) method

In addition to traversing the elements in the entire selector. Most of the time you need to get the value of an object's characteristics, which can be easily achieved by using the attr (name) method in jquery. This method gets the first property value in the element set. Returns unfefined if there is no match.

Copy Code code as follows:

Script type= "Text/javascript" >
$ (function () {
var stitle = $ ("P"). attr ("title");//Get the Title property value of the first P element
$ ("#display"). Text (stitle);
});
</script>
<div>
<p id= "001" title= "Isaac,hobby" > the first paragraph </p>
<p id= "002" title= "Isaac,hobby" > second paragraph </p>
<p id= "003" > second paragraph </p>
<p id= "004" > second paragraph </p>
<p id= "005" > second paragraph </p>
<p id= "006" > second paragraph </p>
<p id= "007" > second paragraph </p>
<span id= "Display" ></span>
</div>

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

Copy Code code as follows:

$ (function () {
var stitle = $ ("P:eq (1)"). attr ("title");//Get the Title property value of the 2nd P element
$ ("#display"). Text (stitle);
});

3. Set the value of the property. attr (Name,value)

In addition to getting the value of an element, the attr () method can also set the value of the property, and the general expression is

Copy Code code as follows:

attr (Name,value)

For example, the following code causes the hyperlinks for the page to open in a new window.

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("a[href*=http]"). attr ("target", "_blank");
});
</script>

Example:

Copy Code code as follows:

<script type= "Text/javascript" >
function Disableback () {
$ ("button:gt (0)"). attr ("Disabled", "disabled");
}
</script>
<div>
<button onclick= "Disableback ()" > First button</button>
<button> a second button</button>
<button> a third button</button>
</div>

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

Most of the time, we want the value of the attribute to change according to the rules of the different elements. This time we can use attr (NAME,FN), and the second parameter is a function. The function takes a parameter, the ordinal number of the element, and the return value is a string.

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("div"). attr ("id", function (index) {
Set an ID to an ordinal-related parameter
Return "Div-id" + index;
}). each (function () {
Find the span marker for each item
$ (this). FIND ("span"). HTML ("(id= ' + this.id +"));
});
});
</script>
<div> No. 0 <span></span>
</div>
<div> 1th <span></span>
</div>
<div> 2nd <span></span>
</div>

Back to content:

Copy Code code as follows:

Item No. 0 (id= ' div-id0 ')
Item 1th (id= ' div-id1 ')
Item 2nd (id= ' Div-id2 ')

The above code sets the id attribute value of all <div> blocks in the page to the ordinal-related parameter through attr (NAME,FN). The DIV block is traversed by each () method, and the ID value is displayed in the respective <span> tag. This can see the power of the jquery chain.

Sometimes for some elements, you want to set its different properties at the same time, if the above method requires a set of properties. jquery is user-friendly, attr () also provides a list setting attr (properties) method. You can set multiple properties.

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("img"). attr ({
SRC: "06.jpg",
Title: "Name 1",
alt: "Name 2"
});
});
</script>

Execution results:

Copy Code code as follows:

4. Delete Attributes

When you set the value of an element property, you can delete the property value by using the Removeattr (name) method. The element then restores the default settings. For example, the following code makes all buttons not disabled.

Copy Code code as follows:

$ (function () {
$ ("button"). Removeattr ("Disabled")
});

The removeattr (name) deletion property is equivalent to not deleting the attribute in an HTML tag. Does not cancel this feature of the tag. After the above code runs, all buttons still have the ability to set to disabled.

I hope this article will help you with your jquery programming.