jQuery1.3中的css部分分三块:
第一部分是CSS部分,也就是基本的css功能。
1.CSS(name):
这部分返回第一个匹配控件的style属性。不过它不支持某些css属性,比如margin,background,border等。
参数就一个name,就是css格式中某个属性的名字,比如background-color.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div").click(function () {
var color = $(this).css("background-color");
$("#result").html("That div is <span style='color:" +
color + ";'>" + color + "</span>.");
});
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
</head>
<body>
<span id="result"> </span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
</body>
</html>
2. css(properties):
通过把一些style的属性放到一个对象中,来给所有匹配的控件添加格式。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").hover(function () {
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'rgb(0,40,244)'
}
$(this).css(cssObj);
});
});
</script>
<style>
p { color:green; }
</style>
</head>
<body>
<p>
Move the mouse over a paragraph.
</p>
<p>
Like this one or the one above.
</p>
</body>
</html>
3.css(name,value):
为某个匹配的控件设置一个格式，不过格式只包含一个属性,也就是参数中的name。比如color设置为red。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").mouseover(function () {
$(this).css("color","red");
});
});
</script>
<style>
p { color:blue; width:200px; font-size:14px; }
</style>
</head>
<body>
<p>
Just roll the mouse over me.
</p>
<p>
Or me to see a color change.
</p>
</body>
</html>
当然这里的颜色也可以设置为#FFFFFF这种格式的。
第二部分是position。
这里需要明白两个概念: top, left, 下面几个函数的top都是指距离顶端的多少px,而left是指距离控件的左端多少px.
1.offset():
偏移值,也就是确定某个控件的位置。不大清楚这个函数的作用是什么。它会为匹配的控件返回两个数值。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
});
</script>
<style>
p { margin-left:10px; }
</style>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
</body>
</html>
2.position():
和offset()差不多,只是这个返回两个值,一个事postion.left,一个是position.top,也就是得到某个控件的top和left。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );
});
</script>
<style>
div { padding: 15px;}
p { margin-left:10px; }
</style>
</head>
<body>
<div><p>Hello</p></div><p></p>
</body>
</html>
上面这两个函数不适合隐藏控件。
3.scrollTop():
这个函数主要得到第一个匹配控件的滚动条距离控件顶端的值。如果没有滚动条显示，那么返回值会是0.下面是个例子:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
});
</script>
<style>
p { margin:10px;padding:5px;border:2px solid #666; }
</style>
</head>
<body>
<p>Hello</p><p></p>
</body>
</html>
4.scrollTop( val ):
设置一个val来为所有匹配的控件设置滚动条的那个能够拖动的按钮所处的位置。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div.demo").scrollTop(300);
});
</script>
<style>
div.demo {
background:#CCCCCC none repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
</style>
</head>
<body>
<div class="demo"><h1>lalala</h1><p>Hello</p></div>
</body>
</html>
还有scrollleft(), 和scrollleft(val)，这两个函数于上面这两个差不多。
第三部分是height和width。
1.height():
得到某个控件的高度。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function showHeight(ele, h) {
$("div").text("The height for the " + ele +
" is " + h + "px.");
}
$("#getp").click(function () {
showHeight("paragraph", $("p").height());
});
$("#getd").click(function () {
showHeight("document", $(document).height());
});
$("#getw").click(function () {
showHeight("window", $(window).height());
});
});
</script>
<style>
body { background:yellow; }
button { font-size:12px; margin:2px; }
p { width:150px; border:1px red solid; }
div { color:red; font-weight:bold; }
</style>
</head>
<body>
<button id="getp">Get Paragraph Height</button>
<button id="getd">Get Document Height</button>
<button id="getw">Get Window Height</button>
<div> </div>
<p>
Sample paragraph to test height
</p>
</body>
</html>
2.height( val ):
设置某个控件的高度为某个值(px)。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div").one('click', function () {
$(this).height(30)
.css({cursor:"auto", backgroundColor:"green"});
});
});
</script>
<style>
div { width:50px; height:70px; float:left; margin:5px;
background:rgb(255,140,0); cursor:pointer; }
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
3，4:width()和width( val ):
这两个函数和上面的两个意思差不多。
5innerheignt():
得到匹配控件的innerheight,
下面的例子是得到hello的innerheight:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
});
</script>
<style>
p { margin:10px;padding:5px;border:2px solid #666; }
</style>
</head>
<body>
<p>Hell<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth()+ " , outerWidth(true):" + p.outerWidth(true) );
});
</script>
<style>
p { margin:10px;padding:5px;border:2px solid #666; }
</style>
</head>
<body>
<p>Hello</p><p></p>
</body>
</html>
o</p><p></p>
</body>
</html>
对应的还有innerwidth().
6.outerwidth():
主要是的到outwidth,也就是包括border和padding的值。这个函数还可以有个参数true,outerwidth(true),那么就会加上margin的值。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth()+ " , outerWidth(true):" + p.outerWidth(true) );
});
</script>
<style>
p { margin:10px;padding:5px;border:2px solid #666; }
</style>
</head>
<body>
<p>Hello</p><p></p>
</body>
</html>