April 12 learning notes-jQuery operation attributes and styles, learning notes jquery

April 12 learning notes-jQuery operation attributes and styles, learning notes jquery

• Differentiate between DOM attributes and element attributes

1 

Usually developers are usedid,src,altIs called the "attribute" of this element ". We call it "element attribute ". However, when parsed to a DOM object, the actual browser will finally parse the tag element into a "DOM object" and store the "element attribute" of the element as "DOM attribute ", the two are different.

Even some "element attributes" and "DOM attributes" have different names. For example, the above element attribute class corresponds to the className after being converted to the DOM attribute.

Remember, in javascript, we canDirectly obtain or set "DOM attributes"":

1 <script type="text/javascript">2     $(function() {3         var img1 = document.getElementById("hibiscus");4         alert(img1.alt);5         img1.alt = "Change the alt element attribute";6         alert(img1.alt);7         img1.className = "classB";8     })9 </script>

Therefore, to set the CSS style class of an element, you must use the DOM attribute "className" instead of the element attribute "class ".

 

• Operate "Dom attributes"

In jQueryeach()Function is used to traverse the jQuery package set, wherethisPointer is a DOM object, so we can apply this point to operate the DOM attributes of elements with native javascript:

1 $("img").each(function(index) {2     alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);3     this.alt = "changed";4     alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);5 });

• Operate "element attributes"

We can usegetAttributeAndsetAttributeTo manipulate the "element attributes" of an element ". In jQuery, we provide youattr()The function of the consortium function allows you to simultaneously operate the attributes of all elements in the Consortium:

Although we can useremoveAttr(name)The element attribute is deleted, but the corresponding DOM attribute is not deleted. It only affects the value of the DOM attribute. For exampleinputElementreadonlyIf the element attribute is removed, the corresponding DOM attribute will becomefalse(That isinputChanges to editable status ).

• Modify CSS classes and styles

The following table shows the jQuery Method for modifying the CSS class:

Note:addClass(class)AndremoveClass(classes)You can input multiple css classes at a time and separate them with spaces. The parameters of the removeClass method are optional. If no parameters are input, all CSS classes are removed.

Similarly, when we want to modify a specific CSS style of an element, that is, to modify the element attribute "style", jQuery also provides the corresponding method:

• Get common attributes

<! Doctype html> 
We want to get the width of the test layer, and use the attr method to get the "element feature" as undefined, because no width is added for the div. The css () method can be used to obtain the value of the style attribute, but different results are returned in different browsers. in IE6, auto is returned, in FF, although the correct value is returned, it is followed by "px ". Therefore, jQuery provides the width () method, which returns a correct value without px.
To solve the preceding problem, jQuery provides methods for obtaining and setting common attributes. For example, width () is used to obtain the width of an element, while width (val) is used to set the width of an element.
The following methods can be used to obtain common attribute values of an element:
1. Width and Height related Height and Width
2. Positioning