一、獲取和設置元素的寬和高------width( )方法和height（）方法

<!-- 點擊按鈕,設置div的寬和高為原來的兩倍 --><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script><script>$(function(){//方法1:使用css方法獲取寬高-------得到的是字符串類型的值 $("#btn1").click(function(){var w=parseInt($("#dv").css("width"));var h=parseInt($("#dv").css("height"));$("#dv").css("width",w*2+"px");$("#dv").css("height",h*2+"px");});//方法2:使用width()方法和height()方法獲取寬高-----得到的是數字類型的值//沒有參數是是獲取元素的寬和高//有參數(可以是單純的數字,也可以是字符串,比如 "300px")是設置元素的寬和高 $("#btn2").click(function(){var w=$("#dv").width();var h=$("#dv").height();$("#dv").width(w*2);$("#dv").height(h*2);});});</script><input type="button" value="css設置" id="btn1"><input type="button" value="wh設置" id="btn2"><div id="dv" style="width: 200px;height: 200px;background: #ccc;"></div>

二、獲取和設置元素的left和top值------offset()方法

<!-- 點擊按鈕,設置div的left和top為原來的兩倍 --><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script><script>$(function(){//方法1:使用css獲取設置div的left和top---獲取得到的是字符串類型,需要轉化 $("#btn1").click(function(){var l=parseInt($("#dv").css("left"));var t=parseInt($("#dv").css("top"));$("#dv").css("left",l*2+"px");$("#dv").css("top",t*2+"px");});//方法2:使用offset()方法獲取和設置div的left和top//offset()獲取的是一個對象,對象里面有兩個屬性,left和top//注意offset的left和top屬性的值是包括margin-left和margin-top的值//offse()方法同樣的,沒有參數是獲取,有參數(對象,鍵值對形式)是設置 $("#btn2").click(function(){var l=$("#dv").offset().left;var t=$("#dv").offset().top;//120 $("#dv").offset({"left":l*2,"top":t*2});});});</script><input type="button" value="css設置" id="btn1"><input type="button" value="offset設置" id="btn2"><div id="dv" style="width: 200px;height: 200px;position: absolute;left: 50px;top: 50px; margin-top: 20px;background: #ccc;"></div>

三、獲取元素的卷曲部分的距離-------scrollLeft()方法和scrollTop()方法

<!-- 實時獲取卷曲出去的值 --><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script><script>$(function(){$("#dv").scroll(function(){var l=$(this).scrollLeft();var t=$(this).scrollTop();console.log("向左卷曲的值:"+l+"=====向上卷曲的值:"+t);});});</script><div id="dv" style="width: 200px;height: 150px;background: #ccc;overflow: auto;">秋雨一何碧，山色倚晴空。江南江北愁思，分付酒螺紅。蘆葉蓬舟千重，菰菜莼羹一夢，無語寄歸鴻。醉眼渺河洛，遺恨夕陽中。 蘋洲外，山欲暝，斂眉峰。人間俯仰陳跡，嘆息兩仙翁。不見當時楊柳，只是從前煙雨，磨滅幾英雄。天地一孤嘯，匹馬又西風。</div>

四、固定導航欄案例

<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script><script>$(function () {//滾動事件 $(window).scroll(function () {//如果向上卷曲的距離大于第一個div的高度if ($(this).scrollTop() >= $("#nav").height()) {//設置第二個div固定在頁面的頂部 $("#navbar").css("position", "fixed");$("#navbar").css("top", 0);//設置第三個div的外邊距,避免直接跳上去 $("#main").css("marginTop",$("#navbar").height());} else {//恢復 $("#navbar").css("position", "static");$("#main").css("marginTop",0);}});});</script><div id="nav">設置了寬度100%,高度50px,紅色背景</div><div id="navbar">設置了寬度100%,高度100px,黃色背景</div><div id="main">設置了寬度100%,高度1000px,藍色背景</div>

轉載于:https://www.cnblogs.com/EricZLin/p/9122136.html

總結

以上是生活随笔為你收集整理的jQuery相关方法6----三大系列属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。