目录
- 前端
- CSS
- 盒子模型
- 浮动布局
- 溢出属性
- 定位
- JavaScript
- jQuery
前端
一、前端与后端的概念
前端：与用户直接打交道的操作界面都可以称之为前端
后端：不直接与用户打交道的内部真正执行核心业务逻辑的代码程序（幕后工作者）
二、前端的核心基础
1.HTML：网页的骨架
2.CSS：网页的样式
3.JS：网页的动态
三、超文本传输协议
1.四大特性
| 四大特性 |
|---|
| 基于请求响应 |
| 基于TCP/IP之上，作用于应用层的协议 |
| 无状态 |
| 无/短连接 |
2.数据格式
请求数据格式：
1.请求首行（请求方式：有很多种 协议名及版本名）
2.请求头（一大堆K:V键值对）
3.换行
4.请求体（携带一些敏感数据，不是所有请求都有请求体）
响应数据格式：
1.响应首行（响应状态码）
2.响应头（一大堆K:V键值对）
3.换行
4.响应体（一般情况下就是浏览器要展示给用户看的数据）
3.响应状态码
利用数字来表示一些复杂的情况说明（类似于暗号）
1XX:服务端已经收到你的请求正在处理，你可以继续提交或者等待
2XX:200 OK服务器给出了响应
3XX:重定向
4XX:
403 请求不符合条件
404 请求资源不存在
5XX:服务端内部错误
'''
在公司还会自己定义更多的状态码
一般情况下从10000开始
'''
四、HTML
1.简介
超文本标记语言是所有浏览器展示的页面必备的
浏览器站直的页面我们也称之为HTML页面
存储HTML语言的文件后缀名一般是 .html
HTML没有任何逻辑，所见即所得
2.语法
HTML代码不讲究缩进，但是为了美观和可读性，建议缩进
1.注释语法
<!--注释内容-->
2.文件格式
<html> 所有的代码都必须写在html标签内部
<head>
一般是不展示给用户看的
</head>
<body>
浏览器展示给用户看的内容
</body>
</html>
3.标签分类
单标签（自闭合标签）:<img/>
双标签:<a></a>
3.head内常见标签
| 标签 | 说明 |
|---|---|
| title | 控制标签页小标题 |
| style | 内部支持编写css |
| link | 引入外部的css文件 |
| script | 内部支持写js代码，还可以通过src属性引入外部JS文件 |
| meta | 通过内部属性的不同可以有很多功能 |
<meta name="kewords" content="填写一些关键字提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">
4.body内部标签
注意：有很多样式，可能存在多种标签可以实现
| 标签 | 说明 |
|---|---|
| h1~h6 | 一到六级标签 |
| p | 段落标签 |
| hr | 水平分割线 |
| br | 换行符 |
| u | 下划线 |
| i | 斜体 |
| s | 删除线 |
| b | 加粗 |
5.块级标签和行内标签
块级标签：h1~h6/p/jr/br
一个标签独占一行
行内标签：u/i/s/b
内部文件有多大，自身就占多大
6.body内基本符号
| 符号 | 说明 |
|---|---|
|  ； | 空格 |
| >； | 大于号 |
| <； | 小于号 |
| &； | & |
| ¥； | ￥ |
| ®； | 注册 |
| ©； | 版权 |
7.body内布局标签
a标签
链接标签：href
可以填网址，点击跳转
href还可以填写其他标签的id值
实现锚点功能：target
可以控制是否新建页面跳转
_self
_blank
img标签
图片标签
scr 填写图片的地址（网络地址/本地地址）
title 鼠标悬浮在图片上会有提示信息
alt 图片加载失败的提示信息
height 调整图片高度
width 调整图片宽度
# 高度和宽度只调整一个是等比例缩放
8.标签两大重要属性
用来快速定位需要操作的标签
id属性（一对一管理）
类似于身份证号码，在同一个html页面上，id值不能重复
class 属性（批量管理）
类似于分组，多个标签可以拥有相同的class值
9.列表标签
<!--无序列表-->
页面上
<ul>
<li></li>
<li></li>
</ul>
<!--有序列表-->
<ol type="I" strat="10">
<li></li>
<li></li>
</ol>
<!--标题列表-->
<d1>
<dt>标题一</dt>
<dd>内容1</dd>
<dt>标题二</dt>
<dd>内容2</dd>
</d1>
10.表格标签
<table>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
</table>
五、表单标签
1.简介
能够获取用户输入（输入、选择、上传）的数据并发送给后端服务器
2.input标签
<form action="" method="post">
action属性：用于控制数据的提交地址，不写就是朝当前页面所在的地址提交
method属性：用于控制请求的方式（get/post）
</form>
文本框：<input type="text">
密码：<input type="password">
选项：<input type="radio">
选项：<input type="radio">
日期：<input type="date">
邮箱：<input type="email">
提交：<input type="submit">
重置：<input type="reset">
按钮：<input type="button">
<form action="" method="post">
<!--action属性：用于控制数据的提交地址，不写的话就是朝当前页面所在的地址提交-->
<!--method属性：用于控制请求的方式（get/post）-->
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
<p>birthday:<input type="date"></p>
<p>email:<input type="email"></p>
<p>gender:
<input type="radio" name="gender">male
<input type="radio" name="gender">female
<input type="radio" name="gender">other
</p>
<p>hobby:
<input type="checkbox" name="hobby">basketball
<input type="checkbox" name="hobby">football
<input type="checkbox" name="hobby">dance
</p>
<p>file:
<input type="file">
</p>
<p>files:
<input type="file" multiple>
</p>
<p>province:
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
<option value="">深圳</option>
</select>
</p>
<p>GF:
<select name="" id="" multiple>
<option value="">小敏</option>
<option value="">小蓝</option>
<option value="">小红</option>
<option value="">小黄</option>
</select>
</p>
<p>
<input type="submit" value="用户注册">
<input type="reset" value="重置按钮">
<input type="botton" value="普通按钮">
</p>
</form>
3.获取用户输入的标签两大重要属性
form表单在朝后端发送数据的时候，标签必须要有name，否则不会发送该标签的值
name属性：类似于字典的键
value属性：类似于字典的值
4.input标签也可以添加背景提示
<input type="text" name="username" placeholder="用户名">
5.input如果是想让用户选择，需要自己写value
<input type="radio" name="gender" value="male">nan
6.针对radio和checkbox可以默认选中
checked="checked"
如果属性名和属性值相对，那么可以简写成：checked
7.针对option标签也可以默认选中
selected="selected" 简写为：selected
CSS
一、层叠样式表
1.作用
调整标签样式
2.语法结构
选择器 {
属性名：属性值；
属性名2：属性值2；
}
3.注释语法
/*注释内容*/
4.三种编写css的方法
1.headstyle标签内部直接编写
<head>
<meta charset="UTF-8">
<title></title>
<style>
p {
color:red;
}
</style>
</head>
二、基本选择器
1.标签选择器：直接通过标签名来查找标签
div {
color:green;
/*查找所有的div标签，将其内部的文本颜色变为绿色*/
}
2.类选择器：通过编写class的值来查找标签
.c1 {
color:red;
/*查找所有class属性中含有c1的标签，并将其内部的文本颜色变为红色*/
}
3.ID选择器：通过编写id的值来精确查找标签
#d1 {
color:aquamarine;
/*查找id的值是d1的标签，并将其内部的文本颜色改为天青色*/
}
4.通用选择器：查找所有标签
* {
color:blue;
/*查找所有的标签，并将其内部的文本颜色改为蓝色*/
}
三、标签之间的关系
<p1></p1>
<div id="d1"> /*父标签*/
<p2> /*子标签*/
<span>span1</span>
</p2>
</div>
<p></p>
1.<div>是<p1>的弟弟
2.<p2>是<div>的儿子
3.<p2>和<span>都属于<div>的后代
四、组合选择器
1.后代选择器
两个选择器之间空格隔开，查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签
/*查找div标签内部所有的后代span*/
#d1 span {
color:green;
}
<div id="d1">
<p>
abcd
<span>ooooooo</span>
<span>12314</span>
</p>
</div>
2.儿子选择器
两个选择器之间大于号隔开，查找前面选择器获取到的标签内部第一层级符合大于号后面的选择器要求的标签
/*选择所有父级是<div>元素的<p>元素*/
#d1>p {
color: blueviolet;
}
<div id="d1">
<p>
abcd
</p>
<p>
qqqqqqq
</p>
<span>12323</span>
</div>
3.毗邻选择器
两个选择器之间用+隔开，查找前面选择器同级别下面紧挨着的符合后面选择器要求的标签
/*查找div标签同级别下面紧挨着的span标签（紧挨着的的弟弟）*/
#d1+span {
color: blue;
}
<div id="d1">
<p>
abcd
</p>
<p>
qqqqqqq
</p>
<span>12323</span>
</div>
<span>毗邻选择器</span>
<span>不毗邻</span>
4.弟弟选择器
两个选择器用~隔开，查找前面选择器同级别下的所有符合第二个选择器要求的标签
/*查找div标签同级别下面所有的span标签（弟弟们）*/
#d1~span {
color: pink;
}
<div id="d1">
<p>
abcd
</p>
<p>
qqqqqqq
</p>
<span>12323</span>
</div>
<span>dd1</span>
<span>dd2</span>
<span>dd3</span>
五、属性选择器
1.所有的标签除了有自己默认的属性之外，还可以拥有自定义的任意属性
默认属性：id class
自定义属性：x=1 y=2
2.查找属性名含义name的标签
[name] {
background-color:red;
}
2.查找属性名含有name且值值username的标签
[name='username'] {
background-color:orange;
}
3.查找input标签并且，属性名含有name值是username的标签
input[name='username'] {
background-color:aqua;
}
# 前面的选择器可以是任意类型的 标签、id、class
六、选择器之分组与嵌套
当多个选择器查找到的标签需要调整相同的样式，那么可以合并
div,p,span{
color:red;
}
并且合并的选择器彼此不干扰也没有类型的限制
#d1,.c1,span{
color:red;
}
还可以在选择器基础之上添加额外的选择是的查找更精确
span.c1
div#d1
七、伪类选择器
'''
补充知识：
a标签默认的颜色有两种，蓝色跟紫色
蓝色：链接地址从来没有点击过
紫色：链接地址曾经有被点击过
'''
a.hover {
color:blue;
}
鼠标悬浮上去之后样式改变，适用于所有含有文本的标签
八、伪元素选择器
通过css代码来操作标签的文本内容
p:first-letter{
font-size: 48px;
color: pink;
}
p:before{
content: "学习需要毅力";
color: lightgreen;
}
p:after{
content: "学习无止尽";
color: aquamarine;
}
九、选择器优先级
当多个选择器查找到相同的标签修改不同的样式，那么标签应该执行哪个呢？
1.选择器相同，引入位置不同
就近原则
2.选择不同
行内>id选择器>类选择器>标签选择器
十、字体样式
width：为元素设置宽度
height：为元素设置高度
块级标签才能设置宽度，行内标签的宽度由内容来决定
# 设置字体
body {
font-family:微软雅黑;
}
# 设置字体大小
p {
font-size: 16px;
}
p {
font-weight: lighter; # 细
font-weight: bolder; # 加粗
}
# 设置文本颜色的四种方法
p{
color: red;
color: rgba(255, 0, 0, 0.19);
color: #af6060;
color: rgb();
}
# 元素位置
p {
text-align: center;
}
a{
text-decoration: none;
}
p {
text-indent: 32px;
}
背景属性：background
边框属性：border、border-raduis
dispaly属性：display：none;
盒子模型
一、介绍
所有标签都可以看做是一个快递盒
二、各个部分
1.两个快递盒之间的距离 标签与标签的距离
margin 外边距
2.快递盒的厚度 标签的边框
border 边框
3.物品和快递盒内壁的距离 内部文本和边框的距离
padding 内边距
4.物品自身的大小 标签内部的内容
content 内容
三、需要掌握的操作
margin-top: 20px; # 上边距
margin-left: 20px; # 左边距
margin-right: 20px; # 右边距
margin-bottom: 20px; # 下边距
body标签自带8px的外边距
margin: 0; # 作用于上下左右取消边距
margin: 10px 20px; # 上下、左右
margin: 10px 20px 30px; # 上、左右、下
margin: 10px 20px 30px 40px; # 上、右、下、左
margin让标签居中（仅限水平方向）
margin: auto
# padding 使用方式和margin一致
浮动布局
一、介绍
float:left/right 是页面布局必不可少的的操作
二、缺点
浮动会造成父标签的坍塌，容易引起歧义
三、解决坍塌问题
.clearfix:after{
content:'';
display:block;
clear:both;
}
# 提前写好上述标签，遇到标签坍塌就添加clearfix类
# 浏览器针对文本会优先展示，不会被浮动遮挡
溢出属性
一、各种状态
visible: 默认值，内容不会被修剪，超出范围的部分会呈现在元素框之外
hidden:内容会被修剪，超出范围的部分会被遮挡
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto:如果内容被修剪，浏览器会显示滚动条以便查看其余内容
insert:规定应该从父元素继承 overflow属性的值
.div {
height: 150px;
width: 150px;
border: 3px solid lightblue;
border-radius: 50%;
overflow: hidden;
}
.div img {
max-width: 100%;
}
定位
一、四种状态
static（静态）
所有标签默认都是不能直接通过定位修改位置，必须要切换成下面三种之一
relative（相对定位）
相对于标签原来的位置做定位
absolute（绝对定位）
基于已经定位过的父标签做定位（如果没有父标签，则以body为参照）
fixed（固定定位）
相对于浏览器窗口做定位
二、z-index
1.前提：
浏览器界面实际上是一个三维坐标系，z轴指向用户
div {
z-index:999;
}
2.设置对象的层叠顺序
- z-index值表示谁压着谁，数值大的盖住数值小的
- 只有定位了的元素，才有z-index,浮动元素不能使用
- z-index值没有单位，默认z-index的值为0
- 从父现象
JavaScript
一、简介
1.跟Java没有关系
单纯是因为当时Java比较火，蹭热度
2.JavaScript和ECMAScript的区别
Netscape公司在刚开始想要JavaScript成为国际标准，为了保持这门语言的中立性和开发性，国际标准化组织ECMA将其取名为ECMAScrip发布，后因Netscape公司倒闭，又改回了JavaScript
3.版本迭代
| 年份 | 名称 | 描述 |
|---|---|---|
| 1997 | ECMAScript 1 | 第一个版本 |
| 1998 | ECMAScript 2 | 版本变更 |
| 1999 | ECMAScript 3 | 添加正则表达式 添加try、catch |
| ECMAScript 4 | 没有发布 | |
| 2009 | ECMAScript 5 | 添加“strict mode”严格模式 添加JSON支持 |
| 2011 | ECMAScript 5.1 | 版本变更 |
| 2015 | ECMAScript 6 | 添加类和模块 |
| 2016 | ECMAScript 7 | 增加指数运算符（**） 增加Array.prototype.includes |
4.JavaScript是一门编程语言
NodeJS：逻辑比较差，能做到简单的功能
5.html页面两种引入js的方式
5.1.script标签里写代码
<script>
/*js代码*/
</script>
5.2.引入额外的js文件
<script scr="myscript.js"></script>
6.注释语法
//
/**/
7.建议结束符是：分号 ;
不写；也可以执行，但是为了标志结束建议写上结束符；
二、变量与常量
1.小知识
支持编写js代码的地方:
1.pycharm
2.浏览器页面右键点检查，console里
2.在js中声明变量和常量都需要使用关键字
js中的变量名建议使用驼峰体
var:全局有效
let:如果在局部名称空间中使用，只在局部名称空间有效
const：定义常量
js也是动态类型：变量名绑定的数据值类型不固定
var name = 'zhang'
name = 123
name = [11,22,33,44]
3.常用方法
| 方法 | 说明 |
|---|---|
| .length | 求字符串长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左侧空白 |
| .trimRight() | 移除右侧空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value,...) | 拼接 |
| .indexOF(subtring,start) | 子序列位置 |
| .substring(start,end) | 根据索引获取子序列 |
| .slice(start,end) | 切片 |
| .toUpperCase() | 小写 |
| .toLowerCase() | 大写 |
| .split() | 分割 |
三、js数据类型之数值类型
1.js中查看数据类型：typeof
2.在js中整数型、浮点型统称为数值类型：number
parseInt() # 设定为整数
parseFloat() # 设定为小数
四、js数据类型之字符串类型
字符串：string
var name = 'zhang'
var name = "zhang"
var name = `zhang` # 模板字符串
内置方法：js中涉及字符串拼接，推荐使用加号+
五、JS数据类型之布尔值
python中：bool
True
False:0/None/''/[]/{}/()
JS中：boolean
true
false:(空字符串)/0/null/undeffined/NaN
null与undefined的区别
null：可以理解值为空的变量
undefined：可以理解为变量不存在
六、JS数据类型之对象(object)
1.对象之数组（相当于python中的列表）
使用单独的变量名来存储一系列的值。
'''在JS中也是一切皆对象'''
let l1 = [1,2,3,'sss']
2.方法
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start,end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val,...) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice(index(起始索引位置),howmany（删除数量）,items（添加的新元素）) | 删除元素，并向数组添加新元素 |
| .map | 返回一个数组元素调用函数处理后的值的新数组 |
2.1.forEach
forEach(function(currentValue, index, arr), thisValue)
| 参数 | 说明 |
|---|---|
| function（currrentValue（必需，当前元素），index（元素的索引值），arr（元素所属数组）） | 必需。数组中每个元素需要调用的函数 |
| thisValue | 可选。传递给函数的值一般用‘this’值 如果这个参数为空，‘undefined’会传递给‘this’值 |
2.2.map
map(function(currentValue,index,arr), thisValue)
| 参数 | 说明 |
|---|---|
| function（currrentValue（必需，当前元素），index（元素的索引值），arr（元素所属数组）） | 必需。数组中每个元素需要调用的函数 |
| thisValue | 可选。传递给函数的值一般用‘this’值 如果这个参数为空，‘undefined’会传递给‘this’值 |
七、JS数据类型之自定义对象（object）
1.自定义对象（相当于python中的字典）
定义方式1：
let d1 = {'name':'zhang','pwd':123}
定义方式2：
let d2 = new Object()
自定义对象操作数据值的方式更简单，直接使用句点符
'''python中让字典也可以通过句点符操作字典的数据值'''
class MyDict(dict):
def __getattr__(self, item):
return self.get(item)
def __setattr__(self, key, value):
self[key] = value
d1 = MyDict()
d1.name = 'jason'
print(d1)
d1.name = 'zhang'
print(d1)
# {'name': 'jason'}
# {'name': 'zhang'}
八、运算符
var x=10;
var res1=x++; # 先赋值后自增
var res2=++x; # 先自增后赋值
| 运算符 | 作用 |
|---|---|
| == | 弱等于（自动转换成相同的数据类型，再比较） |
| === | 强等于（不自动转换数据类型） |
| && | 等价于python的 and |
| || | 等价于python的 or |
| ！ | 等价于python的 not |
九、流程控制
1.分支结构
1.单if分支：
if(条件){条件成立后执行的代码}
2.if...else分支：
if(条件){
条件成立执行的代码
}else{
条件不成立执行的代码
}
3.if...else if ...else分支：
if(条件一){
条件一成立后执行的代码
}else if(条件二){
条件二成立后执行的代码
}else{
所有条件不成立后执行的代码
}
'''
day = new Date().getDay()
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
case 4:
console.log("Turseday");
break
default:
console.log("不在范围内")
}
'''
2.循环结构
for(let i=1;i<101;i++){
console.log(i)
}
# for循环小练习
打印数组内所有的数据值
for(let i=0,i<l1.lenth;i++){
console.log(l1[i])
}
while(条件){
循环体代码
}
# while循环小练习
let l1 = [456,33,110,11,22]
let num=0;
while(num<l1.length){
console.log(l1[num]);
num++;
}
十、函数
1.格式
'''
在python中：
def 函数名(形参):
函数体代码
return 返回值
'''
function 函数名(形参){
函数体代码
return 返回值
}
function func1(a,b){
console.log(a,b)
}
func1()
# undefined undefined
参数的个数不需要一一对应，也能调用函数。
如果要限制参数个数，需要使用内置关键字arguments做判断
（arguments会接收参数）
function func1(a,b){
if (arguments.length===2){
console.log(a,b)
}
else{
console.log("没有给参数！！")
}
}
2.匿名函数
1.在python中：
格式：lambda 形参：返回值（返回表达式运行后的结果）
构建的是一个函数对象，需要用一个变量名去接收返回值
匿名函数通常配合其他函数一起使用，用于减少代码
res = (lambda x: x + 100)
print(res(100)) # 200
2.JS中：
fuction(形参){
函数体代码
return 返回值
}
function(a,b){
return a+b
}
# 如果要调用匿名函数需要给一个变量名
res = function(a,b){
return a+b
}
3.箭头函数
var f = function(v){
return v;
}
等同于：var f = v =>v;
# 如果不需要参数，用()代替参数的位置
var f=()=5;
等同于：
function f(){return 5;}
var sum=(a,b)=>a+b
等同于：
function sum(a,b){
return a+b;
# 这里的return只能返回一个值，如果要返回多个值，需要手动包一个数组或对象
}
function sum1(a,b){
kk=a+b;
cc=a*b;
l1 = [kk,cc] # 包成数组
return l1;
}
十一、JS内置对象
1.描述
类似于python中的内置函数或者内置模块
2.固定语法
var 变量 = new 内置对象名();
3.内置对象
3.1.Date日期对象
var d1 = new Date();
console.log(d1.toLocaleString())
#VM227:1 2022/8/25 21:03:31
var d2 = new Date("2001/1/1 11:20")
console.log(d2.toLocaleString())
#VM465:1 2001/1/1 11:20:00
var d3 = new Date("04/03/02 11:20")
console.log(d3.toLocaleString())
#VM664:1 2002/4/3 11:20:00
var d4=new Date(5000)
console.log(d4.toLocaleString())
#VM844:1 1970/1/1 08:00:05
console.log(d4.toUTCString())
# VM939:1 Thu, 01 Jan 1970 00:00:05 GMT
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());
# VM1159:2 2004/3/20 11:12:00
date对象方法
| 方法 | 说明 |
|---|---|
| getDate() | 获取日 |
| getDay() | 获取星期 |
| getMonth() | 获取月（0-11） |
| getFullYear() | 获取完整年份 |
| getYear() | 获取年 |
| getHours() | 获取小时 |
| getMinutes() | 获取分钟 |
| getSeconds() | 获取秒钟 |
| getMilliseconds() | 获取毫秒 |
| getTime | 返回累计毫秒数（从1970/1/1午夜） |
3.2.JSON序列化对象
python中的序列化：
import json
json.dumps()
json.lodas()
JS中的序列化：
JSON.stringify()
JSON.parse()
3.3.RegExp正则对象
表达方式
var reg1 = new RegExp("^[a-zA-z0-9]")
var reg2 = /^[a-zA-z0-9]{3,6}$/
校验数据
reg1.test('zhang888')
# true
reg2.test('zhang888')
# false
'''
注意事项1：正则表达式不能有空格
'''
全局匹配
var s1 = 'ad werhfh jfjwo';
s1.match(/s/)
# null
s1.match(/h/)
# ['h', index: 6, input: 'ad werhfh jfjwo', groups: undefined]
s1.match(/h/g)
# (2) ['h', 'h']
var reg2 = /^[a-zA-z0-9]{3,6}$/g
reg2.test('dahfi')
# true
reg2.test('dahfi')
# false
reg2.test('dahfi')
# true
reg2.test('dahfi')
# false
reg2.lastIndex;
# 0
reg2.test('dahfi')
# true
reg2.lastIndex;
# 5
'''
注意事项2：
全局匹配有lastIndex属性。
全局匹配，每一次匹配，指针会停在最后，下一次校验会报错，报错后从头校验又会报true。
'''
校验不传参数
var reg2 = /^[a-zA-z0-9]{3,6}$/
reg2.test()
#false
reg2.test(undefined)
#false
var reg3 = /undefined/
reg3.test()
# true
十二、BOM与DOM操作
1.BOM：浏览器对象模型
通过写js代码可以跟浏览器交互
window.open()
window.close()
window.navigator.userAgent()
window.history.forward()
window.history.back()
window.location.href # 获取URL
window.location.href = "新网址" # 跳转到新网址
window.location.reload() # 刷新页面
alter() 警告框
alert ("hello js!")
# undefined
confirm() 确认框 # 点确定true 取消false
confirm("确定吗？")
# true
confirm("确定吗？")
# false
prompt() 提示框 # 输入什么得到什么
prompt("请输入","答案") # 第二个值是：默认值
# '答案'
定时器相关操作(重要)
function func1(){
alert('终于要干饭了')
}
let t = setTimeout(func1,3000)
# 3秒中之后自动执行func1函数
clearTimeout(t) # 取消上面的定时任务
var s1 = null
function showMsg() {
function func1(){
alert('终于要干饭了')
}
s1 = setInterval(func1, 3000)
}
function clearMission(){
clearInterval(s1)
}
setTimeout(clearMission, 9000)
showMsg()
2.DOM：文档对象模型
通过写js代码可以跟html交互
JS操作html和CSS操作html学习套路一致 都是先学如何查找标签
DOM树
document：整个页面
1.查找标签
document.getElementById()
# 根据id值查找标签 结果直接是标签对象本身
document.getElementsByClassName()
# 根据class值查找标签 结果是数组类型
document.getElementsByTagName()
# 根据标签名查找标签 结果是数组类型
2.标签元素
parentElement # 父节点标签元素
children # 所有子标签
firstElementChild # 第一个子标签元素
lastElementChild # 最后一个子标签元素
nextElementSibling # 下一个兄弟标签元素
previousElementSibling # 上一个兄弟标签元素
"""
let divEle = document.getElementById('d1')
"""
3.节点操作
let XXXEle = document.createElement('标签名')
XXXEle.id = 'id值'
XXXEle.innerText = '内部文本'
divEle.append(XXXEle)
# ps:动态创建 临时有效 非永久
4.属性操作
XXXEle.属性 # 只能是默认属性
XXXEle.setAttribute() # 默认属性、自定义属性
5.文本操作
divEle.innerHTML
divEle.innerText
divEle.innerHTML = '<h1>嘿嘿嘿</h1>'
'<h1>嘿嘿嘿</h1>'
divEle.innerText = '<h1>哈哈哈</h1>'
'<h1>哈哈哈</h1>'
十三、JS
1.JS获取用户输入
普通数据（输入、选择）
标签对象.value
文件数据(上传)
标签对象.files
标签对象.files[0]
2.JS类属性操作
标签对象.classList # 查看类的列表
标签对象.classList.contains() # 判断是否有这个类，返回true或者false
标签对象.classList.add() # 添加类
标签对象.classList.remove() # 移除类
标签对象.classList.toggle() # 如果有查找到这个类，就删除；如果没有查找到就添加一个新的类
3.JS样式操作
了解即可，一般都用css操作样式，应该各司其职，不建议使用
格式：
标签对象.style.标签样式属性名
backgroundColor # 设置背景色，对应css的background-color
backgroundImage # 设置背景图片
十四、事件
1.事件的含义
给标签添加一些额外的功能，使标签能够触发一段js代码的运行。
2.触发方式
| 方式 | 说明 |
|---|---|
| onclick | 单击某个对象时调用事件的句柄 |
| ondblclick | 双击某个对象时调用事件的句柄 |
| onfocus | 元素获得焦点 例如：输入框 |
| onblur | 元素失去焦点 应用场景：用于验证表单，用户离开某个输入框时，代表输入完成，我们可以对它进行验证。 |
| onchange | 域的内容被改变 应用场景：通常用于表单元素，当元素内容被改变时触发(select联动)。 |
| onkeydown | 某个键盘按键被按下 应用场景：用户在最后一个输入框按下回车键时，表单提交 |
| onkeypress | 某个键盘按键被按下并松开 |
| onkeyup | 某键盘按键被松开 |
| onload | 一张页面或一幅图像完成加载 |
| onmousedown | 鼠标按钮被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素上移开 |
| onmouseover | 鼠标移到某元素上 |
| onselect | 在文本框中的被选中时发生 |
| onsubmint | 确认按钮被点击，使用对象是form |
3.添加事件的两种方式
<script>
1.先定义一个function，在标签内部指定
let func1 = function(){
函数体代码
return 返回值
}
<input type="button" value="按钮名" onclick(触发条件)="func1()">
2.先查找标签，然后批量绑定
let btnEle = document.getElementById('d1')
btnEle.onclick = function(){
函数体代码
}
</script>
4.关键字this
this指代的是当前被操作的标签对象
5.window.onload
等待文档加载完毕之后再执行一些代码
window.onload = function(){
页面js代码
}
jQuery
一、jQuery 类库
1.介绍
兼容多浏览器的JavaScript库
极大地简化JavaScript编程。它的宗旨就是：Write less,do more.
2.jQuery 导入
'''
注意：
使用jQuery必须要先导入
它的本质其实就是一个js文件
'''
1.本地导入
提前下载文件并导入
2.网络CDN服务
CDN：内容分发网络（收费）
只要计算机能够联网就可以直接导入
bootcdn:会提供一些免费的前端cdn服务
二、jQuery基本使用
1.基本语法
$(selector选择器).action动作()
2.js和jQuery的区别
1./*js代码操作*/
let p1Ele = document.getElementsByTagName('p')[0]
p1Ele.style.color = 'pink'
let p1Ele = document.getElementsByTagName('p')[1]
p1Ele.style.color = 'red'
2./*jQuery代码操作*/
$('p').first().css('color','black')
// 改变一个p标签
$('p').first().css('color','orange').next().css('color','blue')
// 同时改变两个标签的样式
3.jQuery选择器
| 选择器 | 代码 |
|---|---|
| id选择器 | $("#id") |
| 标签选择器 | $("tagName") |
| class选择器 | $(".className") |
| 配合使用 | $("div.c1") 找到有c1 class类的div标签 |
| 组合选择器 | $('#id,.className,tagName') |
层级选择器：x和y可以是任意选择器
$("x y"); // x的所有后代y
$("x>y"); // x的所有儿子y
$("x+y"); // 找到所有紧挨着x后面的y
$("x~y"); // x之后的所有兄弟y
4.jQuery选择器查找到的标签和js有何区别
结果都是数组，但是功能有区别
1.如果使用索引取值，那么都是标签对象
标签对象是无法调用jQuery提供的方法的
2.标签对象如果想转换成jQuery对象需要使用$()
转换成jQuery对象的目的是为了使用jQuery提供的方法
$('p')[1].css('color','green')
VM967:1 Uncaught TypeError: $(...)[1].css is not a function
at <anonymous>:1:11
$('p')[1].style.color = 'green'
'green'
5.基本筛选器
:first # 第一个
:last # 最后一个
:eq(index) # 索引等于index的那个元素
:even # 匹配所有索引值为偶数的元素，从0开始计数
:odd # 匹配所有索引值为奇数的元素，从0开始计数
:gt(index) # 匹配所有索引值大于给定索引值的元素
:lt(index) # 匹配所有索引值小于给定索引值的元素
:not(元素选择器) # 排除所有满足not条件的标签
:has(元素选择器) # 选取所有后代元素包含一个或多个满足has条件的标签在内的标签
三、表单筛选器
可以看成是属性选择器优化而来
1.选择器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
:enabled
:disabled
:checked
:selected
2.优化前优化后
1.$("input[type='password']")
jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
0: input.c
length: 1
prevObject: jQuery.fn.init [document]
[[Prototype]]: Object(0)
2.$ (':text')
jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
0: input.c
length: 1
prevObject: jQuery.fn.init [document]
[[Prototype]]: Object(0)
3.表单对象属性
:enabled # 可用元素
：disabled # 不可用元素
：checked # 匹配所有被选中的元素
：selected # 匹配所有选中的 option 元素
'''
:checked 会把option也查找出来
input:checked 指定查找input标签中的checked标签
'''