JQuery css () selector usage instructions

CSS selector is just a function of jquery, let me give you a detailed introduction to the jquery CSS () selector using methods and instructions, there is a need to understand the students can refer to the study.

CSS operations have an important approach: CSS ()

CSS () has three different syntaxes to complete their work:

$ (selector). CSS (Name,value)
$ (selector). css ({properties})
$ (selector). CSS (name)

Returns a CSS property using CSS (name) to return the CSS property value for the first specified matching element:

Example

$ (this). CSS ("Background-color");

Try» Set CSS properties and values using CSS (name,value), set CSS properties for all matching elements:
Example

$ ("P"). CSS ("Background-color", "yellow");

If we need to change multiple style attributes, we can first define the attribute variables and then assign them directly to the CSS () method. Examples are as follows:

var divcss = {
Background: ' #EEE ',
Width: ' 478px ',
margin: ' 10px 0 0 ',
padding: ' 5px 10px ',
border: ' 1px solid #CCC '
};
$ ("#result"). CSS (DIVCSS);

Here we first define a CSS style attribute variable ' divcss ', which is similar to creating an external CSS file.
Then, using the CSS () method provided by jquery, assign the attribute to the DIV with the id ' #result '. In addition, the CSS () method provided by jquery can also be used to view the CSS property values of an element. For example, if we want to see the color of the link, we can use the following code:

$ ("#61dh a"). CSS ("color")

Similar to the first example, but here we pass only one parameter (style attribute) and finally we'll show you how to set the link style after the mouse stroke (e.g., color). We cannot use the selector to directly select the link in the mouse over state, that is, $ ("a:hover") is not tenable. So we need to use the event class method provided by jquery-hover (). It is worth noting that the hover () method needs to define two functions, one of which is mouse stroke, and the other is after the mouse stroke. Here's how:

$ ("#61dh a"). css (' color ', ' #123456 ');
$ ("#61dh a"). Hover (function () {
$ (this). CSS (' color ', ' #999 ');
},
function () {
$ (this). CSS (' color ', ' #123456 ');
});

The two functions of the hover () method are separated by commas you may notice that this method is not concise (contrary to the purpose of jquery), but the hover () method provided by jquery is not intended to change the CSS style. In practice, it is recommended to use the Add/Remove CSS method to change the link style across the mouse.

Toggle Style

jquery provides a toggleclass () method to control the switching of styles

$ ("P"). Toggleclass ("another");

Determines whether a style is included, if any, returns true otherwise false

$ ("P"). Hasclass ("another"); Equivalent to $ ("P"). Is (". another");

How jquery Deletes a CSS property

You can use class to set it, and then Removeclass (), for example

$ ("#test"). attr ("style", {"Display": "None"});

If not at all, you can use

$ ("#test"). attr ("style", {"Display": "None"});

If not at all, you can use

$ ("#test"). Removeattr ("style");

Note: You can use removeattr.

In addition, if you just show and hide (without animating), define a. Hide {display:none;}, and then use AddClass () and Removeclass () for higher performance.