jquery is not much to say, this is a function of JS library, more commonly used, we are today on jquery three kinds of operation for CSS summary
$ (selector). CSS ("name", "value")
$ (selector). css ({properties})
$ (selector). CSS (name)
$ (selector). CSS ("name", "value") set values for all elements given CSS properties:
Now look at the code I just wrote.
Copy Code code as follows:
<script type= "Text/javascript" src= "Http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js" ></script >
<script type= "Text/javascript" >
var jq=jquery.noconflict ();
JQ (document). Ready (function () {
JQ ("#red"). Click (function () {
JQ ("P"). CSS ("Background-color", "Red");
});
JQ ("#white"). Click (function () {
JQ ("P"). CSS ("Background-color", "white");
});
});
<p> When you click on the button below the background will turn red </p>
<button id= "Red" type= "button" > Red </button>
<button id= "White" type= "button" > </button>
</body>
Function css ({properties}) sets values for a series of CSS properties for all matching elements at the same time:
A piece of code, you know.
Copy Code code as follows:
<script type= "Text/javascript" >
var jq=jquery.noconflict ();
JQ (document). Ready (function{
JQ ("#font_red"). Click (function () {
JQ ("P.info"). CSS ({"Background-color": "Red", "font-size" = "200%"});
}); });
</script>
The corresponding HTML we can write
<p class= "Info" > when the background of this text turns red, the size will be twice times larger </p>
<button id= "font_red" type= "button" > Click this </button>
Look at the effect:
Let's take a look at the last CSS (name)
It's a little bit of a place to use.
Take a look at the example
$ (this). CSS ("Background-color");
The actual return of the attribute value of "name", the basic use of the place is less than explained in detail.
The jQuery size is to be listed separately.
There are two parameters of size: $ (selector). Height (value) and $ (selector). Width (value)
In the same way, an example is listed below:
Copy Code code as follows:
<script type= "Text/javascript" src= "Http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js" >
var jq=jquery.noconflict ();
JQ (document). Ready (function () {
JQ ("#font"). Click (function () {
JQ (". font_s"). Height ("200px");
JQ (". font_s"). Width ("20px");
}); });
</script>
<p class= "font_s" > The height of the P label box will be larger to 200px, while the width becomes 20px</p>
<button id= "Font" type= "button" > click here to change </button>
</body>
the following is the supplemental test code below
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
. test1{
Color: #0C9;}
. test2{
color:red;}
</style>
<script src= "Js/jquery-1.3.2.js" >
</script>
<script type= "Text/javascript" >
$ (function () {
var count = 2;
$ ("#aAdd"). Click (function () {
$ ("#testDIV"). AddClass ("Test1");
})
$ ("#aRemove"). Click (function () {
$ ("#testDIV"). Removeclass ("Test1");
})
$ ("#aToggle1"). Click (function () {
$ ("#testDIV"). Toggleclass ("Test2");
})
$ ("#aToggle2"). Click (function () {
$ ("#testDIV"). Toggleclass ("test2", count++% 3 = 0);
})
$ ("#aCSS1"). Click (function () {
$ ("#testDIV"). CSS ({background: "Red"}). css ("Color", "white");
})
})
</script>
<body>
<div id= "Testdiv" > I will change color oh </div>
<a href= "#" id= "Aadd" > Tim style </a>
<a href= "#" id= "Aremove" > Removal style </a>
<a href= "#" id= "aToggle1" > Variable style </a>
<a href= "#" id= "AToggle2" > A few more, a little bit of a changed </a>
<a href= "#" id= "aCSS1" > Discoloration </a>
</body>
1.addClass (Class)
Description: Adds the specified style to the selected element collection.
2.removeClass ([class])
Description: Deletes the specified style for the selected element collection.
3.toggleClass (Class)
Description: Replaces the selected element collection style. Note, if the current element's appearance is already class, the style will be removed, which is equivalent to the combination of addclass and removeclass.
4.toggleClass (class, switch)
Description: Similar to the previous method, the difference is to add a switch to determine the change in style when the switch value is True
5.css (Stylename,value)/css (stylename)/css ({value})
Description: CSS (stylename,value) is used to set the current element's StyleName style property value to Value,css (stylename) to get the StyleName style property value of the current element, while the CSS ({value}) And for another way to set the value of the Style property, the specific use of reference examples ^ ^, because it is similar to the use of element.attr so here is not a detailed description of
