jQuery操作css
jQuery可以通过css方法直接给指定元素查看，更改，添加css样式
<script>
$(function () {
//jQuery可以通过css方法直接给指定元素查看，更改，添加css样式
//两个参数时为更改，添加 第一个参数为 css样式名 第二个为值
//第一种逐个设置 一个css样式写一行代码
$('div').css('width','100px');
$('div').css('height','100px');
$('div').css('background','red');
//第二种 链式设置 直接连着写
//虽然可以无限连写 但是可读性会很差 所以一般要写很长的不推荐用这个
$('div').css('width','100px').css('height','100px').css('background','red');
//第三种 批量设置 直接传入对象 用对象的属性和值 来对应 css的css样式名和值
//这种是最简便的 推荐用这个
$('div').css({
'width':'100px',
'height':'100px',
'background':'red'
});
//一个参数时 表示css样式名 根据样式名返回他的值
console.log($('div').css('width'));
})
</script>
<body>
<div></div>
</body>
jQuery操作位置和尺寸的方法
<script>
$(function () {
var btns = document.getElementsByTagName('button');
btns[0].onclick = function(){
console.log($('.father').width());//在jQuery中的width方法在无参数时是获取元素的宽度
//offset方法在无参数时是获取元素距离窗口的偏移量
//这个偏移量有两个一个是top另一个是left 可以指定要哪个 在不指定时返回他两个的数组
console.log($('.son').offset().left);
//position方法是获取元素距离上一级元素的偏移量
//这个偏移量有两个一个是top另一个是left 可以指定要哪个 在不指定时返回他两个的数组
//主要：position不能设置偏移量 只能读 设置用jQuery自带的css方法就行了
console.log($('.son').position());
}
btns[1].onclick = function(){
$('.father').width('500px');//在jQuery中的width方法在有参数时是设置元素的宽度 括号内的字符串是值
$('.father').offset({
left:10});//有参数时为设置偏移量 参数为一个对象 字符串不行
}
})
</script>
<body>
<div class="father">
<div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
jQuery的scrolltop方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
height: 3000px;
}
.scroll{
width: 100px;
height: 200px;
border: 1px solid black;
overflow: auto;
}
</style>
</head>
<script src="../jQuery/jquery-1.12.4.js"></script><!-- 引入jQuery库 -->
<script>
$(function(){
var btns = document.getElementsByTagName('button');
btns[0].onclick = function(){
console.log($('.scroll').scrollTop());//scrollTop无传入参数用于获取滚动条的偏移量
console.log($('html').scrollTop());//ie浏览器的话获取浏览器的滚动条可能获取不到
//注意：万无一失的写法
console.log($('body').scrollTop() + $('html').scrollTop());//前面的是IE的写法 在其他的浏览器都是0 后面的是其他浏览器写法 IE浏览器为0
}
btns[1].onclick = function(){
$('.scroll').scrollTop('300');//scrollTop有传入参数用于设置滚动条的偏移量 可以是number 也可以是字符串
$('html').scrollTop('300');
$('html,body').scrollTop('300');//body为了兼容IE浏览器
}
})
</script>
<body>
<div class="scroll">asd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kahasd asd asd awaijgfb kah</div>
<button>获取</button>
<button>设置</button>
</body>
</html>