前端
第四十二章
前后端怎么交互
浏览器发送一个请求到后端，后端处理逻辑，把结果（HTML文本）返回给浏览器。
前端
HTML 骨架 内容
css 样式
js 动态效果
HTML 超文本标记语言
标记 标签
分类
单边标记\双边标记
head
<meta> 编码 关键字 描述
<title>标题的内容</title>
link style script
body
内联(行内)标签
字体
加粗 b strong
斜体 i em
上下标 sup sub
中划线 下划线 del s u
<span></span>
<br>
<a href="链接" target="_blank" title >页面显示的内容</a>
href: 链接地址
锚点： #id
target：打开方式
_blank： 新建一个窗口
_self: 当前窗口
title: 鼠标悬浮上显示的标题
<img src="图片的地址" alt='' title width="20px" height="100%" >
src: 网络地址、本地地址（相对路径、绝对路径）
alt ： 链接地址有问题时提示的内容
title: 鼠标悬浮上显示的标题
width： 设置图片的宽度
height：设置图片的高度
width和height选择一个
特殊字符：
 : 空格
块级标签
h1 - h6
第四十三章
块级标签
排版标签
p:一个文本级别的段落标签 前后有间距
P标签中不嵌套其他的块级标签
div 没有任何样式的块级标签
hr 分割线
列表
无序列表
type="原点的样式"
<!-- 样式 disc（实心圆、默认）、 circle（空心圆）、none（无）、square（方点）-->
<ul >
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ul>
<ul type="none">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ul>
<ul type="circle">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ul>
<ul type="square">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ul>
有序列表
type="数字的样式" start =“起始值”（数字）
<!-- 样式 1（数字）、 a（小写字母）、A（大写）、I（罗马数字）-->
<ol>
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ol>
<ol type="1">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ol>
<ol type="a" start="25">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ol>
<ol type="A">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ol>
<ol type="I">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ol>
定义列表
dt 标题
dd 内容
<dl>
<dt>城市</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>深圳</dd>
<dt>城市</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>深圳</dd>
</dl>
表格
<!--有表头的表格-->
<!--tbale 嵌套 thead tbody
thead和tbody嵌套tr
tr嵌套 th td
-->
<!--tbale 属性
border 边框
cellpadding 元素和单元格的边距
cellspacing 单元格和边框的间距
-->
<!--tr 属性
align 内容的水平排列 left center right
valign 内容的垂直排列 top middle bottom
-->
<!--td 属性
rowspan 占几行
colspan 占几列
-->
<table border="1" cellpadding="20px" cellspacing="20px">
<thead>
<tr align="left">
<th> 序号</th>
<th> 姓名</th>
<th> 年龄</th>
</tr>
</thead>
<tbody>
<tr align="center" valign="bottom">
<td>1</td>
<td >alex</td>
<td >84</td>
</tr>
<tr align="center" valign="top">
<td>2</td>
<td >alex</td>
</tr>
<tr>
<td>2</td>
<td>wusir</td>
<td rowspan="2">2208</td>
</tr>
</tbody>
</table>
<!-- 无表头的表格-->
<table border="1" cellpadding="20px" cellspacing="20px">
<tbody>
<tr align="center" valign="bottom">
<td>1</td>
<td >alex</td>
<td >84</td>
</tr>
<tr align="center" valign="top">
<td>2</td>
<td >alex</td>
</tr>
<tr>
<td>2</td>
<td>wusir</td>
<td rowspan="2">2208</td>
</tr>
</tbody>
</table>
表单
<!-- form 标签
action： 提交的地址
-->
<!-- input 标签
type： 类型
text：普通文本
password：密码 密文
radio： 单选框
checkbox： 复选框
submit： 提交按钮
能提交数据 input有name属性 有value值
-->
<button>提交</button>
<!--
form表单中button和type=‘submit’的input的作用是一样的
-->
<form action="http://127.0.0.1:9999">
<input type="text" name="user" placeholder="请输入用户名"> <!--name:提交数据的key value:值 placeholder：占位的内容 -->
<input type="password" name="pwd" value="3714">
<input type="radio" name="sex" value="1"> 男
<input type="radio" name="sex" value="2" checked > 女 <!-- checked默认选中 -->
<input type="checkbox" name="hobby" value="1"> 跳
<input type="checkbox" name="hobby" value="2"> 唱
<input type="checkbox" name="hobby" value="3"> rap
<input type="checkbox" name="hobby" value="4"> 篮球
<input type="submit">
<button>提交</button
</form>
label
<!--给input标签定义id 给label标签的for填上id-->
<label for="i1">用户名：</label>
<input id="i1" type="text" name="user" placeholder="请输入用户名">
其他的input
<input type="hidden" name="alex" value="alexdsb"> <!-- 隐藏的input框 -->
<input type="reset"> <!-- 重置按钮 -->
<input type="button" value="提交"> <!-- 普通的按钮 -->
<button type="button">提交</button> <!-- 普通的按钮 -->
<input type="date"> <!-- 日期格式 -->
select option
<!--下拉框 单选 -->
<!--size 框的大小 -->
<select name="city" id="" size="4" >
<option value="1">北京</option>
<option value="2" selected >上海</option> <!-- selected默认选中 -->
<option value="3">深圳</option>
</select>
<!--下拉框 多选 -->
<!--size 框的大小 -->
<select name="city" id="" size="4" multiple>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
上传文件
<input type="file" name="f1">
<form enctype="multipart/form-data"> <!--编码指定为multipart/form-data-->
CSS
引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内联引入-->
<style>
div {
color: #ffef6b
}
</style>
<!--外联引入：链接 使用较多 -->
<link rel="stylesheet" href="index.css">
<!--外联引入：导入-->
<style>
@import url('index.css');
</style>
</head>
<body>
<!--行内引入-->
<div style="color: red">黄焖鸡米饭</div>
<div>黄焖鸡排骨</div>
</body>
</html>
简单的样式
color: #ffef6b; /*字体颜色*/
width: 200px; /*宽度*/
height: 200px; /*高度*/
background: blue; /*背景颜色*/
选择器
基本选择器
标签\id\类\通用选择器
<style>
div { 标签
color: #ffef6b;
}
a {
color: green;
}
span {
color: #42ff68;
}
#sp1 { id
color: chartreuse;
}
.cai { 类
color: #192aff;
}
.x1 {
background: #3bff00;
}
* {
background: #3bff00;
}
</style>
<body>
<!--<div >黄焖鸡米饭</div>-->
<!--<div>黄焖鸡排骨</div>-->
<div>黄焖鸡米饭
<span class="cai">鸡</span>
<span>米饭</span>
<a href="xxxx">外卖连接</a>
</div>
<div>黄焖鸡排骨
<span class="cai x1 x2">排骨</span>
<span>米饭</span>
</div>
<span id="sp1">米饭</span>
</body>
第四十四章
内容回顾
块级标签
排版标签
p div hr pre
p 前后有点空白
div 没有任何样式的块 span
hr 分割线 br 换行
pre 保留里面的空格
列表
ul ol dl
ul li
type: disc square circle none
ol li
type: 1 a A I i start: 2
dl dt dd
dt 标题
dd 内容
表格
table
thead:tr
th
tbody:tr
td
border 1 cellpading 内容和单元格的距离 cellspacing 单元格和边框的距离
rowspan 合并行 colspan 合并列
align 水平排列 left center right
valign 垂直排列 top middle bottom
表单
form action:提交的地址
input
type:text\password\radio\checkbox\submit\button\file\date\reset\hidden
name\value
text： placeholder 提示
readonly 只读 不能改值但是可以提交
disabled 禁用 不能改值 不可以提交
radio\checkbox : checked 选中
select ： name size=3 multiple（多选）
option ： value selected 选中
label
<label for="input的id">用户名</label> input：id
<textarea name="" cols="10" rows="30"></textarea>
文本框
注意：
1. 要提交数据 必须有一个input的类型为submit或者button
2. 上传文件 file ，改编码类型form：enctype="multipart/form-data"
CSS
引入的方式
行内引入
<div style="color: red"></div>
内联引入
<style>
div {
color: red;
}
</style>
外联引入 链接式
<link rel="stylesheet" href="home.css">
外联引入 导入式
<style>
@import url('home.css');
</style>
简单样式
color 字体颜色
width 宽度
height 高度
background-color 背景颜色
选择器
基本选择器
标签选择器 div p span a
id选择器 #id
类选择器 .类
通用选择器 *
高级选择器
后代\子代
后代
<style>
div span {
color: red;
}
</style>
</head>
<body>
<div>
<span>div下的span</span>
<p>
<span>p下的span</span>
</p>
</div>
<span>普遍的span</span>
子代
<style>
div>span {
color: red;
}
</style>
</head>
<body>
<div>
<span>div下的span</span>
<p>
<span >p下的span</span>
</p>
</div>
<span>普遍的span</span>
毗邻\弟弟
毗邻
<style>
p+a {
color: red;
}
</style>
</head>
<body>
<div>
<a>这是一个a0 </a>
<p>这是一个p </p>
<a >这是一个a1 </a>
<a >这是一个a2 </a>
<a>这是一个a3 </a>
</div>
弟弟
<style>
p~a {
color: red;
}
</style>
</head>
<body>
<!--<div>-->
<!-- <span>div下的span</span>-->
<!-- <p>-->
<!-- <span >p下的span</span>-->
<!-- </p>-->
<!--</div>-->
<!--<span>普遍的span</span>-->
<div>
<a>这是一个a0 </a>
<p>这是一个p </p>
<a>这是一个a1 </a>
<a>这是一个a2 </a>
<a>这是一个a3 </a>
</div>
属性
<style>
a[href] {
color: red;
}
a[href='www.taobao.com'] {
color: red;
}
</style>
</head>
<body>
<a href="www.taobao.com">xxxxx</a>
<a href="" >xxxxx</a>
<a href="">xxxxx</a>
<a >xxxxx</a>
并集、交集
<style>
a,p {
color: red;
}
</style>
</head>
<body>
<a>这是一个a0 </a>
<p>这是一个p </p>
<a>这是一个a1 </a>
<a>这是一个a2 </a>
<a>这是一个a3 </a>
交集
<style>
a.x1 {
color: red;
}
</style>
</head>
<body>
<a class="x1">这是一个a0 </a>
<p class="x1">这是一个p </p>
<a>这是一个a1 </a>
<a>这是一个a2 </a>
<a>这是一个a3 </a>
伪类
<style>
/*a {*/
/* color: red;*/
/*}*/
a:visited { ###点击过后的链接变色
color: green;
}
a:link { ###链接变色
color: gray;
}
a:active { ###悬浮变色
color: red;
}
</style>
</head>
<body>
<a href="http://www.xiaohuar.com">这是一个a1 </a>
<a href="">这是一个a0 </a>
伪元素
<style>
p:before {
content: 'p前';
color: red;
}
p:after {
content: 'p后';
color: red;
}
p:first-letter {
color: green;
}
</style>
</head>
<body>
<p>这是一个p</p>
今日内容
css选择器的优先级
行内样式>id选择器>类选择器>标签选择器>继承
1000 100 10 1 0
优先级可以累加，但是不进位
优先级相同时，后面的样式会应用
!important 提升选择器的优先级到最高
颜色的表示
rgb 三原色 红 绿 蓝
rab(255,255,255) 白色
rab(0,0,0) 黑色
16进制
#000000 - #ffffff
#000 - #fff
字母：green red
rgba(255,103,0,1);
a： 透明度 0-1 0 完全透明 1 完全不透明
字体
font-family: '华文楷体','微软雅黑 Light','宋体'; 字体
font-size:16px; 字体大小
font-weight:400; 字体的粗细
文本
text-align: right; 文本水平排列
text-decoration： 装饰线 underline下划线 line-through 删除线 overline 上划线
text-indent:2em; 文本缩进 em 相对长度单位 1em=当前字体的一个大小
line-height: 行高 调节文字上下居中 行高=块的高度
文本显示在一行超出部分显示为省略号
/*强制在一行内显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
/*显示省略符号来代表被修剪的文本*/
text-overflow: ellipsis;
背景图片
div {
/*background-color: red;*/ 背景颜色
/*background-image: url("1.png");*/ 背景图片
/*background-repeat: no-repeat;*/
图片的重复方式 no-repeat 不重复 repeat 重复 repeat-x x轴方向重复 repeat-y y轴方向重复
/*background-position:right bottom;*/
width: 900px;
height: 900px;
background: red url("1.png") no-repeat left center; 综合的写法
}
边框的设置
border: 2px;
border-color: black;
border-style: solid(实线); dashed（虚线） dotted（实心圆） double（双）
/* 4个 方向 上 右 下 左
2个 上下 左右
1个 所有方法
*/
4个方向单独设置
border-left:2px ;
border-left-color:yellow ;
border-left-style:solid ;
统一设置
border: #3bff00 2px solid;
块和行内解释和转换
行内元素不能设置宽高
块元素可以设置宽高
行内 ——》 块 display:block；
块 ——》 行内块 display:inline-block；
display: none; 不显示 并且不占位置
盒模型
padding 内边距
border 边框
margin 外边距
宽度 = width+2*padding + 2*border + 2*margin
塌陷的现象：上下的盒子外边距取最大外边距
第四十六章
内容回顾
css
overflow
溢出：
visible 可见
hidden 隐藏
auto 不超出时正常 超出了有滚动条
scroll 滚动条
浮动
float ： left right
浮动起来脱离文档流 不占位置
清除浮动：clear:both
伪元素清除法：
.clearfix {
content:'';
clear:both;
display:block;
}
overflow: hidden; 给父标签加
定位
position: relative absolute fixed
top
left
rigt
bottom
相对定位: 相对于原来的位置的定位 占用原来的位置
绝对定位： 相对于已经定位的父标签/html页面的位置的定位 不占原来的位置
固定定位： 相对于窗口的位置
z-index
显示层级的优先级
1. 数值越大越在上
2. 没有单位
3. 从父现象：父亲的z-index值小，自己的z-index值再大也没有用
4. 浮动的元素没有z-index
javascript
ECMAScript 标准化的规则 ES5 ES6
DOM
BOM
引入
方式一：
<script>
js代码
</script>
方式二：
xxxx.js
<script src='xxxx.js'></script>
js的标准
结束符 ;
注释 单行注释 //
多行注释 /* 多行 */
变量
变量名 数字 字母 下划线 $ 数字不能开头 区分大小写
定义一个变量 var
var a ; 声明变量 undefined
a= 1;
var a = 1;
输入输出
alert('弹出的窗口')
console.log（‘xxxx’）
var a = prompt('提示')
基本数据类型
number
var a = 1;
var b = 1.1;
typeof(a) number
NaN
string
var a = '单引号'
var a = "双引号"
a[0]
属性： a.length 长度
方法：
trim() 左右去空白
a.indexOf('a') 根据字符查找索引
a.concat('xxxxxx') 字符串的拼接
a.slice(0,3) 切片
a.split('',2) 分割 数字代表取前几个元素
a.toUpperCase() 变大写
a.toLowerCase() 变小写
boolean
true
false
null
定义一个空
undefined
声明了 但是没有定义
内置对象类型
Array 数组
var a = [1,2,3,4,5];
var a = new Array();
a[0] =1;
属性： length 长度
方法：
push 从后面插入
unshfit 从前面插入
pop 从后面删除 支持索引
shfit 从前面删除
a.concat('1','2') a.concat([1,2,3,4]) 拼接列表
a.slice(0,3) 切片
a.join(',') 拼接元素
a.sort() 排序
a.reverse() 翻转
a.splice(0,0,items) 删除的位置 删除的个数 替换的元素
自定义对象
var a = {}
var a = { name:'alex' }
取值 a['name']
赋值 a['age'] = 73
今日内容
数据类型的转换
字符串转数字
parseInt 字符串转整形
parseFloat 字符串转浮点型
Number(null) 0
Number(undefined) NaN
数字转字符串
String(111.1111)
var a = 11 var b = a.toString()
转布尔值
Boolean('')
true [] {}
false 0 ‘’ null undefined
运算符
赋值运算符
= += -= *= /=
算数运算符
+ - * / %
a++ ++a 自加1
比较运算符
> < >= <=
== !=
=== !==
// != NaN 值为true
字符串 + 数字 字符串
字符串 - 数字 = 数字
逻辑运算
或 与 非
与 1 && 2
或 false || true
非 !true
流程控制
条件 （）
代码块 {}
if
if (2>1){
console.log(1)
}
if (2 < 1) {
console.log(1)
} else {
console.log(2)
}
if (2 < 1) {
console.log(1)
} else if (2 > 1) {
console.log(3)
} else {
console.log(2)
}
case switch
var error_num = 1;
switch (error_num) {
case 1:
console.log(1);
break;
case 2:
console.log(2);
break;
default:
console.log('xxxx');
}
while
while(i<=9){ //判断循环条件
console.log(i);
i++; //更新循环条件
}
do - while 至少执行一次
do{
console.log(i)
i++;//更新循环条件
}while (i<10)
for
var a = [1,2]
for (i in a ){
// i 索引
// a[i]
}
for (var i=0;i<a.length;i++){
// a[i]
}
三元运算
var c = a>b ? a:b //如果a>b成立返回a，否则返回b
函数
python
def 函数名():
函数体
return 1
函数名()
js
function 函数名(参数){
函数体
return 返回值
}
arguments 伪数组 接受所有的参数
匿名函数
function (参数){
函数体
return 返回值
}
自执行函数
(函数)(参数，参数)
函数
函数（参数）
var c = (function (a,b){
console.log(arguments)
console.log(a,b)
return 1
})(1,2)
function add(a, b) {
console.log(arguments);
console.log(a, b);
return 1
}
add(1.2)
(function (a, b) {
console.log(arguments);
console.log(a, b);
return 1
})(1, 2)
正则表达式
var reg = RegExp('\\d')
var reg = /\d/
reg.test('sss1') 能匹配成功返回true 不能返回false
字符串中使用正则
var a = 'alex is a dsb'
var reg = /a/
a.match(reg) 从左到右匹配一次
a.match(/a/g) g 代表获取所有
a.match(/a/ig) i 忽略大小写
a.search(/a/) 获取索引值 只找一个 匹配到就是索引 匹配不到就是-1
a.replace(/a/ig,'123') 替换 ig替换所有并且忽略大小写
问题1：
var reg = /\d/g
reg.test('a1b2c3')
true
reg.test('a1b2c3')
true
reg.test('a1b2c3')
true
reg.test('a1b2c3')
false
问题2
var reg = /\d/
reg.test() #不写内容相当于写的undefined
第四十七章
内容回顾
js
引入
在HTML中写标签
<script>
js代码
</script>
引入文件
<script src='js文件' ></script>
// link href
变量
var 声明变量
数字 下划线 字母 $
不能数字开通 不能使用关键
基本的数据类型
number
1 1.222
string
'' ""
属性： length
方法：trim() charAt() indexOf() split() slice() concat()
boolean
true [] {}
false '' null undefined NaN
null 定义的空
undefined 未定义
内置的对象
Array
var a = [1,2,3,4,5]
var a = new Array()
a[1] // 2
a[1] = 3
属性： length
方法: push() pop() unshfit() shift() concat() join(',,') slice() sort() reverse()
splice(1,2,4,4,5,6,7)
自定义的对象
var a = { 'name':'alex','age':84 }
a['name'] // 'alex'
a['name'] ='alexdsb' // 'alex'
数据类型的转换
数字转字符串
num.toString()
String(num)
字符串转数字
parseInt(s) // NaN
parseFloat(s)
Number（s） // null _> 0 undefined NaN
转化成布尔值
Boolean()
运算符
赋值运算符
= += -+ *= /=
算数运算符
+ - * / % ++ --
var a = 1;
var b = a++ // b 1 a 2
var a = 1;
var b = ++a // b 2 a 2
比较运算
> < >= <=
== !=
=== !==
逻辑运算
或 || // or
与 && // and
非 ! // not
流程控制
if判断
if (条件){
// 条件满足时执行的代码
}
if (条件){
// 条件满足时执行的代码
}else {
// 条件不满足时执行的代码
}
if (条件){
// 条件满足时执行的代码
else if (条件){
// 条件满足时执行的代码
}
}else {
// 条件不满足时执行的代码
}
switch case
switch (值){
case 1 :
// 要执行的代码
break;
case 2 :
// 要执行的代码
break;
default:
// 值不匹配的时候执行的代码
}
while
while (条件) {
// 条件满足时执行的代码
}
do - while
do {
// 不管条件是佛满足先执行一次，如果满足条件继续执行的代码
}while (条件)
for
for ( i in arr ) {
// i 获取到索引
}
for (var i=0;i<arr.length;i++) {
// i 是自己声明的索引
// 执行完代码后 i自增
}
三元运算：
var a = 条件 ？ 条件成立时的值：条件不成立时的值
// a = 条件成立时的值 if 条件 else 条件不成立时的值
函数
function 函数名（参数）{
// 函数体
return 返回值 // [1,2,3,4]
}
函数名（参数）
匿名函数
function （参数）{
// 函数体
return 返回值 // [1,2,3,4]
}
自执行函数
（function 函数名（参数）{
// 函数体
return 返回值 // [1,2,3,4]
}）（参数，参数）
// argumenets 接受了所有的参数
正则表达式
var reg = RegExp('[0-9]')
var reg = RegExp('\\d')
var reg = /\d/
reg.test('字符串') // 判断字符中是否包含正则表达式的内容
字符串的正则的应用
var a ='alex is a big sb'
a.match(/a/) // a.match(/a/g) a.match(/a/gi) g查找所有 i忽略大小写
a.search(/a/) // 匹配元素的索引
a.replace(/a/,'777') // 替换掉匹配了的元素
问题1：
var reg = /\d/g
reg.test('a1b2c3')
true
reg.test('a1b2c3')
true
reg.test('a1b2c3')
true
reg.test('a1b2c3')
false
问题2：
var reg = /\w{5,10}/
undefined
reg.test() // 不写内容 就是'undefined'
true
今日内容
DOM
document object model 文档对象模型
查找元素
直接查找
document.getElementById('div1') // 通过ID查找 返回一个节点
document.getElementsByClassName('son') // 通过类名查找 返回一个对象 对象中包含多个节点
document.getElementsByTagName('div') /// 通过标签名查找
间接查找
节点.parentNode // 找到父节点
节点.children // 找子节点 多个节点
节点.firstElementChild // 找第一个子节点
节点.lastElementChild // 找最后一个子节点
节点.nextElementSibling //找下一个兄弟节点
节点.previousElementSibling //找上一个兄弟节点
节点的属性操作
节点.getAttribute('属性') //获取属性
节点.setAttribute('属性','值') //设置属性
节点.removeAttribute('属性') //删除属性
节点的文本操作
节点.innerText // 标签的文本内容
节点.innerHTML // 标签内部的HTML文本
节点.innerText='设置的文本' // 标签的文本内容
节点.innerHTML='设置HTML的文本' // 标签内部的html的文本
节点的值操作
// input select textarea
节点.value // 获取节点的值
节点.value = '值' // 设置节点的值
节点样式的操作
节点.style // 所有的样式 只有行内样式才能拿多
节点.style.样式名称
节点.style.样式名称 = '值' // 设置样式
节点类的操作
节点.classList // 节点所有的class
节点.classList.add（'类名'） // 给节点添加一个类
节点.classList.remove（'类名'） // 给节点删除一个类
节点的操作
document.createElement('标签的名字') // 创建一个标签节点 div a span
添加节点到文档中
父节点.appendChild(子节点) // 添加一个子节点到父节点的后面
父节点.insertBefore(新节点,父节点的子节点) // 添加一个子节点到父节中的指定子节点前
删除节点
父节点.removeChild(子节点) // 通过父节点删除子节点
替换节点
节点.replaceChild(新节点,节点的子节点)
复制节点
节点.cloneNode() // 不写数字或者0 只拷贝节点
节点.cloneNode(1) // 拷贝节点和它的子孙节点
事件
事件的绑定
// 方式一
<div onclick="alert('你点我了')">
事件示例
</div>
// 方式二
<div onclick="func()">
事件示例2
</div>
<script>
function func() {
alert('你点我了')
alert('你还点')
}
</script>
// 方式三
<div id="div1">
事件示例3
</div>
<script>
var div1 = document.getElementById('div1')
div1.onclick = function () {
alert('你点我了');
alert('你还点');
alert('你还点!!!');
}
</script>
事件的种类
| 属性 | 当以下情况发生时，出现此事件 |
|---|---|
| onblur | 元素失去焦点 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标点击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onerror | 当加载文档或图像时发生某个错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘的键被按下 |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或图像被完成加载 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseup | 某个鼠标按键被松开 |
| onreset | 重置按钮被点击 |
| onresize | 窗口或框架被调整尺寸 |
| onselect | 文本被选定 |
| onsubmit | 提交按钮被点击 |
滚动事件：
<script>
//实施监听滚动事件
window.onscroll = function () {
console.log(1111)
console.log('上' + document.documentElement.scrollTop)
console.log('左' + document.documentElement.scrollLeft)
console.log('宽' + document.documentElement.scrollWidth)
console.log('高' + document.documentElement.scrollHeight)
}
</script>
BOM
browser object model
窗口
打开新窗口
window.open(url,target)
关闭窗口
window.close() // 只能关闭用open打开的窗口
窗口的宽高
window.innerHeight 高度
window.innerWidth 宽度
定时器 **
定时器 **
// setTimeout 某段时间结束后触发执行
function func(){
alert('是否已满18岁')
}
setTimeout(func,2000)
// setInterval 设置时间间隔的定时器 每隔一段时间要触发执行函数
var ret= setInterval(func, 500); // 开启定时器
clearInterval(ret) // 关闭定时器
location **
location.href // 当前的地址
location.href = '地址' // 当前页面会跳转到新页面
第四十八章
内容回顾
DOM
dom树
整个HTML就是一个树 多个节点
节点含的内容：本身的内容 属性 关系
查找节点
直接查找
var 节点 = document.getElementById('id') //通过id查找 返回一个
var 节点 = document.getElementsByClassName('类型') // 通过类名查找 返回多个 按照索引拿一个
var 节点 = document.getElementsByTagName('div') //通过标签名查找 返回多个 按照索引拿一个
间接查找
节点.children // 多个子节点
节点.firstElementChild // 父节点下的第一个子节点
节点.lastElementChild // 父节点下的最一个子节点
节点.parentNode // 父节点
节点.nextElementSibling // 下一个兄弟节点
节点.previousElementSibling // 下一个兄弟节点
属性的操作
节点.getAttribute('属性名') // 获取属性
节点.setAttribute('属性名','属性值') // 设置属性
节点.removeAttribute('属性名') // 删除属性
文本的操作
节点.innerText // 节点中的内容
节点.innerText = '文本' // 节点中的内容 不识别标签
节点.innerHTML // 节点中的HTML文本
节点.innerHTML = '文本' // 节点中的HTML文本 识别标签
值的操作
input select textarea
节点.value // 获取节点的值
节点.value=‘值’ // 设置节点的值
样式的操作
节点.style.样式属性 // 获取样式的值 只能获取行内样式
节点.style.样式属性 = '值'// 设置样式的值
类的操作
节点.classList // 查找类的名称
节点.classList.add（'类名'） // 添加
节点.classList.remove（'类名'） // 删除
节点.classList.toggle（'类名'） // 转换 存在的时候删除，没有的时候添加
节点.classList.contains（'类名'） // 包含
节点的操作
document.createElement('标签名') // 创建标签节点
父节点.appendChild(子节点) // 添加节点到父节点后面
父节点.insertBefore(子节点，父节点中的子节点 ) // 添加节点到某个子节点的前面
父节点.removeChild（子节点） // 通过某个父节点删除子节点
父节点.replaceChild(新节点，替换的节点) // 替换节点
节点.cloneNode(值) // 复制节点 值0 只复制该节点 值1 复制所有的子孙节点
事件
绑定方式
<button id='b1' ><button/>
方式一：
<script>
var b1 = document.getElementById('b1')
b1.onclick = function (){
// 点击事件后要执行的代码
}
</script>
方式二：
<button id='b1' onclick='fn()'><button/>
<script>
function fn(){
// 点击事件后要执行的代码
}
</script>
常用的事件
onclick 鼠标单击
onfocus 获取焦点
onblur 失去焦点
onmouseover 鼠标悬浮
onmouseout 鼠标移出
onsubmit 提交表单触发
onslecet 下拉框选中
onchange 文本下拉框改变时
onkeyup 键松开
onload 文档图片加载完成
onscroll 滚动条滚动
BOM
窗口
window.open('url地址',打开方式)
window.close() // 只能关闭用open打开的窗口
定时器 **
// 每隔一段时间要执行一次操作
var 定时器的id = setInterval(函数，毫秒数) // 开启定时器 每隔一段时间执行函数
clearInterval（定时器的id） // 关闭定时器
// 一段时间后再执行一次操作
var 定时器的id = setTimeout(函数，毫秒数) // 开启定时器 时间到了再执行函数
clearTimeout（定时器的id） // 关闭定时器
location **
location.href // 当前的地址
location.href ='新的地址' // 跳转到新地址
location.reload() // 刷新页面
history
history.back() // 后退
history.forward() // 前进
history.go() // 0刷新 -1 后退 1 前进
今日内容
https://www.cnblogs.com/maple-shaw/articles/6972913.html
jQuery的优点：
- 浏览器的兼容性好
- 隐式循环
- 链式编程
Jquery对象和DOM对象的关系 、转换
Jquery对象内部封装了DOM对象、方法
DOM对象 ——》 Jquery对象
Jquery（DOM对象） $（DOM对象）
Jquery对象 ——》 DOM对象
Jquery对象[索引] $（DOM对象）[]
Jquery 和 $ 是一个东西
jQuery的选择器
基本选择器
id选择器 类选择器 标签选择器 通用选择器
$('#id')
$('.类名')
$('标签名')
$('*')
交集选择器
$('li.city#l1')
并集选择器
$('div,li,a')
层级选择器
后代选择器 空格 子代选择器 > 毗邻选择 + 弟弟选择器 ~
$('ul li') // 选择ul 下的所有li标签
$('ul>a') //选择ul 下的子代中的a标签
$('#l1+li') //选择id为l1的标签后的一个li标签
$('#l1~li') //选择id为l1的标签后的所有的li标签
属性选择器
$('[属性]')
$("标签[属性]") // 选择某个包含某个属性的标签
$('[属性=“值”]')
$('[属性$=“值”]') // 属性结尾为某个值的标签
$('[属性^=“值”]') // 属性开头为某个值的标签
$('[属性*=“值”]') // 属性包含某个值的标签
jQuery的筛选器
基本筛选器
$('选择器:筛选器')
$('选择器:first')
$('选择器:last')
eq(索引) 等于某索引的标签
gt(索引) 大于某索引的标签
lt(索引) 小于某索引的标签
odd 奇数
even 偶数
not(选择器) // 在当前的标签内排除某些标签
type筛选器
$(':text')
$(':radio')
$(':checkbox')
$(':password')
$(':submit')
$(':button')
$(':file')
注意： date 不支持
状态选择器
$(':disabled') // 禁用的标签
$(':enabled') // 可使用的标签
$(':checked') // radio、checkbox、select（option） 选中的标签
$(':selected') // select 选中的option标签
jQuery的筛选器方法
.children() // 子代
.parent() // 父代
.parents() // 父辈们
.parentsUntil('选择器') // 找父辈们，直达某个标签，且不包含该标签
.siblings() // 所有兄弟标签
.prev() // 上一个
.prevAll() // 前面所有的兄弟
.prevUntil() // 前面的兄弟到某个标签位置
.next() // 下一个
.nextAll() // 后面所有的兄弟
.nextUntil() // 后面的兄弟到某个标签位置
first()
last()
eq()
has() // $('li').has('a') 选择一个包含a标签的li标签
find() // $('li').find('a') 在li标签下找所有的a标签
not() // 在所有的标签内排除某些标签
filter() // 获取一些满足条件的标签 交集选择器
第四十九章
补充内容
-
循环多个元素时；
var ul_li = $('li') for (let i=0;i<ul_li.length;i++){ // let 声明的变量只在代码块中生效 console.log('li',ul_li[i]) } -
局部变量 全局变量
function f() { var b = 2; // 局部变量 let c =3; // 在当前代码块生效 d = 4; }
内容回顾
jquery
jquery是一个高度封装了js的库
jq 封装 dom对象\方法
$ == jQuery
引入方式
<script src="jquery.3.4.1.js"> </script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>
$('选择器') jQuery('选择器')
dom对象 —— 》 jq对象
$(dom对象)
jq对象 —— 》 dom对象
jq对象[index]
jquery选择器
$('选择器')
基本选择器
通用选择器 $('*')
标签选择器 $('div')
id选择器 $('#id')
类选择器 $('.类名')
交集选择器 $('div.类名') $('div#id')
并集选择器 $('div,.类名')
层级选择器
后代选择器 $('div p')
子代选择器 $('div>p')
毗邻选择器 $('div+p')
弟弟选择器 $('div~p')
属性选择器
$('[属性]')
$('[属性="值"]')
$('[属性!="值"]')
$('[属性$="值"]')
$('[属性^="值"]')
$('[属性*="值"]')
jquery筛选器
$('选择器:筛选器')
:first 第一个
:last 最后一个
:eq(index) 按照索引取
:gt(index) 索引大于index的对象
:lt(index) 索引小于index的对象
:odd 奇数
:even 偶数
:not(‘选择器’) 排除选择器的其他的对象 排除某些
:has（'选择器'） 获取一个包含子代对象的父对象
表单
:text password radio checkbox submit button file reset date(用不了)
:disabled enabled checked(radio\checkbox\select(option)) selected(option)
$(':checkbox:checked') // 选择已选中的checkbox
$(':selected')
jquery筛选器方法
子代: .children()
父亲： .parent（） .parents() .parentsUntil('选择器')
兄弟： siblings()
弟弟： next() nextAll() nextUntil('选择器')
哥哥： prev() prevAll() prevUntil('选择器')
first
last
eq
has 获取一个包含子代对象的父对象
not 排除选择器的其他的对象 排除某些
filter 交集选择器
find 找子代
今日内容
事件的绑定
<button>按钮1</button>
<button>按钮2</button>
<script>
$('button').click(function () {
alert('你点我干啥')
alert('点你咋地')
alert('再点一个试试')
})
</script>
jQuery对象的操作
文本的操作
.text() // 获取标签的内容
.text(内容) // 设置标签的内容
.html() // 获取标签的内容
.html(HTML标签文本) // 设置标签的内容
.html(DOM对象) // 设置标签的内容
.html(jq对象) // 设置标签的内容
标签的操作
添加 // js 父节点.appendChild(新的节点) 父节点.insertBefore(新的节点,参考节点)
父子关系：
添加到后面
a.append（b） 在a节点孩子中添加一个b
// a 父节点 b 新添加的子节点
// a 必须是jq对象 b （标签字符串、dom对象、jq对象 ）
a.appendTo(b) 把a节点添加到b的孩子中
// b 父节点 a 新添加的子节点
// a 必须是jq对象 b （选择器、dom对象、jq对象 ）
添加到前面
a.prepend(b) b.prependTo(a)
兄弟关系：
a.after(b) 在a的后面添加一个b b.insertAfter(a) 把b添加到a的后面
a.before(b) 在a的前面添加一个b b.insertBefore(a) 把b添加到a的前面
// 操作同一个对象时，操作多次，相当于是移动的效果。
删除 remove detach empty
remove // 删除标签并且删除事件 返回值是标签对象
detach // 删除标签，但是保留事件 返回值是标签对象
empty // 清空标签内容，但是保留标签本身
替换
a.replaceWith(b) // 用b替换a标签
a.replaceAll(b) // 用a替换所有的b (选择器、jq对象、dom对象)
拷贝
clone(false) // 只拷贝标签
clone(true) // 拷贝标签也拷贝事件
属性的操作
普通属性
.attr('属性') // 获取属性的值
.attr('属性','值') // 设置单个属性的值
.attr({'属性'：'值'，'属性2':'值'}) // 设置多个属性的值
removeAttr('属性') // 删除单一属性
值
input select textarea
val（） // 获取值
val（'值'） // 设置值
// radio checkbox select 是否选中使用prop 不建议使用attr
.prop('属性') // 获取属性的值
.prop('checked',true) // checked 变为选中状态
.prop('checked',false) // checked 变为未选中状态
类
addClass() // 添加类
removeClass() // 删除类
toggleClass() // 切换类
第五十章
内容回顾
文本操作
节点.text() // 获取标签文本
节点.text('文本内容') // 设置标签文本内容
节点.html('<a>xxxx</a>') // 设置标签html的内容 (dom对象、jq对象)
标签操作
增加
父子关系： 给父标签内部添加子标签
父标签.append（子标签） 子标签.appendTo（父标签） 添加到后面
父标签.prepend（子标签） 子标签.prependTo（父标签） 添加到前面
兄弟关系： 给兄弟前后添加兄弟标签
兄标签.after(弟标签) 弟标签.insertAfter（兄标签）
兄标签.before(弟标签) 弟标签.insertBefore（兄标签）
删除
remove 删除标签和事件 返回当前删除的标签
detach 删除标签 不删除事件 返回当前删除的标签
empty 清空内部的内容 保留当前的标签
替换
a.replaceWith(b) // 用b去替换a
b.replaceAll(a) // 用b去替换a
克隆
.clone() // 仅复制标签 0 false
.clone(true) // 复制标签和事件
属性操作
通用属性
.attr('属性') // 获取某个属性的值
.attr('属性'，‘值’) // 设置单个属性的值
.attr({'属性'：‘值’，'属性'：‘值’}) // 设置多个属性的值
.removeAttr('属性') // 删除某个属性
表单的值
input select textarea （value）
.val() // 获取标签的值
.val(‘值’) // 获取标签的值
$('#s1').val(['1','2']) // 设置select的多选的值
radio checkbox select // 查看是否选中
类
.addClass('类名') // classList.add()
.removeClass('类名') // classList.remove()
.toggleClass('类名') // classList.toggle() 切换 有就删除 没有就添加
css
.css（'css样式名'） // 获取对应样式的值
.css（'css样式名','值'） // 设置对应样式的值
.css（{'css样式名':'值','css样式名2':'值'}） // 设置对应样式的值
盒子模型
width() // 内容的宽
height() // 内容的高
innerHeight() // 内容 + 内边距 高
innerWidth() // 内容 + 内边距 宽
outerWidth() // 内容 + 内边距 + 边框 宽
outerHeight() // 内容 + 内边距 + 边框 高
outerHeight(true) // 内容 + 内边距 + 边框 + 外边距 高
outerWidth(true) // 内容 + 内边距 + 边框 + 外边距 宽
设置宽高的时候 只是设置内容的宽高
今日内容
动画
滑动系列
slideDown 向下划入
slideUp 向上划出
slideToggle 切换
slideDown（毫秒数，回调函数）
显示系列
show hide toggle
渐入渐出
fadeIn 渐入
fadeOut 渐出
fadeToggle 切换
stop() 停止之前的动画
事件
绑定事件
// bind
$('button').bind('click',{'a':'bb'},fn); // 事件类型 参数 函数
function fn(e) { // e 事件的对象
console.log(e);
console.log(e.data); // 传的参数
// alert(123)
}
$('button').bind('click',fn);
function fn(e) {
console.log(e);
}
// 事件
$('button').click({'a': 'b'}, fn) // 参数 函数
function fn(e) {
console.log(e.data);
}
$('button').click( fn)
function fn(e) {
console.log(e.data);
}
解除事件
$('button').unbind('click')
常用的事件
click(function(){...}) // 点击事件
focus(function(){...}) // 获取焦点
blur(function(){...}) // 失去焦点
change(function(){...}) //内容发生变化，input（鼠标移出），select等
keyup(function(){...})
mouseover/mouseout
mouseenter/mouseleave = hover(function(){...})
文档的加载
js
window.onload = function () { // 页面 图片 视频 音频 都加载好执行
$('#b1').click(
function () {
$('.mask').show()
}
);
}
// window.onload 只执行一次 多次的划 后面的覆盖前面的
jquery
$(window).ready(function () { // 页面 图片 视频 音频 都加载好执行
$('#b1').click(
function () {
$('.mask').show()
}
);
})
// $(window).ready() 可执行多次 不会覆盖
$(document).ready(function () { // 页面 都加载好执行
$('#b1').click(
function () {
$('.mask').show()
}
);
})
})
// 简写
$(
function () { // 页面 都加载好执行
$('#b1').click(
function () {
$('.mask').show()
}
);
)
each
$('li').each(function (i,dom) {
console.log(i,dom)
console.log(i,dom.innerText)
})
作业：
- 小米购物车
- input框单独校验（不能为空）手机号
- 模态框
第五十一章
内容回顾
前端
HTML
css
js
js /jquery $ == jQuery
jquery封装js的一个库
dom对象 jQuery对象
dom _> jq $(dom对象)
jq _> dom jq对象【index】
js 操作标签 标签的属性 文本 事件
document.getEmelentById
document.getEmelentsByClassName
document.getEmelentsByTagName
document.createEmelent
添加 删除 替换 克隆
getAttribute()
setAttribute()
removeAttribute()
节点.innerText
节点.innerText =
节点.innerHTML
节点.innerHTML =
节点.onclick = fn
windows.onload = fn // 页面 视频 图片 音频
body.onload = fn // 页面
jq
$('选择器：筛选器').筛选器方法()
# . * div div.s1 div,span
div p
div>p
div+p
div~p
[href] "[href='xxx']" "[href!='xxx']" "[href$='xxx']" "[href^='xxx']" "[href*='xxx']"
:first
:last
:eq(index)
:has(选择器)
:not(选择器)
first（）
last（）
parent() children()
siblings()
prev() next()
has() not()
文本
text() html()
属性
attr('属性')
值
val（）
属性
prop（‘selected’） prop（‘checked’）
事件
jq.bind('事件名'，参数，函数)
函数名（e）{
e.data // 插入的参数
}
jq.事件名(参数，函数)
函数名（e）{
e.data // 插入的参数
}
jq.unbind('事件名')
常用的事件
click
focus blur
change
mouseenter mouseleave hover
mouseover mouseout
动画
show hide toggle
slideDown(时间，函数) slideUp() slideToggle()
fadeIn fadeOut fadeToggle
stop() 停止动画
事件冒泡
触发子代的事件，父辈的事件也依次执行。
阻止事件冒泡：
return false
e.stopPropagation()
事件委托
利用事件冒泡的原理，将子代的事件委托给父代执行。
$('tbody').on('click','button',function () {
console.log(this)
})
bootstrap
浙公网安备 33010602011771号