程式媛的jQuery(四)
阿新 • • 發佈:2018-12-18
一、行內屬性
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>