Comparison between js setAttribute and attr in jquery

In general, I feel that js setAttribute works exactly the same as attr in jquery, but it is simplified in jquery and the work is more powerful. Next I will introduce their usage separately.

SetAttribute (string name, string value): adds a new attribute with the specified name and value, or sets an existing attribute as the specified value.
1. style issues

In setAttribute ("class", value), class is used to change the attribute "class", so it must be enclosed by quotation marks.
VName indicates that the style is assigned a value.

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 the bordercss style attribute.
Note: The class Attribute plays an important role in W3C DOM, but it still exists due to browser differences.
The setAttribute ("class", vName) statement is used to dynamically set the class attribute of an Element in firefox, but not in IE. Because the browser using the IE kernel does not know "class", you should use "className" instead ";
Similarly, firefox does not know "className ". Therefore, the common methods are 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 ('this is a test! ');");

Here, setAttribute is used to specify the onclick attribute of e, which is simple and easy to understand.
However, IE does not support the setAttribute function, but does not support setting certain attributes with setAttribute, such as object attributes, set attributes, and event attributes, that is to say, setting style and onclick attributes with setAttribute does not work in IE.
To achieve compatibility with various browsers, you can use the dot symbol method to set object attributes, set attributes, and event attributes of the Element.

The Code is as follows:	Copy code
Document. getElementById ("testbt"). className = "bordercss "; Document. getElementById ("testbt" ).style.css Text = "color: # 00f ;"; Document. getElementById ("testbt"). style. color = "# 00f "; Document. getElementById ("testbt"). onclick = function () {alert ("This is a test! ");}

Different performance on different browsers

I. setAttribute Problems

ElementNode is <tr>... </tr>

You want to add an event handler function for the row to be clicked,
Statement 1:
Table1row1. setAttribute ("onclick", "selectrow1 (this )");
IE8, Firefox, and google chrome correctly trigger the click Event
IE6 and IE7 cannot trigger the click event.
Statement 2:
Table2row1. onclick = function () {selectrow2 (this )};
All test browsers can trigger click events

Therefore, in order to be compatible with different IE, we can use the following statement in a unified manner.
Table2row1. onclick = function () {selectrow2 (this )};

Jquery definition and usage

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

The working method varies according to different parameters of this method.
Returned property value
Returns the attribute value of the selected element.

Syntax

$ (Selector). attr (attribute) parameter description

Set multiple attribute/value pairs

Set more than one attribute and value for the selected element.

Syntax

$ (Selector). attr ({attribute: value, attribute: value...}) parameter description
Attribute: value specifies one or more attribute/value pairs.

Attribute specifies the attribute of the value to be obtained.

Usage 1: $ (selector). attr (attribute name) it is used to obtain the value of a specified attribute of a specified Element ($ (selector). See the example below:

There is such an html:

 

The Code is as follows:	Copy code

 

What should you do if you want to get the image address? This way: $ ("img "). attr ("src") is that simple. You can use alert or other forms to output the image address. what if I want to get the image description? This way: $ ("img "). attr ("alt "). simple enough. it not only obtains the attributes of html, but also the attributes defined by you, such as the funny attribute in the previous example. You can try to obtain its value. note: If the property you want to obtain does not exist, jquery returns an undefined.

Usage 2: $ (selector). attr (attribute name, attribute value) sets an attribute value for all matching elements.

Suppose there are a bunch of such html in the page:

The Code is as follows:	Copy code

 

Let's write a jquery code like this: $ ("img"). attr ("src", "http://t.douban.com/lpic/s00001510.jpg") so that the above pile of meaningless img labels becomes:

The Code is as follows:	Copy code

It's easy to understand. if we want to set the image height, we only need $ ("img "). attr ("height", "300 ″). set the width as follows: $ ("img "). attr ("width", "500 ″). it seems that there is no problem, but it is too troublesome to set multiple attributes one by one, so let's look at the third usage.

Usage 3: $ (selector ). attr (Map) is used to set multiple attribute values for a specified element. Let's take a look at what Map means. it is actually a sequence like this:

{Attribute name 1: "attribute value 1", attribute name 2: "attribute value 2 ",... ... }

So I want to write the example in the second method as long:

The Code is as follows:	Copy code
$ ("Img"). attr ({src: "/s00001510.jpg", height: "300", width: "500 ″})

We learned how to get the property value and set the property value. How can we delete the property?

The keyword for deleting attributes in jquery is removeAttr. Note that A is in upper case and how to use it:

The same is the html code in usage 1. If I want to delete the Image Height attribute, this is the case:

$ ("Img"). removeAttr ("height ");

Well, that's simple. attr is actually a simplified implementation of getAttribute in native js, while removeAttr is short for removeAttribute.

Example

 

The 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 (function (index ){ Var $ linkthis = $ (this) $ Linkthis. attr ({ 'Rel ': 'External ', 'Id': 'wikilink-'+ index, 'Title': 'Hello, now in the test '+ $ linkthis. text () }); }); ('{Wikilink-1'{.css ('fontsize', 33 ); }); </Script>