文章目录
一、css()方法
css(name|pro|[,val|fn]):
(1)CSS链式操作如果大于三步不建议使用
(2)CSS批量设置传入的是一个对象
(3)获取CSS样式返回的是带有单位的字符串
(4)回调函数: 返回要设置的属性值。有两个参数,第一个是index为元素在对象集合中的索引位置,value是原先的属性值,是一个数值字符串。
注释部分为特别关注
<body>
<div></div>
<script src="../jquery.js"></script>
<script>
$(function() {
//1、逐个设置
$("div").css("width","100px");
$("div").css("height","100px");
$("div").css("background","blue");
//2、链式设置
//注意:链式操作如果大于三步建议逐个设置(阅读性差)
$("div").css("width","100px").css("height","100px").css("background","red");
//3、批量设置(传入一个对象,推荐)
$("div").css({
height:"100px",
width:"100px",
background:"yellow"
})
//4、获取CSS的样式(获取的是一个字符串,带有单位px )
console.log($("div").css("height"));
});
//5、回调函数
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseInt(value) * 2;
},
height: function(index, value) {
return parseInt(value) * 2;
}
});
});
</script>
</body>
二、jQuery的位置操作
1、offset()方法和position()方法
注意:
(1) 示例中分别用两个按钮监听设置和获取功能
(2)offset()方法: 获取元素距离窗口的相对偏移。,设置offset不需要单位(即不是字符串)。返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
(3)position()方法: 获取元素距离父元素的相对偏移。,只能获取不能设置。返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
CSS样式:
<style>
*{
margin: 0;
padding: 0;
}
.father {
width: 100px;
height: 100px;
background-color: red;
border: 2px solid #000;
margin-left: 20px;
position: relative;
}
.son {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
top:25px;
left:25px
}
</style>
核心代码:
<body>
<div class="father">
<div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
<script src="../jquery.js"></script>
<script>
$(function() {
var btn = document.getElementsByTagName("button");
//监听获取
btn[0].onclick = function() {
//获取元素的宽度
console.log("我是father的宽度:"+$(".father").width());
//offset():获取元素距离窗口的偏移位
console.log("我是son的offset(:"+$(".son").offset().left);
//position():获取元素距离父元素的偏移位,只能获取不能设置
console.log("我是son的position():"+$(".son").position().left);
};
//监听设置
btn[1].onclick = function() {
//获取元素的宽度
$(".father").width("200px");
//设置offset,不需要单位
$(".son").offset({
left:30,
top:50
});
};
})
</script>
</body>
2、scrollTop()方法和 scrollLeft()方法
注意:
(1)scrollTop()中参数是数字,不是字符串
CSS样式:
(2) scrollLeft()方法使用方法和 scrollTop()方法相同,此类方法对可见和隐藏元素均有效。
(3)scrollTop()方法和 scrollLeft()方法既可以获取偏移,也可以设置偏移
<style>
.box1 {
width: 100px;
height: 200px;
border: 1px solid #000;
overflow: scroll;
}
</style>
HTML:
<div class="box1">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是d我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是diviv我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
</div>
<button>获取</button>
<button>设置</button><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
核心代码:
<script src="../jquery.js"></script>
<script>
$(function() {
var btn = document.getElementsByTagName("button");
//监听获取
btn[0].onclick = function() {
//获取滚动的偏移位
console.log($(".box1").scrollTop());
//获取网页滚动的偏移位
//注意:为了保证浏览器的兼容,获取网页滚动的偏移位时要按以下写法
console.log($("body").scrollTop()+$("html").scrollTop());
};
//监听设置
btn[1].onclick = function() {
//设置滚动的偏移位
//不是字符串
$(".box1").scrollTop(200);
//设置网页滚动的偏移位
//注意:为了保证浏览器的兼容,设置网页滚动的偏移位时要按以下写法
$("html,body").scrollTop(20)
}
});
</script>
三、jQuery的尺寸操作
1、width()和height()方法
(1)width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)
(2)height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)
注意:
(1)width()和height()使用方法相同
(2)获取宽度或高度直接使用:width() 和 height()
(3)设置宽度或高度有两种方式
- 方式一: 在 width() 和 height() 中传入字符串或者数字
- 方式二: 在 width() 和 height() 中传入一个函数。该函数返回要设置的数值;可以接受两个参数。第一个参数是元素在原来集合中的索引位置,第二个参数是原先的宽度或高度
//获取宽度
$("div").width()
//设置宽度
//1、字符串或者数字
$("div").width(20)
/*
2、函数,返回要设置的数值;可以接受两个参数
第一个参数:元素在原来集合中的索引位置
第二个参数:原先的宽度
*/
$("button").click(function() {
$("div").width(function(index,old) {
return index + old;
})
})
//获取高度
$("div").height()
//设置高度
//1、字符串或者数字
$("div").height(20)
/*
2、函数,返回要设置的数值;可以接受两个参数
第一个参数:元素在原来集合中的索引位置
第二个参数:原先的高度
*/
$("button").click(function() {
$("div").height(function(index,old) {
return index + old;
})
})
2、innerWidth()和innerHeight()
(1)innerWidth() 方法返回元素的宽度(包括内边距)
(2)innerHeight() 方法返回元素的高度(包括内边距)
注意:
(1)innerWidth() 和 innerHeight() 使用方法相同
(2)获取直接使用:innerWidth() 和***innerHeight()***
(3)只有获取没有设置
//获取innerWidth
$("div").innerWidth()
//获取innerHeight
$("div").innerHeight()
3、outerWidth()和outerHeight()
(1)outerWidth() 方法返回元素的宽度(包括内边距和边框)
(2)outerHeight() 方法返回元素的高度(包括内边距和边框)
注意:
(1)outerWidth() 和 outerHeight() 使用方法相同
(2)获取直接使用:outerWidth() 和 outerHeight()
(3)只有获取没有设置
//获取outerWidth
$("div").outerWidth()
//获取outerHeight
$("div").outerHeight()