Attributes and styles for jquery operation elements (1/2)

Distinguishing between DOM attributes and element attributes

An IMG tag:

 
  
  

	  
  
   
   
 
    
 
     
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 ()
 
    
 
   
 
  
  

Home 1 2 last page