JQuery uses (1) to mark element attributes and jquery to mark element attributes

JQuery uses (1) to mark element attributes and jquery to mark element attributes

JQuery mainly introduces how jQuery controls pages, including the attributes of elements, css style, DOM model, form elements, and event processing.

Tag Element attributes

Each tag in html has some attributes, which are displayed in various States on the page, such as the <a> tag

<A herf = "http://www.baidu.com" title = "isaac" target = "_ blank" id = "linkisaac">

<A> indicates the name of the tag, which is a hyperlink. In addition, attributes such as href titile target id indicate the status of the hyperlink on the page.

This section describes how to control page attributes from the jQuery perspective.

1. each () traversal Element

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 to indicate the sequence number of the element. For tagged attributes, you can use the each () method with the this keyword to obtain or set the attribute values corresponding to each element in the selector.

Use the each () method to traverse all elements.

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

The code above contains 7 P elements. First, use $ ("p") to obtain all p element sets on the page, and then use the each () method to traverse all the images. Use the this keyword to access the image, obtain the image id, and set the image id attribute. The index of the function of the each () method is the sequence number of the element.

2. Get the attribute value. Attr (name) Method

In addition to traversing the elements in the entire selector. Most of the time, you need to obtain the characteristic value of an object. In jQuery, you can easily implement this through the attr (name) method. This method gets the attribute value of the first element set. If no match exists, unfefined is returned.

Script type = "text/javascript" >$ (function () {var sTitle = $ ("p "). attr ("title"); // obtain the title attribute value of the first p element $ ("# display "). text (sTitle) ;}); </script> <div> <p id = "001" title = "isaac, </p> <p id = "002" title = "isaac, holobby "> second </p> <p id =" 003 "> second </p> <p id =" 004 "> second </p> <p id = "005"> second </p> <p id = "006"> second </p> <p id = "007"> second </p> <span id = "display"> </span> </div>

If you want to obtain the title attribute value of the second p, you can use the position selector.

$ (Function () {var sTitle = $ ("p: eq (1 )"). attr ("title"); // obtain the title attribute value of the 2nd p elements $ ("# display "). text (sTitle );});

3. Set the attribute value. Attr (name, value)

In addition to element values, the attr () method can also set attribute values. The general expression is

attr(name,value)

For example, the following code opens the page hyperlinks in a new window.

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

Example

<Script type = "text/javascript"> function DisableBack () {$ ("button: gt (0 )"). attr ("disabled", "disabled") ;}</script> <div> <button onclick = "DisableBack ()"> first Button </button> & nbsp; <button> second Button </button> & nbsp; <button> third Button </button> & nbsp; </div>

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

In many cases, we want the attribute values to change regularly based on different elements. At this time, we can use attr (name, fn), and the second parameter is a function. This function accepts a parameter, which is the sequence number of the element and the return value is a string.

<Script type = "text/javascript"> $ (function () {$ ("div "). attr ("id", function (index) {// set the id to return "div-id" + index ;}). each (function () {// locate the span mark for each item $ (this ). find ("span" example .html ("(id = '" + this. id + "')");});}); </script> <div> 0th items <span> </div> <div> 1st items <span> </div> <div> 2nd item <span> </div>

Returned content

0th items (id = 'div-id0') 1st items (id = 'div-id1') 2nd items (id = 'div-id2 ')

The above Code uses attr (name, fn) to set the id attribute values of all <div> blocks on the page to parameters related to sequence numbers. Use the each () method to traverse the div block and display the id value in the corresponding <span> tag. This shows the strength of the jQuery chain.

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

<Script type = "text/javascript"> $ (function () {$ ("img "). attr ({src: "06.jpg", title:" name 1 ", alt:" name 2 "});}); </script> 

Execution result:

4. Delete attributes

When setting the value of an element attribute, you can delete the attribute value using the removeAttr (name) method. At this time, the element will restore the default settings. For example, the following code does not disable all buttons.

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

RemoveAttr (name) deletes an attribute, which is equivalent to not deleting this attribute in the html Tag. This feature is not canceled. After the above Code is run, all buttons still have the ability to set to disabled,