jQuery Learning 3: Manipulating element attributes and characteristics_jquery

Let’s look at an example first:

Copy code The code is as follows:

http://www.jb51.net Now we need to get the attribute id of the a tag. There are following methods:

Copy code The code is as follows:

jQuery("#easy").click(function() {
alert(document.getElementById("easy").id); //1
alert(this.id); //2
alert(jQuery(this).attr("id")); //3
});

Method 1 uses the original JavaScript method; method 2 uses this, which is equivalent to a pointer and returns a dom object. In this case, the a tag object is returned. So this.id can get the id directly. Method 3 converts the dom object into a jQuery object, and then uses the jQuery encapsulated method attr() to get the ID of the a tag.

It can be seen that sometimes it is very convenient to use javascript with jQuery. The following focuses on summarizing how jQuery operates element attributes.

◦attr(name) Get the attribute value of the element
◦attr(properties) Set element attributes in name/value format
◦attr(key,value) Set attribute value for element
◦removeAttr(name) removes the attribute value of the element

The following examples illustrate the specific usage of each method.

Copy code The code is as follows:

Script Home
Baidu

Copy code The code is as follows:

jQuery("#test a").click(function() {
//Get ID
jQuery(this).attr("id"); //Same as this.id

//Set src for the img tag to the specified image; title to Baidu.
var v = { src: "http://www.baidu.com/img/bdlogo.gif", title: "Baidu" };
jQuery("#show").attr(v);

//Set the title of img to baidu. The difference with the above is that only one attribute can be set at a time
jQuery("#show").attr("title", "baidu");

//Remove the title attribute of img
jQuery("#show").removeAttr("title");
});

You may have discovered that the attr() method in jQuery can not only obtain the attribute value of the element, but also set the attribute value of the element. Yes, there are many similar methods in jQuery. If we summarize them now, it will be easier to use them in the future.

The methods are:

◦html() Get or set the html content of the element node
◦text() Gets or sets the text content of the element node
◦height() Get or set the height of the element
◦ width() Gets or sets the width of the element
◦ val() Get or set the value of the input box

Take html() as an example, the rest are similar:

Copy code The code is as follows:

baidu

Copy code The code is as follows:

//Get html, the result is baidu
jQuery("#showhtml").html();
//Set html, the result is I love baidu
jQuery("#showhtml").html("I love baidu");

These are some basic methods for jQuery to operate element attributes. After this summary, I believe everyone will become more proficient when using jQuery.

The following are additions from other netizens:

The methods provided in jQuery are listed below:

Manipulate element attributes: each(iterator) traverses all elements in the packaging set and calls the passed iterator function for each element. Parameter iterator is a function that is called once for each element in the matching set. The argument passed to the function is set to the index (starting from 0) of the current element in the wrapped set, which can be accessed through the function's this attribute.

Copy code The code is as follows:

$('img').each(function(n){
this.alt='This is image[' n '] with an id of' this.id;
})

Get attribute value: attr(name) gets the value assigned to the specified attribute of the first element in the packaging set. The parameter name is the name of the attribute, and the value of the attribute will be obtained. If there is no such attribute, an undefined value is returned.

$("#myImage").attr("custom") The value obtained is some value.

Set attribute value: attr(name,value) sets the passed value for the name attribute of all elements in the packaging set. name is the name of the attribute that will be set, and value specifies the value of the attribute.

Copy code The code is as follows:

$('*').attr('title',function(index) {
return 'I am element' ' index ' and my name is ' (this.id?this.id:'unset');
});

This function sets the title attribute of all elements on the page to a string. A string composed of the subscript of the element in the DOM and the id attribute value of each specific element.

attr() is also a quick and easy way to set multiple attributes to all elements in a wrapper set at once. attr(attributes).

Copy code The code is as follows:

$('input').attr(
{value:'',title:'please enter a value'}
);

This function sets the value of all elements to an empty string, and sets the title to the string Please enter a value.