一、行内属性
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>