1.利用js可以操作樣式和結構
-
1.DOM樹
- 2.利用DOM樹訪問HTML元素(節點)
通過使用 getElementById() 方法
-
getElementById() 方法返回帶有指定 ID 的元素
// 1.獲取id為box的盒子 var box = document.getElementById('box'); console.log(box); // 2.修改樣式 js操作盒子的樣式大多數都是設置行內樣式 box.style.width = '400px'; box.style.backgroundColor = 'yellow';
- 3.操作結構 innerHTML屬性
-
改變元素內容的最簡單的方法是使用 innerHTML 屬性
// 1.獲取標簽 var box = document.getElementById('box'); // 2.操作標簽 // innerHTML: 獲取或者修改 標簽里面的內容 box.innerHTML = '<h2>我是標題</h2><p>我是段落</p>';
-
2.事件的基本認識
我點擊了開關,燈亮了
事件三要素 事件源 事件屬性 事件指令
事件源:開關 對應HTML中的標簽
事件屬性: 做了什么動作, 點擊
事件指令: 做的一系列操作 造成的結果/影響,燈亮了
三者結合起來: 事件源.事件屬性 = 事件指令
-
事件屬性
-
2.圖片切換案例
// 1.獲取標簽 var box = document.getElementById('box'); // 2.綁定事件 onmouseover 鼠標經過 box.onmouseover = function () { box.src = 'images/22.jpg'; }; box.onmouseout = function () { box.src = "images/11.jpg"; };
3.換膚效果案例 hao123換膚效果 給body設置背景
// 1.獲取body
var body = document.body;
body.style.background = 'url(images/1.jpg)';
// 2.抽取函數 把相同的功能抽取出來,不同的做為參數傳遞
function changeSkin(id,url) {
var dom = document.getElementById(id);
dom.onclick = function () {
body.style.background = url;
};
}
changeSkin('pic1','url(images/1.jpg)');
changeSkin('pic2','url(images/2.jpg)');
changeSkin('pic3','url(images/3.jpg)');
changeSkin('pic4','url(images/4.jpg)');
changeSkin('pic5','url(images/5.jpg)');
4.電腦選取案例
// 1.獲取標簽
var box = document.getElementById('box');
function changeBackground(id,url) {
var dom = document.getElementById(id);
dom.onmouseover = function () {
box.style.background = url;
};
}
changeBackground('li1','url("images/1big.jpg")');
changeBackground('li2','url("images/2big.jpg")');
changeBackground('li3','url("images/3big.jpg")');
changeBackground('li4','url("images/4big.jpg")');
changeBackground('li5','url("images/5big.jpg")');
5.if語句的應用 美女競價
// 1.獲取標簽
var oh2 = document.getElementById('oh2');
var btn = document.getElementById('btn');
btn.onclick = function () {
// 彈出一個輸入框
/*
* '' 代表價格為空
* null 代表用戶點擊了取消
* */
var price = prompt('請輸入價格');
console.log(price);
if(price != null){
if (price == ''){
// 價格為空,提示
alert('價格不能為空');
}else if(parseInt(price) < 1000){
alert('美女很值錢,請重新競價');
}else if(isNaN(parseInt(price)) == true){
// 用戶輸入的不是數字
alert('請輸入數字');
} else {
oh2.innerHTML = '底價是' + price + '元';
}
}else {
console.log('用戶點擊了取消');
}
}
NaN 不是一個數字, 但是一個number類型 NaN和自身不相等
6.switch應用
// 1.獲取標簽
var sel = document.getElementById('sel');
sel.onchange = function () {
// alert(sel.value);
var str = '';
switch (sel.value){
case '春天':
str = '春意盎然';
break;
case '夏天':
str = '夏日炎炎';
break;
case '秋天':
str = '秋風瑟瑟';
break;
case '冬天':
str = '冬雪皚皚';
break;
default:
str = '未知';
}
alert(str);
}
7.食物選擇
-
html部分
<div id="box"> <span id="oSpan">食物選取</span> <ul id="oUl"> <li>蘋果</li> <li>香蕉</li> <li>黃瓜</li> </ul> </div> -
js部分
// 1.獲取標簽 var box = document.getElementById('box'); var oSpan = document.getElementById('oSpan'); var oUl = document.getElementById('oUl'); // 2.綁定事件 box.onmouseover = function () { oSpan.style.backgroundImage = 'url("images/down.gif")'; oUl.style.display = 'block'; }; box.onmouseout = function () { oSpan.style.backgroundImage = 'url("images/up.gif")'; oUl.style.display = 'none'; } display 元素隱藏后不占用位置
visibility 元素隱藏后還繼續占用原來的空間
8.transform屬性
// 1.獲取標簽
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var btn4 = document.getElementById('btn4');
var box = document.getElementById('box');
// 2.添加事件
// 平移
btn1.onclick = function () {
box.style.transform = 'translate(100px,100px)';
};
// 旋轉
btn2.onclick = function () {
box.style.transform = 'rotate(45deg)';
};
// 縮放
btn3.onclick = function () {
box.style.transform = 'scale(0.5,0.5)';
}
// 綜合
btn4.onclick = function () {
box.style.transform = ' translate(100px,100px) rotate(45deg) scale(0.5,0.5)';
}
9.輸入框的制作
// 1.獲取標簽
var input = document.getElementById('input1');
var placeholder = '請輸入產品名稱';
// 2.綁定事件
// 當輸入框成為焦點的時候會調用
input.onfocus = function () {
if(input.value == placeholder){
input.value = '';
input.style.color = '#000';
}
};
// 輸入框失去焦點
input.onblur = function () {
if (input.value == ''){
input.value = placeholder;
input.style.color = '#ccc';
}
}
10.js引入的3中方法 行內式 內嵌式 外聯式
- window.onload 當界面加載完畢的時候調用
window.onload = function () {
}
12.數組
-
1.數組的基本認識
數組是用來存儲大批量的數據, js中的數組可以存儲不同類型的數據 var arr = [1,'2',true,null,undefined,'123',456]; console.log(arr);-
1.數組創建的2種方式
var arr = new Array(); var arr1 = []; -
2.數組是有序的,可以通過下標值/索引值來獲取 索引值從 0 開始
console.log(arr[0]); console.log(arr[1]); console.log(arr[2]); console.log(arr[3]); -
3.數組的遍歷, 數組有一個length屬性可以獲取數組中元素個數
// 3.數組也可以采取遍歷的方式取出元素 for(var i = 0; i<arr.length; i++){ console.log(arr[i]); }
-
-
2.數組的應用 隔行變色
- box.getElementsByTagName('li'); 獲取box里面所有的li標簽,返回一個偽數組,目前可以認為是一個數組
3.全選,反選,不選
-
4.排他思想
// 1.獲取按鈕 var list = document.getElementsByTagName('button'); for(var i = 0; i<list.length; i++){ // 綁定事件 list[i].onclick = fn; } function fn() { // alert('點我啊'); // 1.取消所有的按鈕選中 for(var j = 0; j<list.length; j++){ list[j].className = ''; } // 2.選中當前的按鈕 // this 在事件指令中指向事件的調用者 this.className = 'curr'; }
