1.获取页面元素
-根据选择器selector获取元素
-document.querySelector(‘选择器’) 获取一个元素
-document.querySelectorAll(‘选择器’) 获取多个元素
2.元素属性操作
- id
- className
- href
- src
- innerText
- value
- disabled
- checked
- selected
- style：样式
3.事件- 组成事件的三要素 事件源 事件类型 事件处理函数
- 页面元素注册事件
- 鼠标单击onclick
- 鼠标双击ondblclick
- 鼠标移入onmouseover
- 鼠标移出onmouseout
- 成为焦点onfocus
- 失去焦点onblur
01-WebApi
1.1-WebAPI概念介绍
- API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
- 任何开发语言都有自己的API
- API的特征输入和输出(I/O)
- API的使用方法(console.log())
- WebAPI概念
- 浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
- 此处的Web API特指浏览器提供的API(一组方法)
1.2-JavaScript组成三个部分
- 1.ECMAScript - JavaScript的核心
- 定义了javascript的语法规范
- JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了js语言的标准
- 2.DOM - 文档对象模型
- 一套操作页面元素（HTML+CSS）的API
- DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
- 3.BOM - 浏览器对象模型
- 一套操作浏览器功能的API
- 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
1.3-DOM
- Docuemnt Object Model（文档对象模型）
- 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
- HTML DOM 模型被构造为对象的树。
- HTML DOM 树
- 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应（交互）
- DOM工作原理介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
</style>
</head>
<body>
<a href="#">链接</a>
<p id="p1" class="one">文本</p>
<script>
/*
1. DOM ： js动态操作网页内容
2. DOM工作原理 ：
硬盘代码读取到内存 -> 浏览器渲染引擎生成DOM树（document） -> 开始渲染页面
*/
//js为什么可以操作网页的html元素?
//因为浏览器会将html代码读取到内存中，生成一颗dom树对象（document）
//修改了dom树内容，最终页面也会变化
console.log(document);
</script>
</body>
</html>
1.4-BOM
- Browser Object Model:浏览器对象模型
- BOM定义了一套操作浏览器功能的API
02-获取页面元素
- css语言如何获取页面元素？
- 通过选择器
- id选择器 : #id名
- 类选择器: .类名
- 标签选择器:标签名
- 子代选择器:ul>li
- 后代选择器:ul li
- 通过选择器
- js语言如何获取元素页面元素？
- 也是通过选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box {
background-color: green;
}
#box1 {
background-color: hotpink;
}
.one {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="box" class="one">mark</div>
<div id="box1" class="one">马云</div>
<p class="one">pppp</p>
<script>
/*
1. document.querySelector('css选择器')
a. 只能获取满足选择器条件的 第一个元素
b. 如果无法获取元素， 则会返回null
2. document.querySelectorAll('css选择器')
a. 可以获取满足选择器条件的 所有元素
b. 返回值一定是数组（伪数组）
*/
/**
* @description: 1. 根据选择器获取页面单个元素
* @param {type} ： css选择器字符串
* @return: 元素对象 | null
*/
let box = document.querySelector('.one');
//DOM元素对象 ： 对象类型数据，由于存储的是页面元素的数据，一般称之为DOM元素对象
console.log(box);
/**
* @description: 2. 根据选择器获取页面所有元素
* @param {type} ： css选择器字符串
* @return: 一定是数组（伪数组）
*/
let oneList = document.querySelectorAll('.one');
console.log(oneList);
//伪数组：有数组三要素，没有数组的api
// oneList.reverse();//程序报错
</script>
</body>
</html>
03-操作元素属性
1.1-元素属性操作
- 1.语法：元素.属性名(其实就是对象的取值赋值语法)
- 设置元素属性的值:元素.属性名 = 属性值
- 2.特点：
- 1.class在js中是一个关键字，如果要拿到类名需要使用className
- 2.只能获取到行内样式的属性值，无法得到行外(内联/外联)样式的属性值
- 3.一定是一个字符串，例如：div.style.height得到150px 得到的是一个带单位的字符串
- 4.如果css样式的属性有 -
- 例如background-color,margin-top,使用js获取和设置这些属性的时候需要使用驼峰命名(因为-符号不符合js的命名规范)
- 例如:div.style.backgroundColor
- 3.注意点：修改类名需要注意会覆盖掉原本的类样式，所以一般我们不会直接修改类名，而是在原先类名的基础上加 一个类，这里需要注意多个类名之间的空格
- 例如：div.className += " two";//字符串拼接添加类型，注意多个类名之间的空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box" class="one" style="width: 100px;height: 100px;background-color: red">我是班长</div>
<p>我是pp</p>
<script>
//需求：修改元素的颜色
//1.获取元素
let box = document.querySelector('#box');
console.log(box);
//2.操作元素的属性 ：对象的取值/赋值语法 (点语法 或 字符串语法)
//2.1 取值: 对象名.属性名
console.log(box.id);//box
console.log(box['id']);//box
console.log(box.style);//css样式属性对象
console.log(box.style.height);//"100px" 带单位字符串
//2.2 赋值： 对象名.属性名 = 值
box.style.height = '200px';
/*
注意点：html属性带- ，background- font- margin- padding-,在js中都需要转成驼峰命名法
a.驼峰命名法： （1）去掉- （2）将-后面的首字母变成大写
b.原因： - 不符合js命名规则
*/
box.style.fontSize = '20px';
box.style.backgroundColor = 'green';
</script>
</body>
</html>
1.2-普通元素常用属性
语法 作用
元素.id 获取id
元素.className 获取类名
元素.innerText 获取文本
元素.href 获取链接（常用于a标签）
元素.src 获取路径(常用于img标签)
元素.style 获取css样式对象(获取的是一个对象类型，包含所有css熟悉)
元素.style.backgroundColor 获取css样式的颜色 （带-的css样式，需要使用驼峰命名来获取）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box" class="one" style="width: 100px;height: 100px;background-color:red">我是班长</div>
<span id="sp">我是span</span>
<a href="#" target="__blank">点我有惊喜</a>
<img src="images/001.jpg" alt="">
<script>
//1.获取页面元素
let box = document.querySelector('#box');
let sp = document.querySelector('#sp');
let a = document.querySelector('a');
let img = document.querySelector('img');
//2.html属性
console.log(box.id);
/* 获取类名需要使用className，不能使用class，因为class是js关键字 */
console.log(box.className);
//innerText : 获取普通元素(双标签)的文本
console.log(box.innerText);
console.log(sp.innerText);
//href:a标签的链接
console.log(a.href);
a.href = 'http://www.itheima.com';
//src: img标签的图片链接
console.log(img.src); //获取的是绝对路径
img.src = 'images/002.jpg';
//2.css样式属性
console.log(box.style); //获取的是一个对象，对象中存储的是元素的css样式属性
console.log(box.style.width);
console.log(box.style.height);
console.log(box.style.backgroundColor);
box.style.backgroundColor = 'purple';
</script>
</body>
</html>
1.3-表单元素常用属性
语法 作用
元素.value 获取文本
元素.disabled 获取禁用状态 （布尔类型）
元素.checked 获取选中状态（用于radio/checkbox）
元素.selected 获取选中状态(用于option)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
1.html中表单元素有一种独有的属性，这种属性表示表单元素的两种不同的状态
disabled : false:可用 true:禁用
2.在html中，写或者不写表示这两种状态。只要你没写,默认值就是false。写上了，值就是true
checked: true:选中 false：未选中 用于radio/checkbox
selected: true：选中 false：未选中 用于option
3.在js中，这类属性值是布尔类型。
-->
<input type="text" value="请输入用户名" id="username" disabled>
<div>
<input type="radio" value="男" name="sex" checked>男
<input type="radio" value="女" name="sex">女
</div>
<div>
<input type="checkbox" value="确定" name="confirm" checked>商品1
<input type="checkbox" value="取消" name="confirm">商品2
</div>
<div>
<select name="job" id="job" >
<option>前端</option>
<option>安卓</option>
<option>php</option>
<option>UI</option>
</select>
</div>
<script>
//1.获取元素
let sexList = document.querySelectorAll('[name="sex"]');
//2.获取元素选中状态
/* 非常重要的注意点
a. sexList是一个数组 [DOM对象1，DOM对象2]
b. 数组本身没有DOM对象属性
c. 数组中的每一个元素是一个DOM对象，所以需要通过下标先获取DOM对象
*/
console.log(sexList[0].checked);
//3.value:获取表单元素文本
let username = document.querySelector('#username');
/* 非常重要注意点
a. 获取普通元素文本：innerText
b. 获取表单元素文本: value
*/
console.log(username.innerText); //'' 空字符串
console.log(username.value); // 请输入用户名
</script>
</body>
</html>
1.4-元素属性操作注意点
注意点总结
- 只能获取到行内样式的属性值，无法得到行外(内联/外联)样式的属性值
2.获取的数据都是string字符串，带单位
3.既可以获取，也可以修改 （修改没有行内行外限制，可以修改任何属性）
```typescript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.one {
border: 10px solid yellow;
background-color: red;
}
.two {
margin: 50px;
}
</style>
</head>
<body>
<div id="box" class="one" style="width: 100px;height: 100px;">我是班长</div>
<p>我是pp</p>
<script>
/*学习目标：点语法操作元素样式的注意点
1.只能获取行内属性，无法获取行外属性
2.获取的数据都是string字符串，带单位
3.既可以获取，也可以修改
* 获取 ： 只能获取行内样式
* 修改 ： 可以修改任何样式
*/
//获取元素
let box = document.getElementById('box');
//1.只能获取行内属性，无法获取行外属性
console.log(box.style.width); //行内属性可以获取
console.log(box.style.backgroundColor); //行外 空字符串
//2.获取的数据都是string字符串，带单位
console.log(box.style.height); //100px
console.log(typeof (box.style.height)); //string
//3.既可以获取，也可以修改
//修改操作没有行内和行外限制，可以修改任何属性
box.style.width = '500px';
box.style.backgroundColor = 'greenyellow';
//4.修改类名也会修改元素样式
//修改类名也会修改元素样式（覆盖原先样式）
// box.className = 'two';
//如果不希望覆盖，而是添加新的类名样式，则可以使用字符串连接符拼接多个类名
box.className += ' two'; //注意多个类名之间的空格
</script>
</body>
</html>
04-事件介绍及注册事件
- 1.事件：js处理用户交互的一种机制
- 交互：什么元素在什么时刻做什么事
- 2.事件的三要素：组成事件的三要素
- 事件源：什么元素（div p）
- 事件类型：什么时刻（鼠标点击onclick 鼠标移入：onmouseover）
- 事件处理函数：做什么事（一段代码：函数）
- 3.注册事件:本质是给元素属性赋值
- 事件源.事件类型 = 事件处理函数
- box.onclick = function(){}
- 事件源.事件类型 = 事件处理函数
- 4.事件工作原理
- a.事件在注册的时候，不会执行（函数在声明的时候不会执行）
- b.一旦元素注册事件之后，当用户触发了这个事件的时候，浏览器会自动捕捉到这个事件，然后帮我们调用元素对象的事件处理函数
- 5.页面中 任何元素 都可以注册 很多个事件(点击，移入等)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background-color:red">我是mark</div>
<p id="p1">我是马云</p>
<script>
//需求：修改div颜色
//1.获取页面元素
let box = document.getElementById('box');
//2.操作元素属性
// box.style.backgroundColor = 'green';
/*
1.交互： 什么元素在什么时刻做什么事
2.事件： js处理用户交互的一种机制
3.事件三要素
(1)事件源：什么元素
(2)事件类型：什么时刻（onclick单击 ondblclick双击 onmouseover鼠标移入）
(3)事件处理函数：做什么事
3.注册事件:本质是对象赋值过程
事件源.事件类型 = 事件处理函数
4.事件工作原理
a.事件在注册的时候，不会执行（函数在声明的时候不会执行）
b.一旦元素注册事件之后，当用户触发了这个事件的时候，浏览器会自动捕捉到这个事件，然后帮我们调用元素对象的事件处理函数
*/
//鼠标单击
//1.注册鼠标单击事件：注册的时候事件处理函数不会执行
box.onclick = function () {
alert('你单击我了')
};
//2.当用户触发这个事件（单击）的时候，浏览器会捕捉到用户交互自动帮我们调用box对象的这个onclick方法
/* 注意
a.手动调用对象的事件处理函数也可以执行（一般不需要）
b.原因：浏览器会捕捉用户交互 自动帮我们调用这个函数
*/
//box.onclick();
//3.一些常用事件类型介绍
//鼠标移入
box.onmouseover = function () {
box.style.backgroundColor = 'green';
};
//鼠标移出 : 页面上一个元素可以注册多个事件
box.onmouseout = function () {
box.style.backgroundColor = 'pink';
};
//鼠标双击 ： 页面上每一个元素都可以注册事件
let p1 = document.getElementById('p1');
//dblclick:双击
p1.ondblclick = function () {
alert(6666);
};
</script>
</body>
</html>
05-网页案例
1.1-实际开发思路介绍
- 1.实际开发中，我们做某一个功能的时候，通常遵循以下分析思路
- （1）明确需求
- 我们代码的意义是完成需求，如果连需求是什么都不清楚，从何谈实现？
- （2）根据需求整理思路
- 明确需求之后，应该根据需求理清代码思路
- 磨刀不误砍柴工，如果敲代码想到一行写一行，思路很容易混乱，而且容易出现bug
- （3）根据思路敲代码
- 思路一旦清晰，敲代码就是一个代码熟练度问题，如果忘记了某个api，可以查阅资料或者以前的笔记
- （1）明确需求
- 2.如何来描述需求和整理思路
- 网页的交互需求，其实就是事件，通常都三个大步骤`点击了(事件类型)什么元素（事件源），发生了什么事（事件处理）
- 所以我们在整理思路的时候，应该从事件三要素触发
1.2-开关灯
效果预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="关灯" id="btn">
</body>
<script>
/*本小节知识点：1.一个按钮实现两种功能用法
*2.获取body元素的简洁方式：document.body
* 3.细节：双标签使用innerText获取文本 单标签使用value获取文本
*/
//1.获取元素
let btn = document.getElementById('btn');
//2.注册事件
btn.onclick = function () {
//如何获取body元素？
//（1）我们学习过的通过标签获取元素
//let body = document.getElementsByTagName('body')[0];
//(2)最常用的简洁方式：body标签本身具有唯一性，可以直接点语法获取
let body = document.body;
if(this.value == '关灯'){
body.style.background = 'black'; //修改body的背景颜色为黑色
this.value = '开灯';
} else{
body.style.background = ''; //body默认背景颜色就是白色，不设置默认就是白色
this.value = '关灯';
}
};
</script>
</html>
1.3-按钮禁用表单事件
效果预览
需求分析：
1.点击启用：设置所有的表单元素distabled属性false
2.点击禁用：设置所有的表单元素distabled属性true
思路分析：事件三要素
1 获取元素：
2 注册事件：
3 事件处理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text">
<br>
<input type="password">
<br>
<input type="radio">
<br>
<input type="checkbox">
<br>
<input type="button" value="表单按钮">
<hr>
<button id="qy">启用</button>
<button id="jy">禁用</button>
<script>
/*
1.分析需求(交互)：
1.点击启用按钮，设置每一个表单元素disabled属性为false
2.点击禁用按钮，设置每一个表单元素disabled属性为true
2.思路分析（事件三要素）
获取元素：事件源：
注册事件：事件类型
事件处理：
*/
//1.获取元素
let qy = document.querySelector('#qy');
let jy = document.querySelector('#jy');
let inputList = document.querySelectorAll('input');
//2.注册事件
//2.1 点击启用
qy.onclick = function () {
//3.事件处理:设置每一个表单元素disabled属性为false
for(let i = 0;i<inputList.length;i++){
inputList[i].disabled = false;
};
};
//2.2 点击禁用
jy.onclick = function () {
//3.事件处理:设置每一个表单元素disabled属性为true
for(let i = 0;i<inputList.length;i++){
inputList[i].disabled = true;
};
};
</script>
</body>
</html>
1.4-二维码显示和隐藏
效果预览
需求分析：
鼠标移入小盒子：显示大盒子，设置大盒子display属性为block
鼠标移出小盒子：隐藏大盒子，设置大盒子display属性为none
思路分析：事件三要素
1 获取元素：
2 注册事件：
3 事件处理：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#small {
width: 50px;
height: 50px;
background: url("images/bgs.png") no-repeat -159px -51px;
position: fixed;
top: 40%;
right: 10px;
}
#big {
width: 210px;
height: 210px;
position: absolute;
left: -210px;
display: none;
}
#big img {
width: 100%;
}
</style>
</head>
<body>
<div id="small">
<div id="big">
<img src="images/hmewm.jpg" alt="" />
</div>
</div>
<script>
/*
1.分析需求(交互)：
a.鼠标移入small盒子：显示大盒子：设置大盒子big的display为block
b.鼠标移出small盒子：隐藏大盒子：设置大盒子big的display为none
2.思路分析（事件三要素）
获取元素：事件源：
注册事件：事件类型
事件处理：
*/
//1.获取元素
let small = document.querySelector('#small');
let big = document.querySelector('#big');
//2.注册事件
//2.1 鼠标移入small
small.onmouseover = function () {
//3.事件处理:
big.style.display = 'block';
};
//2.2 鼠标移出small
small.onmouseout = function(){
//隐藏大盒子
big.style.display = 'none';
};
</script>
</body>
</html>
4654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
