Distinguishing between DOM attributes and element attributes
The code is as follows |
Copy Code |
|
However, it is converted to an absolute path in the DOM properties: http://localhost/images/image.1.jpg.
Even some of the "element attributes" and "Dom properties" have different names, such as the element attribute class above, which corresponds to the classname when converted to DOM attributes.
Keep in mind that in JavaScript we can get or set the DOM properties directly:
The code is as follows |
Copy Code |
<script type= "Text/javascript" > $ (function () {
var img1 = document.getElementById ("hibiscus");
alert (img1.alt);
Img1.alt = "Change the alt element attribute";
alert (Img1.alt);
})
</script> |
So if you want to set the CSS style class for the element, you want to use the DOM property className instead of the element attribute class:
Img1.classname = "CLASSB";
Four. Manipulate DOM Properties
There is no wrapper in jquery for the function "Dom properties", because it is easy to get and set DOM properties using JavaScript. In jquery, the each () function is used to traverse the jquery wrapper set, where the this pointer is a DOM object, so we can apply this in conjunction with native JavaScript to manipulate the element's DOM properties:
The code is as follows |
Copy Code |
$ ("img"). each (function (index) {
alert ("Index: + index +", ID: "+ this.id +", alt: "+ This.alt");
This.alt = "changed";
Alert ("Index: + index +", ID: "+ this.id +", alt: "+ This.alt);
}); |
The following is a description of each function:
Each
(callback)
Returns: jquery Packaging set
Executes the callback method for each element in the wrapper set. Where the callback method takes a parameter that represents the index value of the current traversal, starting at 0.
Five. Manipulating "element Properties"
We can use the getattribute and setattribute in JavaScript to manipulate element attributes of elements.
In jquery, you are provided with a attr () wrapper set function that can simultaneously manipulate the attributes of all elements in the wrapper set:
Name |
Description |
Example |
attr (name)
|
Gets the property value of the first matching element. This method makes it easy to get the value of a property from the first matching element. Returns undefined if the element does not have a corresponding property. |
Returns the SRC attribute value of the first image in the document: $ ("img"). attr ("src"); |
Attr (properties) |
Sets an object of type "name/value" to the property of all matching elements.
This is the best way to set many properties in batches in all matching elements. Note that if you want to set the class attribute of an object, you must use ' className ' as the property name. Or you can use the. addclass (Class) and. Removeclass (Class) directly.
|
Set SRC and ALT attributes for all images: $ ("img"). attr ({src: "test.jpg", alt: "Test Image"}); |
attr (key, value) |
Sets a property value for all matching elements. |
To set the SRC attribute for all images: $ ("img"). attr ("src", "test.jpg"); |
attr (Key, FN) |
Sets a computed property value for all matching elements.
Instead of providing a value, a function is provided that evaluates the value of the function as the property value.
|
Set the value of the SRC attribute to the value of the title property: $ ("img"). attr ("title", function () {return this.src}); |
REMOVEATTR (name) |
Remove an attribute from each matching element |
Delete the src attribute of the image in the document: $ ("img"). Removeattr ("src"); |
When you use the ID selector, you often return a jquery wrapper set with only one object, which often uses the attr (name) function to obtain its element attributes:
The code is as follows |
Copy Code |
function TestAttr1 (event) {
alert ($ ("#hibiscus"). attr ("class");
} |
Note the attr (name) function returns only the specific element property value of the first matching element. and attr (key, name) sets the element attributes in all the wrapper set:
Modifies the ALT attribute $ ("img") for all IMG elements. attr ("Alt", "Modified ALT attribute");
attr (properties)
can modify multiple element properties at once:
The code is as follows |
Copy Code |
$ ("img"). attr ({title: "Modified title", alt: "Modify ALT attribute at the same time"}); |
removeattr (name) Deletes an element attribute, but the corresponding DOM property is not deleted and affects only the value of the DOM property.
For example, removing the readonly element attribute of an INPUT element causes the corresponding DOM property to become false (that is, input becomes editable):
$ ("#inputTest"). Removeattr ("ReadOnly");
Six, modify CSS style
To modify the style of an element, we can modify the element CSS class or directly modify the style of the element.
An element can apply multiple CSS classes, but unfortunately it is stored in a space-delimited string, rather than an array, in the DOM attribute. So if we want to add or remove multiple attributes to an element in the original JavaScript age, we have to manipulate the string ourselves.
jquery makes it all the easier. We don't have to do those boring jobs anymore.
1. Modify CSS Class
The following table is the JQuery method associated with modifying a CSS class:
Name |
Description |
Instance |
AddClass (classes)
|
Adds the specified class name for each matching element. |
Add the ' selected ' class to the matching element: $ ("P"). AddClass ("selected"); |
Hasclass (Class) |
Determines whether at least one element in the wrapper set has the specified CSS class applied |
$ ("P"). Hasclass ("selected"); |
Removeclass ([classes]) |
Deletes all or a specified class from all matching elements. |
Remove the ' selected ' class from the matching element: $ ("P"). Removeclass ("selected"); |
Toggleclass (Class) |
Deletes (adds) a class if it exists (does not exist). |
Switch the ' selected ' class for matching elements: $ ("P"). Toggleclass ("selected"); |
Toggleclass (class, switch) |
Add a class when the switch is true, Delete class when switch is False |
Toggle Highlight Style Every three clicks:
var count = 0;
$ ("P"). Click (function () {
$ (this). Toggleclass ("Highlight", count++% 3 = 0);
});
|
Using the above method, we can modify the CSS class of the element like a collection, and no longer have to parse the string manually.
Note that the parameters of
AddClass (Class)
and
removeclass ([classes]) can be passed into multiple CSS classes at a time, separated by spaces, such as:
The code is as follows |
Copy Code |
$ ("#btnAdd"). Bind ("click", Function (event) {$ ("P"). addclass ("colorred borderblue"); |
The parameters of the Removeclass method are optional and all CSS classes are removed if the argument is not passed in:
The code is as follows |
Copy Code |
$ ("P"). Removeclass () |