jquery Learning 3: Manipulating element attributes and attributes _jquery

Let's look at one example:

Copy Code code as follows:

<a id= "Easy" href= "#" >http://www.jb51.net</a> now get the property ID of a label. The following methods are available:

Copy Code code 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 JavaScript primitive method, and Method 2 uses This,this as a pointer, returning a DOM object, in this case returning a label object. So this.id can get the ID directly. Method 3 Converts the DOM object into a jquery object and then attr () The ID of the a tag using the method of jquery encapsulation.

It can be seen that sometimes it's convenient to use JavaScript with jquery. The following is a summary of the jquery operation element attributes.

◦ATTR (name) gets the attribute value of the element
◦attr (properties) sets the attribute of the element, set in name/value form
◦attr (Key,value) Sets the property value for an element
◦REMOVEATTR (name) removes an element's property value

The concrete use of each method is illustrated below.

Copy Code code as follows:

<div id= "Test" >
<a id= "Hyip" href= "javascript:void (0)" > cloud-dwelling Community </a>
<a id= "Baidu" href= "javascript:void (0)" > Baidu </a>

</div>

Copy Code code as follows:

JQuery ("#test a"). Click (function () {
Get ID
JQuery (This). attr ("id"); With This.id

Set SRC as the specified picture for the IMG tag;
var v = {src: "yun_qi_img/bdlogo.gif", Title: "Baidu"};
JQuery ("#show"). attr (v);

Set the IMG title to Baidu, and the difference is that you can only set one attribute at a time
JQuery ("#show"). attr ("title", "Baidu");

Remove the title property of an img
JQuery ("#show"). Removeattr ("title");
});

As you may have discovered, in jquery, the attr () method allows you to get both the attribute value of the element and the attribute value of the element. Yes, there are a lot of similar methods in jquery, and it's easier to use them later.

Methods are:

◦html () Gets or sets the HTML content of an element node
◦text () Gets or sets the textual content of an element node
◦height () Gets or sets the height of the element
◦width () Gets or sets the width of the element
◦val () Gets or sets the value of the input box

Take HTML () For example, the rest are similar:

Copy Code code as follows:

<div id= "showhtml" >baidu</div>

Copy Code code 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 of the basic methods of jquery operation element attributes, and after this summary, I believe that you will be more proficient in using jquery.

This is supplemented by other netizens:

The following is a list of the methods provided in jquery:

Action element properties: each (iterator) iterates through all the elements in the wrapper set and invokes the iterator function that is passed in for each element. Parameter iterator a function that is called once for each element in the matching set. The arguments passed to the function are set to the subscript for the current element in the wrapper set (starting from 0), and the current element is accessible through the function this property.

Copy Code code as follows:

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

Gets the attribute value: attr (name) Gets the value assigned to the first element in the wrapper set to specify the attribute. The parameter name is the name of the attribute, and the value of the attribute is fetched. If this attribute is not, the undefined value is returned.

$ ("#myImage"). attr ("Custom") the value is some value.

Set attribute value: attr (name,value) Sets the value that is passed in for the name attribute of all elements in the wrapper set. Name of the attribute to which name will be set, value that specifies the attribute.

Copy Code code as follows:

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

The function is to set the title attribute of all elements on the page to a string. A string consisting of the subscript of elements in the DOM and the values of each specific element id attribute.

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

Copy Code code as follows:

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

This function sets the value of all <input> elements to an empty string, while the title is set to the string, please enter a value.