JavaScript DHTML/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 css(name): Return a style property on the matched element.
- 5 css(name, value): If a number is provided, it is automatically converted into a pixel value.
- 6 css(properties): set several style properties on matched elements.
- 7 Define CSS in an array and set
- 8 Get CSS value
- 9 Nested style setting
- 10 Set two CSS value in CSS function
- 11 The basic CSS Selectors supported by jQuery
- 12 Use CSS value when creating new tag
- 13 Use the rgb function with JQuery
Add border to DIV
<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>
<div id="myID.index[0]">0</div>
<div id="myID.index[1]">1</div>
<div id="myID.index[2]">2</div>
</body>
</html>
Add paragraph and set the style
<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>
<div>asdf</div>
<div>asdf</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Adds a background and text color to all the headers on the page.
<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>
<h1>Header 1</h1>
</body>
</html>
css(name): Return a style property on the matched element.
<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>
<div style="background-color:blue;">asdf</div>
</body>
</html>
css(name, value): If a number is provided, it is automatically converted into a pixel value.
<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>
<p>asdf</p>
</body>
</html>
css(properties): set several style properties on matched elements.
<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>
<p>Move the mouse over me.</p>
</body>
</html>
Define CSS in an array and set
<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>
<b>Hello</b>
</body>
</html>
Get CSS value
<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>
<b>Hello</b>
</body>
</html>
Nested style setting
<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>
<div class=blue>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
</body>
</html>
Set two CSS value in CSS function
<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>
<b>Hello</b>
</body>
</html>
The basic CSS Selectors supported by jQuery
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 even <p> elements.
$("tr:nth-child(1)"); selects the first row of each table.
$("body > div"); selects direct <div> children of <body>.
$("a[href$=pdf]"); selects links to PDF files.
$("body > div:has(a)") selects direct <div> children of <body>-containing links.
Use CSS value when creating new tag
<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("<span style="color:" +color + ";">" + color + "</span>.");
});
</script>
</head>
<body>
<body>
Highlight all to see me.
<b>Hello</b>
</body>
</html>
Use the rgb function with JQuery
<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>
<table>
<tr><td>data</td><td></td></tr>
<tr><td>data</td><td></td></tr>
<tr><td>data</td><td></td></tr>
</table>
</body>
</html>