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'; }
