一、行內屬性

1、prop()：行內自帶屬性

① 設定操作

$('#box').prop('id', 'box6');
$('#box').prop('class', 'box6');
$('#box').prop({
	id : 'box5',
	title : '這是新的title'
});

② 獲取操作

$('#box').prop('id');

2、attr()：行內自定義屬性

$('#box').attr('hehe');
$('#box').attr('data-index');

3、data()：行內自定義屬性

如果操作一個data-開頭的屬性，可以不書寫data-，使用data方法設定的內容不會在標籤的行內顯示，但是不影響使用。

$('#box').data('index', 200);
console.log($('#box').data('index')); // 200

二、樣式操作

1、獲取操作

① width()：用於獲取元素的寬(width)

$('#box').width();

② innerWidth()：用於獲取元素的寬(width + padding)
③ outerWidth()：用於獲取元素的寬度(width + padding + border)
④outerWidth(true)：用於獲取盒模型的總寬度

2、設定操作

① width()：用於設定元素的寬(width)

$('#box').width(150);

② innerWidth()：用於設定元素的寬(width + padding)
③ outerWidth()：用於設定元素的寬度(width + padding + border)
④outerWidth(true)：用於設定盒模型的總寬度

除了上面的寬度操作方法以外，還對應一組高度操作方法。

三、頁面滾動

1、滾動事件

scroll，當元素內部的滾動條滾動時觸發事件
① 捲曲高度：scrollTop()
② 捲曲寬度：scrollLeft()

2、offset()

① offset()用於獲取元素到頁面(body)的距離

$('#box').offset();
// 結果為物件形式，具有left和top屬性

② 設定offset()方法：

$('#box').offset({
	left : 150,
	top : 200
});
//  設定時如果沒有新增定位，會自動設定相對定位，但是不推薦這樣使用。

3、position()

① 用於獲取當前元素到定位父盒子之間的距離。計算方式為盒模型的邊界開始計算(多含了一個margin)，所以一般當前元素不設定margin。

$('#box').position();
$('#box')[0].offsetLeft;

② position()的獲取結果只讀，無法設定。

案例

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        body, html {
            width: 100%;
            height: 100%;
        }

        div {
            width: 100%;
            height: 100%;
        }

        ul {
            width: 100%;
            height: 100%;
        }

        ul li {
            width: 100%;
            height: 100%;
        }

        ol {
            position: fixed;
            top: 60px;
            left: 60px;
        }

        ol li {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            margin-top: -1px;
            cursor: pointer;
            text-align: center;
            line-height: 50px;
        }
    </style>

<div id="box">
    <!-- 背景的大方塊-->
    <ul>
        <li>男裝</li>
        <li>女裝</li>
        <li>童裝</li>
        <li>老年裝</li>
        <li>媽咪裝</li>
    </ul>
    <!-- 左側的小按鈕-->
    <ol>
        <li>男裝</li>
        <li>女裝</li>
        <li>童裝</li>
        <li>老年裝</li>
        <li>媽咪裝</li>
    </ol>
</div>

<script src="../jquery-1.12.4.min.js"></script>
<script>
    $(function () {
    	//定義顏色陣列
	    var color = ["pink", "blue", "green", "orange", "purple"];
	    //大背景
	    var $lisUl = $('ul>li');

	    $('ol>li').each(function (i, ele) {
	        $(ele).css('backgroundColor', color[i]);
	        $lisUl.eq(i).css('backgroundColor', color[i]);

	        //新增點選事件
	        $(ele).click(function () {
	        	$('body,html').stop().animate({scrollTop : $('ul>li').eq($(this).index()).position().top}, 500);
	        });
	     });
    });
</script>