jQuery的事件機制和其他知識
阿新 • • 發佈：2020-12-14
jQuery 設定寬度和高度
寬度操作：
$(selector).height(); //不帶引數表示獲取高度
$(selector).height(200); //帶引數表示設定高度
寬度操作：
$(selector).width(); //不帶引數表示獲取寬度
$(selector).width(200); //帶引數表示設定高寬度
問題：jQuery的css()獲取高度，和jQuery的height獲取高度，二者的區別？
答案：
$("div").css(); //返回的是string型別，例如：30px
$("div").height(); //返回得失number型別，例如：30。常用於數學計算。
如上方程式碼所示，$("div").height();返回的是number型別，常用於數學計算。
#jQuery 的座標操作
#offset()方法
$(selector).offset();
$(selector).offset({left:100, top: 150});
作用：獲取或設定元素相對於 document 文件的位置。引數解釋：
-
無引數：表示獲取。返回值為：{left:num, top:num}。返回值是相對於document的位置。
-
有引數：表示設定。引數建議使用 number 數值型別。
注意：設定offset後，如果元素沒有定位(預設值：static)，則被修改為relative。
#position()方法
$(selector).position();
作用：獲取相對於其最近的帶有定位的父元素的位置。返回值為物件：{left:num, top:num}。
注意：只能獲取，不能設定。
#scrollTop()方法
scrollTop();
$(selector).scrollTop(100);
作用：獲取或者設定元素被捲去的頭部的距離。引數解釋：
-
無引數：表示獲取偏移。
-
有引數：表示設定偏移，引數為數值型別。
#scrollLeft()方法
scrollLeft();
$(selector).scrollLeft(100);
作用：獲取或者設定元素水平方向滾動的位置。引數解釋：
-
無引數：表示獲取偏移。
-
有引數：表示設定偏移，引數為數值型別。
程式碼示範：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 5000px;
}
.box1 {
width: 300px;
height: 300px;
position: relative;
margin: 10px;
overflow: auto;
background-color: pink;
}
.box2 {
width: 200px;
height: 400px;
position: absolute;
top: 50px;
left: 50px;
background-color: yellow;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//距離頁面最頂端或者最左側的距離和有沒有定位沒有關係
$("button").eq(0).click(function () {
alert($(".box2").offset().top);
})
//距離頁面最頂端或者最左側的距離和有沒有定位沒有關係
$("button").eq(1).click(function () {
$(".box2").offset({"left": 1000, "top": 1000});
})
//距離父系盒子中帶有定位的盒子的距離(獲取的就是定位值，和margin/padding無關)
$("button").eq(2).click(function () {
alert($(".box2").position().top);
})
//距離父系盒子中帶有定位的盒子的距離(獲取的就是定位值，和margin/padding無關)
$("button").eq(3).click(function () {
$(".box2").position().top = "100px"