程序媛的jQuery（四）

一、行内属性

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>