A simple example of setting div css styles using jQuery

See the following snippet:

The code is as follows:

Copy code

$ (Function (){ $ ("Div: not (: first)" ).css ("color", "red "); $ ("Div"). not (": first" ).css ("color", "red "); $ ("Div: first" pai.nextall().css ("color", "red "); $ ("Div: first" ).siblings().css ("color", "red "); $ ("Div + *" ).css ("color", "red "); $ ("Div ~ Div ").css (" color "," red "); $ ("Div: gt (0)" ).css ("color", "red "); $ (This). find ("div: gt (0)" ).css ("color", "red "); $ ("Div"). filter (": gt (0)" ..css ("color", "red "); $ ("Div" pai.first().nextall().css ("color", "red "); $ ("Div" ).slice(1).css ("color", "red "); }); </Script>

Example

Use the css (properties) method

The properties parameter is an object that defines the class attribute name and value pair. In this way, you can set multiple css attributes at a time.
The returned result is still wrapped set to facilitate JQuery chained operations.

For example:

The code is as follows:	Copy code
$ ('Div: eq(0w.'hangzhou.css ({ 'Font-size': '2em ', 'Color': '# cc00ff' });

It is depressing that the attribute name of this Object must be enclosed in quotation marks as a string, otherwise it cannot be recognized by the browser. Similar methods of attr () do not need to be used.

The Object can also contain functions, such:

The code is as follows:	Copy code
Detail ('div'detail .css ({ 'Font-size': function (n)             { Return (n + 2) + 'em ';             } });

Example: div style name

The code is as follows:

Copy code

<Script type = "text/javascript" src = "js/jquery-1.3.2.js"> </script> <Style> . T1 {background: red} </Style> <Script> Var cur; Window. onload = function (){ $ ("Li"). click (function (){ If (cur ==$ (this) [0]) return false; If (cur! = Null) cur. className = ""; $ (This) [0]. className = "t1 "; Cur = $ (this) [0]; }) } </Script> <Ul> <Li> aaaaa </li> <Li> bbb </li> <Li> ccc </li> </Ul>   $ (Document). ready (function (){ $ ('Span '). mouseover (function (){ Alert ($ (this). attr ('class ')); }); }); <Script type = "text/javascript"> $ (Document). ready (function (){ $ ("Li"). click (function (){ $ ("Li"). removeClass (); $ (This). addClass ("t1 "); });   }) </Script>

Enough already, right? This benefits from jQuery's powerful selector and filtering methods. To select the last three divs, you can select all elements from the second div of the set. In other words, all elements of the first div are removed, another way is to select all the sibling elements of the First div. As the saying goes, jQuery is flexible. Of course, if you do not consider compatibility with browsers, the best way is to use the CSS3 selector.