JQuery uses (1) to mark element attributes

JQuery uses (1) 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. Each tag in html contains some attributes, which are displayed in various States on the page, for example, the <a> tag <a herf = "http://www.baidu.com" title = "isaac" target = "_ blank" id = "linkisaac"> tag <a> represents the Tag Name, is a hyperlink, and href titile target id and other attributes indicate the various statuses of the hyperlink in the page. This section describes how to control page attributes from the jQuery perspective. 1. The each () traversal element 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 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"> section 2 </p> <p id = "007"> section 2 </p> </div> the code above contains seven P elements, 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. The attr (name) method not only traverses 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, 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. In addition to element values, the attr (name, value) attr () method can also set attribute values. A common 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> the second Button </button> & nbsp; <button> the third Button </button> & nbsp; </div> uses 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> item 0th (id = 'div-id0 ') 1st items (id = 'div-id1') 2nd items (id = 'div-id2') the above Code uses attr (name, fn) The id attribute values of all <div> blocks are set 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> 4. delete attribute when setting the value of an element attribute, you can use the removeAttr (name) method to delete the attribute. Delete value. 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 equivalent to not deleting it in the html Tag. This feature is not canceled. After the above Code is run, all the buttons are still able to be set to disabled, and it is not easy to write a blog. You are welcome to give comments for encouragement. Sharing is a pleasure! You are welcome to shoot bricks and likes. (JavaScript, ajax, and jQuery articles are constantly updated. Follow me to stay updated)