Comparison of attr usage between JS setattribute and jquery

SetAttribute (string name, String value): Adds a new property that specifies the name and value, or sets an existing property to the specified value.
1, Style problems

The class in setattribute ("Class", value) refers to changing the attribute of "class" so that it is quoted.
VName represents the assignment of a style.

For example:

The code is as follows	Copy Code
var input = document.createelement ("input"); Input.setattribute ("type", "text"); Input.setattribute ("name", "Q"); Input.setattribute ("Class", bordercss);

Output: <input type= "text" name= "Q" class= "Bordercss", that is, the input control has BORDERCSS style properties
Note: The class attribute plays an important role in the Web-consortium DOM, but it still exists because of browser variability.
Dynamically setting the class attribute of an element using setattribute ("Class", VName) statement is a good way to do it in Firefox, but not in IE. Because the browser using IE kernel does not know "class", to switch to "className";
Also, Firefox does not know "className". So the common method is both:

The code is as follows	Copy Code
Element.setattribute ("Class", value); For Firefox Element.setattribute ("ClassName", value); For IE

2, method attributes and other issues

For example:

The code is as follows	Copy Code
var bar = document.getElementById ("TESTBT"); Bar.setattribute ("onclick", "Javascript:alert (' a test! ');");

Here, using setattribute to specify the onclick properties of E, simple, very good understanding.
However, IE does not support, IE does not support setattribute this function, but does not support the use of setattribute set some properties, such as Object properties, collection properties, event properties, In other words, using setattribute to set style and onclick properties is not feasible in IE.
To achieve compatibility with various browsers, you can set the element's object properties, collection properties, and event properties by using the dot notation method.

The code is as follows	Copy Code
document.getElementById ("TESTBT"). ClassName = "Bordercss"; document.getElementById ("TESTBT"). Style.csstext = "color: #00f;"; document.getElementById ("TESTBT"). Style.color = "#00f"; document.getElementById ("TESTBT"). onclick= function () {alert ("This is a test!");}

different performance on different browsers

First, the problem of setattribute

Elementnode for <tr>...</tr>

You want to add an event handler function that clicks on the row.
Writing 1:
Table1row1.setattribute ("onclick", "Selectrow1 (This)");
IE8, Firefox, Google Chrome can trigger the Click event correctly
IE6,IE7 does not trigger the Click event.
Writing 2:
Table2row1.onclick = function () {Selectrow2 (this)};
All test browsers can trigger the Click event

So in order to be compatible with different IE, we can use the following statements uniformly.
Table2row1.onclick = function () {Selectrow2 (this)};

jquery Definitions and usage

The attr () method sets or returns the property value of the selected element.

According to the different parameters of the method, their working methods are also somewhat different.
Return property value
Returns the property value of the selected element.

Grammar

$ (selector). Parameter description of attr (attribute)

Set multiple attribute/value pairs

Sets more than one property and value for the selected element.

Grammar

$ (selector). attr ({attribute:value, attribute:value ...}) Parameter description
Attribute:value sets one or more attribute/value pairs.

Attribute specify the property to get its value.

Usage One: $ (selector). attr (property name) Its function is to get the value of the specified property of the specified element (the $ (selector) portion). See Example:

Have such a section of HTML:

The code is as follows	Copy Code

So what do you want to get to the address of the picture? So: $ ("img"). attr ("src") is so simple, you use alert or other forms of output to see the image of the address. So what do I need to get a picture description? So: $ ("img"). attr ("Alt"). Easy enough. Not only can it take the attributes of the HTML itself, but also the attributes you define, such as the funny attribute in the example above, try to get its value. Note: If you are going to get a property that does not exist, then jquery will return a undefined.

Usage Two: $ (selector). attr (property name, property value) Its function is to set a property value for all matching elements.

If there's a bunch of HTML in the page:

The code is as follows	Copy Code

Let's write a sentence like this jquery code: $ ("img"). attr ("src", "yun_qi_img/s3791510.jpg") so the above pile of meaningless img tags becomes:

The code is as follows	Copy Code

It's easy to understand. If we want to set the height of the picture, then just $ ("img"). attr ("height", "300″"). Then set the width to be like this: $ ("img"). attr ("width", "500″"). So it seems to be no problem, but when you want to set multiple properties, one of these is too cumbersome to write, so let's look at the third usage.

Usage Three: $ (selector). attr (map) It means to set multiple attribute values for the specified element, and we'll focus on what the Map means. It is actually such a sequence:

{Property name one: "Property value One", property name Two: "Property value Two", ...}

So I'm going to implement the example in usage two as long as this is written:

The code is as follows	Copy Code
$ ("img"). attr ({src: "/s3791510.jpg", Height: "300″, Width:" 500″})

The above we learned to get the property value, set the property value, then how to delete the attribute?

The key word for deleting attributes in jquery is: removeattr Note that a is uppercase. See how it's used:

The same is the HTML code in the usage one, I want to delete the height attribute of the picture, so that's it:

$ ("img"). Removeattr ("height");

Well, it's that simple. Attr In fact is the original JS getattribute simplified implementation, and removeattr is RemoveAttribute's shorthand

Example

code is as follows

copy code

<script language= "JavaScript" type= "Text/javascript" > $ (document). Ready (function () { //$ (' Div.chapter a '). attr ({ ' rel ': ' External '}); $ (' Div.chapter a '). each (the function (index) { var $linkthis =$ (This) $linkthis. attr ({ ' rel ': ' External ', br> ' id ': ' wikilink-' +index, ' title ': ' Hello, now on trial ' + $linkthis. Text () }); }); $ (' #wikilink-1 '). CSS (' fontsize ', 33); }); </script>