Use firebug to view the results:
In the preceding example, the native JavaScript method is used to access attributes. jquery provides a more general method to access attributes. ATTR:
ATTR (name). If name is a string, obtain the name value of the attribute of the first element. If name is an object, the object property is copied to all elements in the package set as the attribute of the element.
ATTR (name, value): When name is a string, set the value of attribute name to value. When value is a function, this function is called for each element in the wrapper set its name value to the return value of the function.
Looking at a simple example, the HTML code still uses the above:
Copy code The Code is as follows: <scripttype = "text/JavaScript">Result:
To delete an attribute, use the removeattr (name) method.
Note that there is a special attribute class in the attribute. Class attributes are very common, and they happen to be JavaScript keywords. To access the class attribute, you must use classname instead of class. For example:
$ ('Img '). ATTR ('classname', 'photo'); Class is different from other attributes. An element can have multiple classes separated by spaces. For example, class = 'Big strong ', because the class is special and commonly used, jquery has a dedicated method to process class attributes.
Addclass (names), add class;
Removeclass (names): deletes a class;
Toggleclass (names). If an element has this class, it is deleted. Otherwise, it is added.
Names is a string consisting of multiple class names separated by spaces. Addclass and removeclass are simple to use and are not used as examples. toggleclass is especially simple and practical. The following is an example. The HTML code still uses the following:Copy codeThe Code is as follows: <style type = "text/CSS">
. Red_border
{
Border: solid 2px red;
}
</Style>
<SCRIPT type = "text/JavaScript">
Function swap (){
$ ('Img '). toggleclass ('red _ border ');
}
$ (Function (){
$ ('Img '). Mouseover (SWAP );
$ ('Img '). mouseout (SWAP );
});
</SCRIPT>
The last two sentences are registration events for IMG. The mouse enters and leaves the event in the same way. Using toggleclass, It can automatically determine whether the current class exists and take different operations.
Sometimes we do not need to load a class for an element. We only need to change one of its CSS attributes. We can use the CSS method. The CSS method is described in the previous two articles. Article .
2. Operate DOM nodes
To move some content to the interior of the elements in the current packaging set, you can use the append (content) method. The content here can be an HTML clip, an element, or a packaging set. Let's look at an example: Copy code The Code is as follows: <Title> jquery operation </title>
<Scripttype = "text/JavaScript" src = "jquery-1.3.2.js"> </SCRIPT>
<Scripttype = "text/JavaScript">
$ (Function (){
$ ('Td: odd'). append ($ ('span '));
$ ('Div: First '). append ($ ('P ')). append ('<span style = "color: red; font-size: Small"> sub title </span> ');
});
</SCRIPT>
</Head>
<Body>
<Div> </div>
<Table>
<Tr> <TD> 1 </TD> </tr>
<Tr> <TD> 2 </TD> </tr>
</Table>
<Span> Hello jquery </span>
<P> title </P>
</Body>
</Html>
The final result is as follows:
There is also an appendto (target), which is opposite to the append method. append adds the parameter to the caller, and appendto adds the caller to the parameter. There are several other methods and append, appendto is similar:
Prepend, prependto: append method when there are other elements in the target element, the added element is at the end of the original element, and the prepend is at the beginning.
Before, insertbefore: inserted before the target element, rather than internal
After, insertafter: inserted after the target element.
To delete an element, you can use the remove or empty method. Note that the remove operation deletes selected elements from the page and returns these elements as return values. These elements are not collected by garbage collection and can be further operated on, you can also use methods such as append to re-display the elements on the page, while the empty method completely deletes the elements.
3. operation form Element value
The operation form Element value is very common, but not easy. Jquery provides a Val method to simplify operations. The Val () method without parameters returns the value of the current element. The Val (values) method is used to set the value of the current element to values. If values is an array, it is more interesting. It is used to match the value in the select element, the value included in values is selected.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
