1. Operation Properties
The above describes how to filter the elements you need. When you get the element, you need to manipulate it. A common requirement is to iterate through the resulting set of elements and perform an operation on each element. jquery provides a function that is
Each (iterator), where iterator is a function that takes an integer as an argument, representing the first few elements. Look at a simple example.
Copy Code code as follows:
<title>jquery operation</title>
<script type= "Text/javascript" src= "Jquery-1.3.2.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (' img '). each (function (n) {
This.alt = "This are" + n + "th picture";
});
});
</script>
<body>
</body>
The results are viewed with Firebug:
In the example above, the native JavaScript method is used to access properties, and JQuery provides a more general way to access attributes, attr:
attr (name), if name is a string, gets the value of the name of the property of the first element; If name is an object, the object's properties are copied to all elements of the wrapper set as attributes of the element.
attr (Name,value), when name is a string, sets the value of the property name to value, and when value is a function, calls this function on each element in the wrapper set, setting the value of its name to the return value of the function.
To see a simple example, the HTML code still uses the above:
Copy Code code as follows:
<scripttype= "Text/javascript" >
$ (function () {
$ (' body '). Children (). attr (' title ', function (n) {
Return ' This is ' + n + ' th element ';
});
$ (' img '). attr (' Alt ', ' A photo taken by Yinzixin ');
Alert ($ (' H1 '). attr (' title '));
});
</script>
The results are:
To delete a property, use the Removeattr (name) method.
Note that there is a special attribute class in the attribute. Class attributes are very common, and he happens to be the keyword of JavaScript. To access the class attribute, you need to 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, such as class= ' big strong ', because class is special and often used, jquery has a special way of handling class attributes.
AddClass (names), add class;
Removeclass (names), delete class;
Toggleclass (names), if the element has the class, then delete, otherwise Add.
The names is a string that can be composed of multiple class names separated by spaces. AddClass and Removeclass use simple no longer examples, Toggleclass is particularly simple and practical, look at an example below, the HTML code is still used above:
Copy Code code 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 for IMG registration events, the mouse to enter and leave the event is the same, using Toggleclass it can automatically determine whether the current class exists to take different actions.
Sometimes we don't need to load a class for an element, just change one of its CSS attributes, you can use CSS method, CSS method in the previous two articles have long been used, no longer introduced.
2. Manipulating DOM nodes
To move some content to the interior of an element within the current wrapper set, you can use the Append (content) method, where the content can be an HTML fragment, an element, or a wrapper set. Look at an example:
Copy Code code 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>
<body>
<div></div>
<table>
<tr><td>1</td><td></td></tr>
<tr><td>2</td><td></td></tr>
</table>
<span>hello jquery</span>
<p>Title</p>
</body>
The final results are as follows:
There is also a appendto (target) that append the direction of the method, append adds the parameter to the caller, and Appendto adds the caller to the inside of the parameter. There are several pairs of methods that are similar to append,appendto:
Prepend,prependto:append method when there are other elements inside the destination element, the added element is at the end of the original element, and the prepend is the first.
Before,insertbefore: One before the destination element, not the interior
After,insertafter: Inserted after the destination element.
To delete an element, you can use the remove or empty method. Note that remove removes the selected elements from the page and returns them as return values that are not garbage collected, can be further manipulated, or can be append to the page in such a way that the empty method deletes the elements completely.
3. Manipulating the value of a FORM element
Manipulating the values of form elements is very common, but not easy. jquery provides a Val method to simplify the operation. The Val () method with no parameters returns the value of the current element. The Val (values) method is used to set the value of the current element to values, and if values are an array, it is a bit more interesting to match the values in the Select element, and the values included in values will become selected.
