jquery use (ii) style of setting elements

CSS is a part of the page that cannot be separated, and jquery also provides some useful CSS-related methods. The previous section has used AddClass () to add CSS style styles to the elements. This section focuses on how jquery sets the style of the page. Including add, delete, dynamic switch and so on.

1. Add and remove CSS categories.

$ (function () {                    //Add multiple CSS categories                    $ ("img") at the same time. addclass ("Css1 css2");                });

If the above code adds CSS1 and CSS2 two styles to the IMG element

Removeclass corresponds to the AddClass method, which is no longer repeated in the example.

2. Dynamically switch between categories.

Many times, depending on the user's operating state, you want some elements of the style style to switch between a category, sometimes addclass () category, sometimes removeclass () category, JQ provides a direct Toggleclass (name) to do similar operations .

$ (function () {                $ ("P"). Click (function () {                    $ (this). Toggleclass ("Css1");                })            ;

The above code implements the Css1 style when the P element is clicked. The Toggleclass (name) method can only be used to set a CSS category. You cannot switch to multiple CSS.

3. Get and set the style directly.

Exactly like the attr () method, jquery provides the CSS () method to directly get and set the style of the element, such as using CSS (name) to get the style value of a style. Use the CSS (properties) list to set up a variety of styles for colleagues and set some style of the elements through CSS (Name,value).

For example: Modify the color marker by setting the mouse mouseover and Mouseout event trigger CSS (Name,value).

    $ (function () {                $ ("P"). MouseOver (function () {                    $ (this). CSS ("Color", "red");                });                $ ("P"). Mouseout (function () {                    $ (this). CSS ("Color", "black");                });            

The CSS method provides the Opacity property. and compatible with various browsers.

As the above example modifies, the transparency value of the P element can be set through the mouse event.

    $ (function () {                $ ("P"). MouseOver (function () {                    $ (this). CSS ("opacity", "0.5");                });                $ ("P"). Mouseout (function () {                    $ (this). CSS ("opacity", "1");                });            

In addition, the Hasclass (name) method is provided in the CSS to determine whether an element has a CSS category set. Returns a Boolean value. For example:

    $ ("Li:last"). Hasclass ("Css1")

Expresses whether the last Li CSS property contains the Css1 class. And

    $ ("Li:last"). Is (". Css1")

The code works exactly the same.

To view the jquery source code, the Hasclass method is to transport the IS () method.

Hasclass:function (selector) {                return this.is ("." + selector);            

jquery use (ii) style of setting elements