JSON
- json一種輕量級的數(shù)據(jù)交換格式, json是一種數(shù)據(jù)傳輸?shù)姆绞?/li>
- json是js對象的字符串表示法, json本質(zhì)就是一個字符串
格式:
var data = {
width:'100px',
height:'100px',
background:'red',
border:'10px solid #ccc'
};
JS對象表示法
- 點(diǎn)語法
box.style.width = data.width;
box.style.height = data.height;
box.style.background = data.background;
box.style.border = data.border;
- dom操作
box.style['width'] = data['width'];
box.style['height'] = data['height'];
box.style['background'] = data['background'];
box.style['border'] = data['border'];
遍歷js對象
- 增強(qiáng)for循環(huán)
- 遍歷屬性名
console.log(key, typeof key);
- 遍歷屬性值
//此時的key是動態(tài)修改的
box.style[key] = data[key];
注意: 不能用點(diǎn)語法取屬性值
//這個方法是錯誤的, 因?yàn)槭褂命c(diǎn)語法取值的前提是key必須是data里的屬性, 并不能動態(tài)修改. 所以這里無法取到, 只能使用[]中括號(dom操作)取屬性值.
box.style.key = data.key;
自定義屬性方法
賦值 setAttribute(鍵值對); 無返回值
取值 getAttribute(屬性名); 返回屬性值
注意: 使用多次set方法給同一個屬性賦值, 后面會覆蓋前面的
事件認(rèn)識
- 事件也是對象
- 事件通常與函數(shù)配合使用玻淑，這樣就可以通過發(fā)生的事件來驅(qū)動函數(shù)執(zhí)行。
Event對象 !!!
- Event 對象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)搏嗡、鼠標(biāo)的位置套才、鼠標(biāo)按鈕的狀態(tài)乎完。
- 事件通常與函數(shù)結(jié)合使用掰读，函數(shù)不會在事件發(fā)生前被執(zhí)行！
添加事件
需求: 獲取點(diǎn)在box上的坐標(biāo)點(diǎn)
event.clientX //哪個元素響應(yīng)事件, 就是哪個元素上的點(diǎn)坐標(biāo)
event.clientY
//onmousedown 鼠標(biāo)按鈕被按下躺屁。
//onmouseover 鼠標(biāo)移到某元素之上
//onmousemove 鼠標(biāo)被移動肯夏。
//onmouseup 鼠標(biāo)按鍵被松開。
//event 對象, 只要添加事件, 系統(tǒng)就會傳遞一個event對象
box.onmousedown = function (event) {
//console.log(1111);
//獲取box中鼠標(biāo)點(diǎn)坐標(biāo)
console.log(event.clientX);
console.log(event.clientY);
}
windows.event不支持火狐
- 鼠標(biāo)點(diǎn)擊event的兼容性寫法
var eve = event || window.event;
console.log(eve.clientX);
console.log(eve.clientY);
offset
1.offsetHeight = height + padding + border
2.offsetWidth = width + padding + border
3.offsetLeft 相對于祖先元素定位的左邊距離
4.offsetTop 相對于祖先元素定位的上邊距離
5.offsetParent 獲取祖先定位的元素的盒子
//offsetWidth 獲取當(dāng)前元素的寬度
//offsetWidth = width + padding *2 + border *2
console.log(son.offsetWidth);
//獲取定位父元素的頂部距離.
console.log(box.offsetTop);
- 不建議用js方式獲取width的屬性值
son.style.width = '200px';
console.log(son.style.width); //只有這一行不可拿到width值. reason: 非行內(nèi)級
應(yīng)用: 鼠標(biāo)移動
<script>
var box = document.getElementById('box');
box.onmousedown = function (ev) {
//注意: 不同觸發(fā)事件中使用一次用一次
var event = event || window.event;
//當(dāng)前鼠標(biāo)點(diǎn)距離盒子左邊的距離
var x = event.clientX - box.offsetLeft;
var y = event.clientY - box.offsetTop;
document.onmousemove = function (ev) {
//注意: 在哪使用事件對象, 就在哪獲取事件對象
var event = event || window.event;
var top = event.clientY - y;
var left = event.clientX - x;
console.log(box.offsetTop);
console.log(box.offsetLeft);
box.style.top = top + 'px';
box.style.left = left + 'px';
}
box.onmouseup = function (ev) {
document.onmousemove = null;
}
}
</script>
滾動事件
- 滾動事件:在元素滾動條在滾動時觸發(fā)
- 只要滾動條發(fā)生滾動,就會調(diào)用onscroll
- 可以獲得滾動距離scrollTop : 向上滾出頁面的長度.
// 兼容寫法
var top = document.documentElement.scrollTop || document.body.scrollTop;
- 用于監(jiān)聽滾動事件, 對topbar進(jìn)行定位.
- eg. https://sspai.com/
回調(diào)函數(shù)
var box = document.getElementById('box');
// var btnlist = document.getElementsByTagName('button');
var btnlist = box.children;
//將函數(shù)作為參數(shù)傳入, 實(shí)現(xiàn)一個功能
function getEleColor(obj, color) {
obj.style.backgroundColor = color;
}
function changeEleWidth(obj, width) {
obj.style.width = width;
}
function changeStyle(btnlist, fn, item) {
for(var i = 0; i < btnlist.length; i++){
fn(btnlist[i], item);
}
}
changeStyle(btnlist, changeEleWidth, '150px');
changeStyle(btnlist, getEleColor, 'orange');
