JavaScript Tutorial/jQuery/css function
Содержание
- 1 Add border to DIV
- 2 Add paragraph and set the style
- 3 Adds a background and text color to all the headers on the page.
- 4 Header 1
- 4.1 css(name): Return a style property on the matched element.
- 4.2 css(name, value): If a number is provided, it is automatically converted into a pixel value.
- 4.3 css(properties): set several style properties on matched elements.
- 4.4 Define CSS in an array and set
- 4.5 Get CSS value
- 4.6 Nested style setting
- 4.7 Set two CSS value in CSS function
- 4.8 The basic CSS Selectors supported by jQuery
- 4.9 Use CSS value when creating new tag
- 4.10 Use the rgb function with JQuery
Add border to DIV
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <style type="text/css"> .changeP { font-weight: bold; color:red;} </style> <script type="text/javascript"> $(document).ready(function(){ $("#myID\\.index\\[1\\]").css("border","3px solid red"); }); </script> </head> <body>
</body>
</html></source>
Add paragraph and set the style
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").css("color", "red").add("p").css("background", "yellow"); }); </script> <style> div { width:40px; height:40px; margin:10px; float:left;} </style> </head> <body> <body>
</body>
</html></source>
Adds a background and text color to all the headers on the page.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(":header").css({ background:"#CCC", color:"blue" }); }); </script> </head> <body> <body>
Header 1
</body>
</html></source>
css(name): Return a style property on the matched element.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").click(function () { var color = $(this).css("background-color"); alert(color); });
}); </script> </head> <body> <body>
</body>
</html></source>
css(name, value): If a number is provided, it is automatically converted into a pixel value.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").mouseover(function () { $(this).css("color","red"); }); }); </script> </head> <body> <body>
asdf
</body>
</html></source>
css(properties): set several style properties on matched elements.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").hover(function () { $(this).css({ backgroundColor:"yellow", fontWeight:"bolder" }); }, function () { var cssObj = { backgroundColor: "#ddd", color: "rgb(0,40,244)" } $(this).css(cssObj); }); }); </script> </head> <body> <body>
Move the mouse over me.
</body>
</html></source>
Define CSS in an array and set
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("b").hover(function () { $(this).css({"background-color" : "yellow", "font-weight" : "bolder"}); }, function () { var cssObj = { "background-color" : "#ddd", "font-weight" : "", "color" : "red" } $(this).css(cssObj); }); }); </script>
</head> <body> <body> Hello </body>
</html></source>
Get CSS value
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var color = $("b").css("background-color"); alert(color);
}); </script>
</head> <body> <body> Hello </body>
</html></source>
Nested style setting
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").css("background", "yellow").filter(".blue").css("border-color", "red"); }); </script> <style> div { border:2px white solid;} </style> </head> <body> <body>
</body>
</html></source>
Set two CSS value in CSS function
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("b").hover(function () { $(this).css({"background-color" : "yellow", "font-weight" : "bolder"}); }, function () { var cssObj = { "background-color" : "#ddd", "font-weight" : "", "color" : "red" } $(this).css(cssObj); }); }); </script>
</head> <body> <body> Hello </body>
</html></source>
The basic CSS Selectors supported by jQuery
<source lang="javascript">
Selector Description
- Matches any element.
E Matches element with tag name E. E F Matches elements with tag name F that are descendents of E. E>F Matches elements with tag name F that are direct children of E. E+F Matches elements F immediately preceded by sibling E. E~F Matches elements F preceded by any sibling E. E:has(F) Matches elements with tag name E that have at least one descendent with tag name F. E.C Matches elements E with class name C. Omitting E is the same as *.C. E#I Matches element E with id of I. Omitting E is the same as *#I. E[A] Matches elements E with attribute A of any value. E[A=V] Matches elements E with attribute A whose value is V. E[A^=V] Matches elements E with attribute A whose value begins with V. E[A$=V] Matches elements E with attribute A whose value ends with V. E[A*=V] Matches elements E with attribute A whose value contains V.
$("p:even"); selects all evenelements. $("tr:nth-child(1)"); selects the first row of each table. $("body > div"); selects direct
$("a[href$=pdf]"); selects links to PDF files.
$("body > div:has(a)") selects direct
Use CSS value when creating new tag
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var color = $("b").css("background-color");
alert(color);
$("b").html("" + color + ".");
}); </script>
</head> <body> <body> Highlight all to see me. Hello </body>
</html></source>
Use the rgb function with JQuery
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("td:empty").text("Was empty").css("background", "rgb(255,220,200)"); }); </script>
</head> <body>
data | |
data | |
data |
</body></html></source>