Article Directory
1. The css () method
css (name | pro | [, val | fn]):
(1) CSS chain operation is not recommended if it is greater than three steps
(2) CSS batch setting is passed in an object
(3) CSS style is returned and the belt is returned String with unit
(4) Callback function: returns the attribute value to be set . There are two parameters, the first is index is the index position of the element in the object collection, and value is the original attribute value, which is a numeric string .
The note is for special attention
<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>
Second, jQuery position operation
1. The offset () method and position () method
Note:
(1) In the example, two buttons are used to monitor the setting and get function respectively
(2) The offset () method: get the relative offset of the element from the window. , Units are not required to set offset (ie not strings) . The returned object contains two integer properties : top and left in pixels . This method is only valid for visible elements.
(3) Position () method: Get the relative offset of the element from the parent element. , Can only be obtained but not set . The returned object contains two integer properties : top and left in pixels . This method is only valid for visible elements.
CSS style:
<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>
Core code:
<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. The scrollTop () method and scrollLeft () method
Note:
(1) The parameter in scrollTop () is a number, not a string
CSS style:
(2) The method of scrollLeft () is the same as scrollTop (). This method is effective for both visible and hidden elements.
(3) The scrollTop () method and scrollLeft () method can both obtain the offset and set the offset
<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>
Core code:
<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>
Three, jQuery size operation
1. The width () and height () methods
(1) The width () method sets or returns the width of the element (not including the inner margin, border, or outer margin)
(2) The height () method sets or returns the height of the element (excluding the inner margin, border, or outer margin)
Note:
(1) Use the same method for width () and height ()
(2) Use it directly to get the width or height: width () and height ()
(3) There are two ways to set the width or height
- Way: the width () and () height afferent string or number
- Second way: in width () and height () pass in a function . This function returns the value to be set; two parameters can be accepted. The first parameter is the index position of the element in the original collection , the second parameter is the original width or 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 () method returns the width of the element (including the inner margin)
(2) innerHeight () method returns the height of the element (including the inner margin)
Note:
(1) innerWidth () and innerHeight () use the same method
( 2) Get directly used: innerWidth () and *** innerHeight () ***
(3) Only get without setting
//获取innerWidth
$("div").innerWidth()
//获取innerHeight
$("div").innerHeight()
3、outerWidth()和outerHeight()
(1) The outerWidth () method returns the width of the element (including padding and border)
(2) The outerHeight () method returns the height of the element (including padding and border)
Note:
(1) outerWidth () and outerHeight () Use the same method
(2) Get the direct use: outerWidth () and outerHeight ()
(3) Only get without setting
//获取outerWidth
$("div").outerWidth()
//获取outerHeight
$("div").outerHeight()
