jQuery css,position,offset,scrollTop,scrollLeft用法
jQuery css,position,offset,scrollTop,scrollLeft用法:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>b index</title>
<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
<style type="text/css">
.s1{
width: 100px;
height: 100px;
background-color: pink;
}
.s2{
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body >
<div >div001</div>
<div >div002</div>
<div class='div003'>div003</div>
<div >
<p mce_>
这里是文本 这里是文本 这里是文本 这里是文本 这里是文本
</p>
</div>
<div>
<button >click me to get div001 css </button>
<button >click me to get div css </button>
<button >click me to use position/offset/scrollTop </button>
<button >click me to set p scrollTop </button>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="b/js/bootstrap.js"></script>
<script type="text/javascript" src="js/index037.js"></script>
</body>
</html>$(function() {
$('#btn001').click(btn001Click);
$('#btn002').click(btn002Click);
$('#btn003').click(btn003Click);
$('#btn004').click(btn004Click);
console.log('load: ' + new Date());
setInterval("msg()", 60000);
});
function msg() {
console.log('msg: ' + new Date());
}
function btn001Click() {
// 必须有参数，没有参数会报错：Uncaught TypeError: Cannot read property 'replace' of undefined
// var obj01=$('#btn001').css();
// console.log(obj01);
// 返回一个字符串
var obj02 = $('#btn001').css('color');
console.log(obj02);
// 返回一个对象,abc对应的值为undefined
var obj03 = $('#btn001').css([ 'color', 'background', 'abc' ]);
console.log(obj03);
var obj031 = $('#div001').css('background', 'red');
console.log(obj031);
// 因为可以连缀写下去，所以返回的是div001元素的jQuery对象；
var obj04 = $('#div001').css('width');
console.log(obj04);
$('#div001').css('height', function(i, v) {
// 这里面的i是0；
console.log(i);
console.log(v);
return parseFloat(v) * 1.2;
});
}
function btn002Click() {
// 会进行自己的遍历，其实所有的jQuery对象都是数组，所以就可以统一处理了；
var obj01 = $('div').css('background', 'red');
console.log(obj01);
$('div').css('height', function(i, v) {
// 这里面的i就会变化；会把所有的div元素遍历一遍；
console.log(i);
console.log(v);
return parseFloat(v) * 1.2;
});
}
function btn003Click() {
// 相对父元素位置，只对可见元素有效；
var obj01 = $('#div001').position();
console.log(obj01);
// 相对当前视口的位置，只对可见元素有效；
var obj02 = $('#div001').offset();
console.log(obj02);
// 获取顶部偏移；结果：0;对可见、不可见元素都是有效的；
var obj03 = $('#div001').scrollTop();
console.log(obj03);
// 进行设置，那就会返回div001的jQuery对象；设置好像不生效呀；
var obj04 = $('#div001').scrollTop(200);
console.log(obj04);
// 现在查看还是0，
var obj05 = $('#div001').scrollTop();
console.log(obj05);
}
function btn004Click(){
// 这个貌似无效；
var obj01=$('p').scrollTop(20);
console.log(obj01);
// 这个可以进行位置的偏移；偏移之后，其scrollTop,scrollLeft还是不变；
var obj02=obj01.offset({top:81});
console.log(obj02);
}