JQuery makes the page vivid (operate the elements in the page)

For details about the operation element attributes, see the following example:

Change the alt value of each img to abc.

The following are two codes. The functions in each are used to traverse the selected Element Set and process each element as needed.

A code is to set the alt value of each element to abc,

The second code is to add the alt value of each element to the array, which can be treated as a custom processing of the element (selected element set.

1 <script type="text/javascript">
2     $(document).ready(
3         function(){
4             $("img").each(
5                 function(){this.alt="abc";}
6             );
7         }
8     );
9 </script>

 1 <script type="text/javascript">
 2     $(document).ready(
 3         function(){
 4             var allAlts=new Array();
 5             $("img").each(
 6                 function(){
 7                     //this.alt="abc";
 8                     allAlts.push(this.alt);
 9                     }
10             );
11             alert(allAlts);
12             alert($("img")[0].alt);
13         }
14     );
15 </script>

Next, let's look at the processing of its features.

1. alert ($ ("# def"). attr ("alt "));

To obtain the feature value of an element, it is generally meaningful to obtain an element.

2. $ ("img"). attr ('alt', function (index) {return "this is the" + index + "element "});

Adds features to the selected element set.

3. $ ("img"). attr (

{Value: '', title: 'Please enter a value '}

); Adds a set of features to the selected elements.

This can be seen as three overloading of the element set attr. The object is an element set. One parameter is the value of the obtained feature, and the other two parameters are the feature value of the added element set. The third one {} sets a set of feature values for the element set.

Next, let's look at the processing of the element style class.

1. $ ("button # abc"). addClass ("sss ");

Add a class to the selected Element Set

2. $ ("button # abc"). removeClass ("sss ");

Deletes a class from the selected element set.

3. $ ("button # abc"). toggleClass ("sss ");

If the style 'class' is not used for elements in the element set, add the style 'class' to the element. If the style is already used, delete the style from the element.

4. $ ("p: first"). hasClass ("srupriseMe ")

$ ("P: first"). is (". surpriseMe ")

The two statements have the same results.

Next, let's take a look at the style processing:

1. $ ("div. sss" ).css ("width", function () {return $ (this). width () + 200 + "px "});

Set the element with sss class to + 200px on the original width

2. alert ($ ("div. sss" ).css ("width "));

Take the style of the div element with the sss style, with the value

3. $ ("div. sss" ).css ("width", "100px ");

$ ("Div. sss"). width ("100px ");

These two methods are the same and apply to both width and height.

Processing Element Content

 

1. alert ($ ("div # display" ).html ());

2. $ ("div # display" ).html ("<a> bbbb </a> ");

3. alert ($ ("div # display"). text ());

4. $ ("div # display"). text ("ccccc ");

5. $ ("Div # display "). append (" ");

Append

6. ("Div # display"). appendto ($ ("Div # display2 "));

Mobile

7. Remove ()

8. Empty ()

Form Processing

1. Val ()

Value

2. Val (value)

Set

Here,

Operations on element features use a function, ATTR, which has several reloads.

Operations on element styles use a function, CSS, which has several reloads.

Operations on element HTML use a function, HTML, which has several reloads.

The operation on the element text uses a function, text, which has several reloads.

There are Val operations on the value of the form, and there are also several overloading operations.

Add some other methods, so that you can understand them.