Full records of CSS styles and full records of jquerycss operations

Full records of CSS styles and full records of jquerycss operations

$ (This). click (function (){
If ($ (this). hasClass ("zxx_fri_on ")){
$ (This ).RemoveClass("Zxx_fri_on ");
} Else {
$ (This ).AddClass("Zxx_fri_on ");
}
Return false;
});

 

Class name for adding or removing element sets

1. Use addClass () method

AddClass (names) adds one or more class names specified by names to wrapped set. If multiple names exist, separate them with spaces. In short, names is a string.

Return the original wrapped set for JQuery chained operation.

Note: if there are repeated declarations in the added style declaration, who has a higher priority? See here to see the weight distribution of CSS.

 

2. Use the removeClass () method

RemoveClass (names) removes one or more class names specified by names. If multiple names exist, separate them with spaces.

Return the original wrapped set for JQuery chained operation.

3. Use the toggleClass () method

ToggleClass (name) can only have one class name as a parameter this time. If this class already exists, remove it; if not, add it.

Return the original wrapped set for JQuery chained operation.

Get or set CSS styles

1. Use the css (name, value) Method

This method is used to set the css style to every element in the wrapped set.

Name is the attribute name of the css style;

The value can be (string | number | function), similar to the attr (name, value) method mentioned in the previous section. If the value is a function, the sequence number of the element in the wrappsed set when the parameter is passed to the function. The function uses this to point to the Javascript DOM element being operated (strong enough ). The Return Value of the function is the value of the css attribute to be set.

For example:

Certificate ('div'0000.css ('font-size', function (n ){
Return (n + 1) + 'em ';

});

Increase the size of the div in order of appearance.

2. 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:

$ ('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:

Detail ('div'detail .css ({
'Font-size': function (n)
{
Return (n + 2) + 'em ';
}

});

3. Use the css (name) Method

This method returns the value of the css attribute specified by name. The returned value is a string, so you need to convert it in some cases. This method can only return the specified css attribute value of the first element in the wrapped set.

For example, when ('{firstdiv'{.css ('font-size'), a string '16px 'may be returned '.

By the way, if you want to get the class Name of the specified Element (if specified), use the Javascript standard method, such:

$ ('# FirstDiv') [0]. className

4. Use the width () and height () Methods

1) the width () and height () methods without parameters return the width and height of the first element in the wrapped set. A number (unit: px) is directly returned here ), no need to convert from string.

2) witdh (value) and height (value) with parameters are used to specify the width and height represented by value for each element in the wrapped set. Return wrapped set.

The value can be a number or a string. If it is a number, the unit is px.

For example, $ ('div '). width (600); // 600px

$ ('Div '). width ('20140901'); // 400mm mm

HasClass (name) Method

Determine whether any element in the wrapped set contains the class name specified by name. The name can also be a string consisting of multiple class names separated by spaces. Returns true | false;

Note: differences between class name and class property name:

-- Class name refers to the css name that defines the style. A style definition contains many class properties. For example, it defines a style called ownStyle.

-- Class property name refers to the css attribute name in the css specification. Such as font-size and color.

If you want to obtain all the class names of an element, use the attr ('classname') method or the Javascript DOM attribute className. When splitting the returned string, you must first determine whether the string is null. For example:

$. Fn. getClassNames = function (){
If (name = this. attr ("className ")){
Return name. split ("");
}
Else {
Return [];
}
};

This Code adds the Extended Function getClassNames () for JQuery to obtain the class name array of the element.

How can I remove the css style from the following jQuery code? Be knowledgeable!

The regular syntax is to set the css style in CSS to a class. Then use jquery addClass () removeClass ().
Generally, modification to large-scale css styles should not be written in js Code. This helps to centralize and reuse CSS code. Imagine if you have set a lot of such css style code in js, and one day you suddenly think that the color needs to be changed, it is hard to find, and the whole modification workload is huge.
<Script type = "text/javascript" src = "ajax.googleapis.com/...min.js"> </script>
<Style>
. P_style {
Color: white;
Background-color: #98bf21;
Font-family: Arial;
Font-size: 20px;
Padding: 5px;
}
</Style>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Btn01"). click (function (){
$ ("P"). addClass ("p_style ")
});
$ ("# Btn02"). click (function (){
// $ ("P"). unbind (". css ");
$ ("P"). removeClass ("p_style ");
});
});
</Script>
</Head>

<Body>
<P> This is a paragraph. </p>
<P> This is another paragraph. </p>
<Button id = "btn01" type = "button"> change the paragraph style </button>
<Button id = "btn02" type = "button"> restore a paragraph style </button>
</Body>
</Html>

How does jquery set css styles for object groups?

$ ("Input [type = submit]" ).css ({height: "30px", width: "40px "});
The jquery Chinese manual is very clear.
If you cannot find the type, you can set the id or class for the input so that you can set its attributes in css.