前端知识总汇

HTML

超文本标记语言

注释

html 复制代码

<!--单行注释-->
<!--
多行注释
-->
由于 HTML 代码杂乱无章，我们习惯性的用注释来划定区域方便后续的查找

HTML 的文档结构

html 复制代码

<!DOCTYPE html>
<html lang="en">

<!-- 定义配置给浏览器 -->
<head>
 
</head>

<!--网页的主体部分-->
<body>
</body>

</html>

head 内常用标签

html 复制代码

<head>
    <meta name="keyword" content="搜索关键字">  <!--网页搜索关键字-->
    <meta name="description" content="网页秒数信息">  <!--网页秒数信息-->
    
    <title></title>  <!--网页标题-->
    
    <style></style>  <!--内部编写 css 代码-->
    <link rel="stylesheet" href="mycss.css">  <!--引入外部 css 文件-->
    
    <scritpt></scritpt>  <!--内部编写 js 代码-->
    <script src="myjs.js"></script>  <!--引入外部 js 文件-->
</head>

body 内常用标签

基本标签

html 复制代码

<h1> 一级标签 </h1> <!--标题标签 1~6 标题-->
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<br> <!--换行-->
<hr> <!--水平分割线-->

标签的分类

块级标签
- 独占一行
- 可以修改长宽
- 块级标签内部可以嵌套任意的块级标签和行内标签
  - 例外： p 标签只能嵌套行内标签

html 复制代码

常见的块级标签
<h1></h1>
<div></div>
<p></p>

行内标签
- 自身文本多大就占多大
- 只能嵌套行内标签

html 复制代码

<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<br> <!--换行-->
<hr> <!--水平分割线-->

特殊符号

html 复制代码

<p>&nbsp;</p>  <!--空格-->
<p>&gt; &lt;</p>  <!--大于号 小于号-->
<p>&amp;</p>  <!-- & -->
<p>&yen;</p>  <!-- ￥ -->
<p>&copy;</p>  <!-- © -->
<p>&reg;</p>  <!-- ® -->

常用标签

html 复制代码

<div>  <!-- 块级标签 -->
    <span>Hello World</span>  <!-- 行内标签 -->
</div>

<!--
构造页面初期时使用，使用 div 和 span 去占位然后再调整样式
使用 div 分区域，使用 span 放文本

`img`图片标签

html 复制代码

<img src="" alt="">
<!--
src	
	1.图片的路径	可以是本地的也可以是网上的

alt="这是我的前女友"
	当图片加载不出来的时候 给图片的描述性信息

title="新垣结衣"
	当鼠标悬浮到图片上之后 自动展示的提示信息

height="800px" 		
width=""
	高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
  如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真

`a`链接标签

html 复制代码

<a href="" target="">文本</a>

href
	1.放url，用户点击就会跳转到该url页面
  2.放其他标签的id值 点击即可跳转到对应的标签位置

target
	默认a标签是在当前页面完成跳转  _self
     新建页面跳转			       _blank

html 复制代码

<!-- a 标签的锚点功能 
	点击 id 为 #d1 的 a标签，自动跳转到 id 为 d1 的 a 标签
-->
<a href="" id="d1"></a><br>
<img src="111.png" alt="this is my wife" height="400px" title="YiFei Liu"><br>
<a href=""id="#d1">点此回到图片上</a>

列表标签

无序列表

html 复制代码

<ul>
          <li>第一项</li>
          <li>第二项</li>
          <li>第二项</li>
          <li>第二项</li>
  </ul>

有序列表

html 复制代码

<ol type="1" start="5">  <!-- type 更换类型 start 从哪开始 -->
      <li>111</li>
      <li>222</li>
      <li>333</li>
  </ol>

标题列表

html 复制代码

  <dl>
      <dt>标题1</dt>
      <dd>内容1</dd>
      <dt>标题2</dt>
      <dd>内容2</dd>
      <dt>标题3</dt>
      <dd>内容3</dd>
  </dl>

表格

html 复制代码

<table>
    <!--表头信息-->
    <thead>
    <!--一个tr就表示一行-->
    <tr>
        <th>username</th>
        加粗文本
        <td>username</td>
        正常文本
    </tr>
    </thead>

    <!--表单(数据信息)-->
    <tbody>
    <tr>
        <td>jason</td>
        <td>123</td>
        <td>read</td>
    </tr>
    </tbody>

</table>

html 复制代码

<table border="1"> 加外边宽
	<td colspan="2">egon</td>   水平方向占多行
    <td rowspan="2">DBJ</td>    垂直方向占多行

表单标签

能够获取前端用户的数据，基于网络发送给后端服务

html 复制代码

<form action="http://127.0.0.1:5000/index/"  
      method="post" 
      enctype="multipart/form-data">
    
    <input>  <!-- 必须放到里面才能够提交 -->
</form>

html 复制代码

input标签 就类似于前端的变形金刚  通过type属性变形
	text:普通文本
  password:密文
	date:日期	
  submit:用来触发form表单提交数据的动作
  button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
  reset:重置内容
  radio:单选
    	默认选中要加checked='checked'
      <input type="radio" name="gender" checked='checked'>男
      当标签的属性名和属性值一样的时候可以简写
      <input type="radio" name="gender" checked>女
	checkbox:多选
  		<input type="checkbox" checked>DBJ
  
  file:获取文件  也可以一次性获取多个
    	<input type="file" multiple>

html 复制代码

select标签 默认是单选 可以加mutiple参数变多选 默认选中selected
						<select name="" id="" multiple>
                <option value="" selected>新垣结衣</option>
                <option value="" selected>斯佳丽</option>
                <option value="">明老师</option>
            </select>

textarea标签  获取大段文本
	  <textarea name="" id="" cols="30" rows="10"></textarea>

# 能够触发form表单提交数据的按钮有哪些(一定要记住)
		1、<input type="submit" value="注册">
		2、<button>点我</button>
    
# 所有获取用户输入的标签 都应该有name属性
	name就类似于字典的key
  用户的数据就类似于字典的value
  <p>gender:
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女
            <input type="radio" name="gender">其他
  </p>

标签的两个重要属性

id值，类似于身份证号，同一个 HTML 页面上唯一不能重复
class值，一个标签可以继承多个 class 值
标签内可以有默认的属性（键值对），也可以有自自定义的属性

CSS

层叠样式表：给 HTML 添加样式

注释

css 复制代码

/**/

语法结构

css 复制代码

选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

css 三种引入方式

css 复制代码

1.style标签内部直接书写(为了教学演示方便我们用第一种)
  	<style>
        h1  {
            color: burlywood;
        }
    </style>
  2.link标签引入外部css文件(最正规的方式 解耦合)
      <link rel="stylesheet" href="mycss.css">
	3.行内式(一般不用)
  		<h1 style="color: green">老板好 要上课吗?</h1>

css 选择器

基本选择器

css 复制代码

<style>
        /*id选择器*/
        #d1 {  /* !*找到id是d1的标签 将文本颜色变成绿黄色*! */
            color: greenyellow;
        }
        /*类选择器*/
        .c1 {  /*!*找到class值里面包含c1的标签*!*/
            color: red;
        }
        /*元素(标签)选择器*/
        span {  /*!*找到所有的span标签*!*/
            color: red;
        }
        通用选择器*/
        * {  /*!*将html页面上所有的标签全部找到*!*/
            color: green;
        }
</style>

组合选择器

css 复制代码

			/*后代选择器*/
        div span {
            color: red;
        }

        /*儿子选择器*/
        div>span {
            color: red;
        }

        /*毗邻选择器*/
        div+span {  /*!*同级别紧挨着的下面的第一个*!*/
            color: aqua;
        }

        /*弟弟选择器*/
        div~span {  /*同级别下面所有的span*/
            color: red;
        }

属性选择器

css 复制代码

""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
属性选择器是以[]作为标志的

[username] {  /*!*将所有含有属性名是username的标签背景色改为红色*!*/
            background-color: red;
        }*/

[username='jason'] {  /*!*找到所有属性名是username并且属性值是jason的标签*!*/
            background-color: orange;
        }

input[username='jason'] {    /*!*找到所有属性名是username并且属性值是jason的input标签*!*/
        background-color: wheat;
        }

选择器优先级

选择器相同书写顺序不同
- 就近原则:谁离标签更近就听谁的
选择器不同 ...
- 行内 > id选择器 > 类选择器 > 标签选择器
- 精确度越高越有效

css 属性

行内标签无法设置长宽，就算写了也无法生效

字体属性

css 复制代码

font-family: "Arial Black","微软雅黑","...";  !*第一个不生效就用后面的 写多个备用*!*/

font-size: 24px;  /*字体大小*/

font-weight: inherit;  /*bolder lighter 100~900 inherit继承父元素的粗细值*/

color: red;  /*直接写颜色英文*/
color: #ee762e;  /*颜色编号*!*/
color: rgb(128,23,45); /*三基色 数字  范围0-255*!*/
color: rgba(23, 128, 91, 0.9);  /*第四个参数是颜色的透明度 范围是0-1*!*/

文字属性

css 复制代码

text-align: center;  /*居中*/*/
text-align: right;
text-align: left;
text-align: justify;  /*两端对齐*/

text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: none;
/*在html中 有很多标签渲染出来的样式效果是一样的*/

a {
	text-decoration: none;  /*主要用于给a标签去掉自带的下划线  需要掌握*/
}

边框

css 复制代码

        p {
            background-color: red;

            border-width: 5px;
            border-style: solid;
            border-color: green;

        }
        div {
            /*左边框的宽度 颜色 样式*/
            border-left-width: 5px;
            border-left-color: red;
            border-left-style: dotted;
            /*右边框的宽度 颜色 样式*/
            border-right-width: 10px;
            border-right-color: greenyellow;
            border-right-style: solid;
            /*上边框的宽度 颜色 样式*/
            border-top-width: 15px;
            border-top-color: deeppink;
            border-top-style: dashed;
            /*下边框的宽度 颜色 样式*/
            border-bottom-width: 10px;
            border-bottom-color: tomato;
            border-bottom-style: solid;
            /*border: 3px solid red;  !*三者位置可以随意写*!*/

        }
/*画圆*/
        #d1 {
            background-color: greenyellow;
            height: 400px;
            width: 400px;
            border-radius: 50%;  /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
        }

display 属性

css 复制代码

display: none;  /*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*/
display: inline;  /*将标签设置为行内标签的特点*/
display: block; /*将标签设置成块儿级标签的特点*/
display: inline-block; /*标签即可以在一行显示又可以设置长宽*!*/

溢出属性

css 复制代码

overflow: visible;  /*默认就是可见 溢出还是展示*/
overflow: hidden;  /*溢出部分直接隐藏*/
overflow: scroll;  /*设置成上下滚动条的形式*/
overflow: auto;

盒子模型

标签和标签之间的距离margin外边距
标签的边框border
内容到边框的距离padding内边距
注意：浏览器会自带 8px 的 margin，可以去掉 body {margin: 0;}

css 复制代码

margin: 0;  /*上下左右全是0
margin: 10px 20px;  /* 第一个上下 第二个左右*/
margin: 10px 20px 30px;  /*第一个上  第二个左右  第三个下*/
margin: 10px 20px 30px 40px;  /*上 右 下 左*/

margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;

/*水平居中*/
 margin: 0 auto;  /*只能做到标签的水平居中*/
/*padding 和 margin 语法一样*/

css 复制代码

#d1 {
	margin-bottom: 50px;
}
 #d2 {
	margin-top: 20px;  /*不叠加 只取大的*/
 }

定位

静态

所有的标签默认都是静态的static，无法改变位置
相对定位(了解)

相对于标签原来的位置做移动relative
绝对定位(常用)

相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)

eg:小米网站购物车

当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
固定定位(常用)

相对于浏览器窗口固定在某个位置

eg:右侧小广告

css 复制代码

position: static;  /*默认是static无法修改位置*/
position: relative;
/*相对定位
标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
虽然你哪怕没有动 但是你的性质也已经改变了
*/
position: absolute;  /*绝对定位*/
position: fixed;  /*写了fixed之后 定位就是依据浏览器窗口*/

文档流(原来的位置是否还保留)

不脱离文档流：相对定位
脱离文档流：浮动、绝对定位、固定定位

JavaScript

现在最多用的是 5.9 和 6.0 版本的 js

HTML 插入 JS

html 复制代码

<!-- 行内式 -->
<button type="button" onclick="alert('欢迎!')">点我!</button>

<!-- 脚本块 -->
<script type="javascript">
...
</script>

<!-- 引入式 -->
<script type="javascript" src="myjs.js"></script>

注释和变量

注释

js 复制代码

// 单行注释

/*
多行注释
*/

注意

js 和 python 一样，是动态类型的语言，不需要为此定义变量类型

声明变量的两种方式

js 复制代码

var 变量名;  // 全局变量
let 变量名;  // 可以区分全局和局部变量

常量

js 复制代码

const PI = 3.14;  // 更改会报错

数值类型`number`

js 不区分数值的整数和小数，一律都是 number 类型

js 复制代码

var a = 10;
typeof(a)  // number

类型转换

js 复制代码

parseInt()
parseFloat()
 
// 将字符串型转换为 number
parseInt('12312312')   // 12312312
// 将字符串型转换为 number, 并保留小数
parseFloat('11.11')  // 11.11
// 将字符串型转换为 number, 不保留小数
parseInt('11.11')  // 11
// 对于有其他字符的，只保留前面的一部分
parseInt('123sdasdajs2312dasd')  // 123
// 当前面不是字符串时，会返回 NaN
parseInt('asdasdad123sdasdajs2312dasd')  // NaN
// NaN 是 number 类型
typeof NaN  // number

字符串类型`string`

js 复制代码

var name = 'codeFun'  // 单引号声明
var name = "codeFun"  // 双引号声明
// 不支持三引号声明

模板字符串

js 复制代码

name = 'codeFun';
age = 18;
str = `
	my name is ${name}, age is ${age}
`  // '\n\tmy name is codeFun, age is 18\n'

常用的字符串方法

js 复制代码

//返回长度
.length

// 去除空白
.trim()	  // 移除空白
.trimLeft() 	// 移除左边的空白
.trimRight()	// 移除右边的空白

// 字符切片
.charAt(n)	// 返回第n个字符
.indexOf(substring, start)	// 子序列位置
.substring(from, to)	// 根据索引获取子序列
.slice(start, end)	// 切片
.split(delimiter, limit)  // 分割

// 转换大小写
.toLowerCase()	// 小写
.toUpperCase()	 // 大写

布尔值`Boolean`

js 复制代码

true
false  // 空字符串、0、null、undefined、NaN

null 和 undefined

null 是将赋值完的变量名给空值，undefined 是未赋值

数组

js 复制代码

// 类似于 python 中的列表
var l = [11,22,33,44,55]

常用方法

js 复制代码

.length   // 获取长度

.push(element)  // 向最后追加增加元素

.pop()  // 弹出最后一个元素并返回

.unshift(element)  // 在 0 索引添加元素
.shift()  // 弹出 0 号索引的元素并返回

.reverse()  // 反转

.join(连接符)   // 使用连接符将列表连接起来并返回

.concat(list_name)  // 连接两个数组返回新的数组

.sort()  // 进行排序

.splice(index,delete_num)  // 从 index 的位置，删除 delete_num 个元素
// 从 index 的位置，删除 delete_num 个元素,添加指定元素 element
.splice(index,delete_num,element)

遍历数组

js 复制代码

l.forEach(function(value){console.log(value)}, l)  // 遍历打印元素

// 遍历打印元素 和 索引
l.forEach(function(value, index){console.log(value,index)}, l)  

// 遍历打印元素 索引 元素的数据来源
l.forEach(function(value,index,arr){console.log(value,index,arr)}, l)

// map 和 foreach 的用法差不多
var ll = [11,22,33,44,55,66]
ll.map(function (value) {
    return value * 2
},ll)
//  [22, 44, 66, 88, 110, 132]

运算符

js 复制代码

// 算术运算符
// 加号在前先加后赋值 加号在后先赋值后加
var x = 10;
var res1 = x++;  // res1 10
var res2 = ++x;  // res2 12

// 比较运算符
1 == '1'  # 弱等于  内部自动转换成相同的数据类型比较了
true  

1 === '1'  # 强等于  内部不做类型转换
false

流程控制

if 判断

js 复制代码

if(条件){
    代码块;
}else if(条件){
    代码块;
}else{
    代码块;
}

Switch 判断

js 复制代码

var num = 2;
switch (num){
    case 0:
        代码块;
        break;
    case 2:
        代码块;
        break;
   	...
    default:
    	代码块
}

for 循环

js 复制代码

for(起始位;条件;循环一次后对于起始位的操作){
    代码块;
}
// 打印0~9
for(var i = 0;i < 10;i ++){
    console.log(i)
}

while 循环

js 复制代码

while(条件){
    代码块;
}

函数

函数的定义和调用

js 复制代码

// 定义
function function_name([params]){
    代码块;
    [return return_value]
}
// 调用
// 调用函数时，传入参数的多或少都不会报错！
// 函数的返回值只能是一个，多个可以使用数组包括！
[return_vaule =] function_name([params])

限制调用函数的参数

js 复制代码

function func2(a,b){
  if(arguments.length<2){
    console.log('传少了')
  }else if (arguments.length>2){
    console.log('传多了')
  }else{
    console.log('正常执行')
  }
}

匿名函数

js 复制代码

function([params]){
    代码块;
}

箭头函数

js 复制代码

var function_name = params => params;
// 上面和下面的等价
var function_name = function(params){
    return params
}

对象

自定义对象

js 复制代码

"""第一种创建自定义对象的方式"""
var d = {'name':'jason','age':18}
typeof d  // "object"

取值
d['name']  // "jason"
d.name  // "jason"

"""第二种创建自定义对象的方式  需要使用关键字 new"""
var d2 = new Object()  # {}

d2.name = 'jason'  // {name: "jason"}

d2['age'] = 18  // {name: "jason", age: 18}

Date 日期对象

js 复制代码

let date = new Date()  // Thu Apr 20 2023 11:29:07 GMT+0800 (中国标准时间)

d3.toLocaleString()  // '2023/4/20 11:29:07'

// 也支持自己手动输入时间
let d4 = new Date('2200/11/11 11:11:11')
d4.toLocaleString()

let d5 = new Date(1111,11,11,11,11,11)
d5.toLocaleString()  # 月份从0开始0-11月
"1111/12/11 上午11:11:11"

# 时间对象具体方法
let d6 = new Date();
d6.getDate()  获取日
d6.getDay()		获取星期
d6.getMonth()		获取月份(0-11)
d6.getFullYear()		获取完整的年份
d6.getHours()			获取小时
d6.getMinutes()		获取分钟
d6.getSeconds()		获取秒
d6.getMilliseconds()  获取毫秒
d6.getTime()					时间戳

JSON 对象

js 复制代码

JSON.stringify()  // 序列化 类似于 python 中的 dumps
JSON.parse()  // 反序列化 类似于 python 中的 loads
// 实例：
var dict = {'name': 'codeFun', age: 18};
dict_json = JSON.stringify(dict)  // '{"name":"codeFun","age":18}'
JSON.parse(dict_json)  // {name: 'codeFun', age: 18}

RegExp 对象

js 复制代码

// 创建对象
var reg_obj01 = new RegExp('^[a-zA-Z]{1,5}$');  // 匹配 1-5 个由大小写字母组成的字串
var reg_obj02 = /^[a-zA-Z]{1,5}$/;  // 匹配 1-5 个由大小写字母组成的字串

// 匹配内容
reg_obj01.test();  // 什么不写，匹配 undefined
reg_objo1.test('codeFun');  // 返回 false

// 字符串匹配
var str01 = 'hello world';
var result_list = str01.match(/o/);
console.log(result_list)  // ['o', index: 4, input: 'hello world', groups: undefined] 只能找到一个
var result = str01.match(/o/g)  // 全局查找，能够找到两个
"""
全局匹配有一个 lastIndex 属性，匹配一次后指针就到最后了，下一次再匹配就是 false
"""

BOM 和 DOM

BOM（Browser Object Model）浏览器操作对象
- 使用 js 代码操作浏览器
DOM（Document Object Model）文档对象模型
- 使用 js 代码操作标签

BOM 操作

window 对象

window 对象指代的就是浏览器窗口

js 复制代码

window.innerHeight  // 浏览器窗口的高度 910
window.innerWidth  // 浏览器窗口的宽度 1589

// 新建窗口打开页面，第二个参数空着，第三个参数是新建窗口的大小和位置
window.open('https://www.baidu.com/','','height=500px,width=500px,top=400px,left=400px');

window.close()  // 关闭当前页面

window 子对象 navigator

js 复制代码

// 判断当前是否是浏览器  -- 爬虫和反爬能够用的上
window.navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36 Edg/112.0.1722.48'

// 获取操作系统
window.navigator.platform  // 'Win32'

window 子对象 history

js 复制代码

window.history.back()   // 回退到上一页
window.history.forward()  // 前进到下一页

window 子对象 location

js 复制代码

window.location.href  // 获取当前页面的 url
window.location.href = url  // 跳转到指定页面
widow.location.reload()  // 刷新当前页

各种框

js 复制代码

// 警告框
alert('hello world')  //  没有返回值，有确认按钮
 
// 确认框
confirm('你确定吗？')  // 当点"确认"时，返回 true；反之点取消返回 false

// 提示框
prompt('提示标题','提示内容')  // 当点击确认时，返回"提示内容"，点取消返回 null

计时器

一次性计时器

js 复制代码

let t = setTimeout(function_name,3000)  // 3 秒之后自动执行 function_name 函数
clearTimeout(t)  // 取消定时任务

循环计时器

js 复制代码

t = setInterval(function_name,3000)  // 每隔 3 秒执行一次
clearInterval(t)  // 清除定时器

DOM 操作

DOM 树
- 所有标签都可以称为节点
JavaScript 可以通过 DOM 创建动态的 HTML：
- 能够改变页面中所有的 HTML 元素和属性
- 能够改变页面中所有的 css 样式
- 能够对页面中所有事件做出反应

查找标签

js 复制代码

// 直接查找
document.getElementById("d1")  // 根据 id 查找标签，返回标签

document.getElementsByClassName('c1')  // 根据类名查找标签，返回列表

document.getElementsByTagName('div')  // 根据标签名查找标签，返回列表

节点操作

js 复制代码

/*
在页面指定位置添加图片
*/
// 创建标签
let imgEle = document.createElement('img')
// 给标签添加默认属性
imgEle.src = '111.png'
// 给标签添加自定义属性
imgEle.setAttribute('username','codeFun')
// 获取父标签元素
let divEle = document.getElementById('d2')
// 在父标签内添加 imgEle
divEle.appendChild(imgEle)

// 给 a 标签设置文本
aEle.innerText = 'hello world'
divEle.innerHTML = '<a>hello world</a>'  // 可以识别 html 语言

// 额外补充
.appendChild()
.removeChild()
.replaceChild()

.setAttribute()  设置属性
.getAttribute()  获取属性
.removeAttribute()  移除属性

获取值操作

js 复制代码

// 获取用户数据标签内部的数据
let inputEle = document.getElementById('d1')
inputEle.value
  
// 获取用户上传的文件数据
fileEle.files  // 获取一个有关文件的列表
fileEle.files[0]  // 获取文件数据

class css 操作

js 复制代码

let divEle = document.getElementById('d1')
divEle.classList  // 获取标签所有的类属性
divEle.classList.remove('bg_red')  // 移除某个类属性
divEle.classList.add('bg_red')  // 添加类属性
divEle.classList.contains('c1')  // 验证是否包含某个类属性 true
divEle.classList.toggle('bg_red')  // 有则删除无则添加

js 复制代码

// DOM操作操作标签样式 统一先用style起手
let pEle = document.getElementsByTagName('p')[0]
pEle.style.color = 'red'
pEle.style.fontSize = '28px'
pEle.style.backgroundColor = 'yellow'
pEle.style.border = '3px solid red'

事件

达到某个事先设定的条件，自动触发的动作

绑定事件的两种方式

html 复制代码

<button onclick="func1()">点我</button>
<button id="d1">点我</button>
  
<script>
  // 第一种绑定事件的方式
  function func1() {
      alert(111)
  }
  // 第二种
  let btnEle = document.getElementById('d1');
  btnEle.onclick = function () {
      alert(222)
  }
</script>

实时展示当前时间

html 复制代码

<!--
1 访问页面之后 将访问的时间展示到input框中
 2 动态展示当前时间
 3 页面上加两个按钮 一个开始 一个结束
-->
<body>
<div>
    <input type="text" id="d1" style="display: block;height: 50px;width: 200px">
    <button id="d2">开始</button>
    <button id="d3">结束</button>
</div>
<script>
    let t = null
    let inputEle = document.getElementById('d1')
    let startBtnEle = document.getElementById('d2')
    let endBtnEle = document.getElementById('d3')

    function getTime(){
        let currentTime = new  Date()
        inputEle.value = currentTime.toLocaleTimeString()
    }

    startBtnEle.onclick = function (){
        if (!t){
           t = setInterval(getTime,1000)
        }
        
    }
    endBtnEle.onclick = function (){
        clearInterval(t)
        t = null
    }
</script>
</body>

jQuery

JQuery 内部封装了原生的 js 代码，还额外添加了很多功能
能够让我们通过书写更少的代码完成 js 操作
JQuery 兼容多种浏览器，不需要考虑浏览器兼容问题（IE除外）
我们现在使用的是 3.x 版本，不兼容 IE

HTML 导入 jQuery

html 复制代码

 将 jQuery 文件直接导入即可
<script src="jQuery-3.4.1.js"></script>
也可以使用 cdn 服务
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

jQuery 的基本语法

js 复制代码

JQuery('选择器').操作()
JQuery 还可以简写为 $
即 JQuery('选择器').操作() === $('选择器').操作()

js 复制代码

// 例如将 div 标签中的颜色变红
$('div').css('color','red')

jQuery对象转换成标签对象

js 复制代码

// jQuery对象如何变成标签对象
$('#d1')[0]

// 标签对象如何转jQuery对象
document.getElementById('d1')
$(document.getElementById('d1'))

选择器和筛选器

基本选择器

js 复制代码

// id选择器
$('#d1')

// class选择器
$('.c1')

// 标签选择器
$('span')

组合选择器

js 复制代码

$('div.c1')   // 查找 div 中 class = c1 的
$('div#d1')  // 查找 div 中 id = d1 的
$('*')  // 查找全部

分组与嵌套

js 复制代码

$('#d1,.c1,p')  # 并列+混用
              
$('div span')  // 后代

$('div>span')  // 儿子

$('div+span')  // 毗邻

$('div~span')  // 弟弟

基本筛选器

js 复制代码

$('ul li')
$('ul li:first')  // 大儿子 

$('ul li:last')  // 小儿子
               
$('ul li:eq(2)')		// 放索引
               
$('ul li:even')  // 偶数索引 0包含在内

$('ul li:odd')  // 奇数索引
            
$('ul li:gt(2)')  // 大于索引
            
$('ul li:lt(2)')  // 小于索引
          
$('ul li:not("#d1")')  // 移除满足条件的标签

$('div')
$('div:has("p")')  // 选取出包含一个或多个标签在内的标签

属性选择器

js 复制代码

$('[username]')  // 选择有 username 的标签
$('[username="jason"]')  //  选择有 username = jason 的标签
$('p[username="egon"]')   //  选择有 username 的 p 标签

表单筛选器

js 复制代码

$('input[type="text"]')
$('input[type="password"]')
// 将上面的进行简写
$(':text')  // 等价于上面第一个
$(':password')  // 等价于上面第二个

// 下面的都可以简写：
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表单对象属性
:enabled
:disabled
:checked
:selected

// 特例
$(':checked')  // 它会将checked和selected都拿到
$(':selected')  // 它不会 只拿selected
$('input:checked')  // 添加一个限制条件

筛选器方法

js 复制代码

$('#d1').next()  // 同级别下一个
$('#d1').nextAll()  // 同级别下面的所有
$('#d1').nextUntil('.c1')  // 直到 class = c1 为止，不包括 c1
              
              
$('.c1').prev()  // 同级别上一个
$('.c1').prevAll()
$('.c1').prevUntil('#d2')

$('#d2').siblings()  // 同级别上下所有
              
$('#d3').parent()   // 第一级父标签
$('#d3').parent().parent()  // 父亲的父亲
$('#d3').parents()   // 找到祖宗 HTML
$('#d3').parentsUntil('body')    
              
$('#d2').children()  // 儿子
                    
$('div p')
// 上面等价于下面           
$('div').find('p')  // find从某个区域内筛选出想要的标签 
              
              
// 下面的两两等价
$('div span:first')
$('div span').first()
                                                                                
$('div span:last')
$('div span').last()
                                                                                   
$('div span:not("#d3")')
$('div span').not('#d3')

操作标签

操作类

js 复制代码

/*
js版本				 jQuery版本
classList.add()		    addClass()
classList.remove()		removeClass()
classList.contains()	hasClass()
classList.toggle()	    toggleClass()
*/

css 操作

js 复制代码

// 将第一个 p 标签的颜色变成红色，将它的下一个变成绿色
$('p').first().css('color','red').next().css('color','green')
// jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
// jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法

位置操作

js 复制代码

.offset()  // 相对于浏览器窗口
.position()  // 相对于父标签 
.scrollTop()  
  	$(window).scrollTop()  // //  目前浏览的长度
    $(window).scrollTop(0)  # 加了参数就是设置

尺寸

js 复制代码

$('p').height()  // 文本的高度
$('p').width()  // 文本的宽度

$('p').innerHeight()  // 文本+padding
$('p').innerWidth()

$('p').outerHeight()  // 文本+padding+border
$('p').outerWidth()

文本操作

js 复制代码

/*
操作标签内部文本
  js											jQuery
  innerText								text()  括号内不加参数就是获取加了就是设置
  innerHTML								html()
 */
$('div').text()
$('div').html()

获取值操作

js 复制代码

/* 
js								jQuery
  .valu								.val()
*/
$('#d1').val()
$('#d1').val('520快乐')  # 括号内不加参数就是获取加了就是设置

// 获取文件
$('#d2')[0].files[0]  //记两个对象之间的转换

属性操作

js 复制代码

/*
js中							jQuery
  setAttribute()			  attr(name,value)
  getAttribute()			  attr(name)
  removeAttribute()   	       removeAttr(name)
  
  在用变量存储对象的时候 js中推荐使用	
  	XXXEle			标签对象
  jQuery中推荐使用
  	$XXXEle			jQuery对象
*/
let $pEle = $('p')
$pEle.attr('id')
$pEle.attr('class','c1')
$pEle.removeAttr('password')     
      
           
/*
对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox radio option是否被选中用prop
*/
                   
$('#d2').prop('checked')
$('#d3').prop('checked',true)

两个方法

each

js 复制代码

// 打印出所有的索引
$('div').each(function(index){console.log(index)})
// 打印所有的索引和对象
$('div').each(function(index,obj){console.log(index,obj)})

// 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})

data

能够让标签帮我们存储数据并且用户肉眼看不见

js 复制代码

// 添加 info = hello world 的键值对
$('div').data('info','hello world')
               
// 根据键获取信息
$('div').data('info')  

// 根据键删除信息
$('div').removeData('info')

小案例

按钮克隆

js 复制代码

/*
	js 函数内的 this 指代函数本身。
*/
<button id="d1">点击，复制我</button>
<script>
    $('#d1').on('click',function () {
        $(this).clone().insertAfter($('body'))
    })
</script>

自定义登录校验

html 复制代码

<body>
<p>
    username：<input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>
    password：<input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>
<script>
    let $username = $('#username')
    let $password = $('#password')
    // 点击提交时会判断输入框内是否为空，如果为空则提示用户不能为空
    $('#d1').on('click',function (){
        let userName = $username.val()
        let passWord = $password.val()
        if (!userName){
            $username.next().text('用户名不能为空')
        }
        if (!passWord){
            $password.next().text('密码不能为空')
        }
    })
    // 聚焦事件，将鼠标放到收入框内触发
    $('input').focus(function () {
        // 将红色提示字清空
        $(this).next().text('')
    })
</script>
</body>

input 框实时监控

html 复制代码

<body>
<input type="text">
<script>
    $('input').on('input',function () {
        console.log($(this).val())
    })
</script>
</body>

hover 事件

html 复制代码

<script>
    // $("#d1").hover(function () {  // 鼠标悬浮 + 鼠标移开
    //     alert(123)
    // })

    $('#d1').hover(
        function () {
              alert('我来了')  // 悬浮
      },
          function () {
              alert('我溜了')  // 移开
          }
      )
  </script>

阻止后续事件

<input type="submit">点击它有默认事件：提交用户输入的内容和清空用户输入的内容
通过return false可以阻止默认事件的发生
return false还可以阻止事件冒泡
- 事件冒泡：就是在父亲和儿子都有点击事件时，点击儿子也会触发父辈的点击事件

html 复制代码

<body>
<form>
	<span id="d1"></span>
	<input type="submit" id="d2">
</form>
<script>
    $('#d2').on('click',function () {
        $('#d1').text('hello world')
        return false
    })
</script>
</body>

事件委托

html 复制代码

<body>
<button>弹窗显示</button>
<script>
    // $('button').click(function () {
    //     alert(123)
    // })
    // 上面的点击事件在动态的新建按钮时触发
    
    // 在指定范围内 将事件委托给某个标签 无论标签是事先写好的还是后面动态创建的
    $('body').on('click','button',function () {
        alert('hello world')
    })
</script>
</body>

BootStrap

form 表单常用模版

html 复制代码

<table class="table table-hover table-striped">
<thead>
    <tr>
        <th>ID</th>
    </tr>
</thead>
<tbody>
    {% for book_obj in book_queryset %}
    <tr>
        <td>{{ book_obj.pk }}</td>
        
        <td>
            <a href="" class="btn-xs btn btn-primary">编辑</a>
        </td>
    </tr>
    {% endfor %}
</tbody>
</table>

前端知识总汇

前端知识总汇

HTML

注释

HTML 的文档结构

head 内常用标签

body 内常用标签

基本标签

标签的分类

特殊符号

常用标签

img图片标签

a链接标签

列表标签

表格

表单标签

标签的两个重要属性

CSS

注释

语法结构

css 三种引入方式

css 选择器

基本选择器

组合选择器

属性选择器

选择器优先级

css 属性

边框

display 属性

溢出属性

盒子模型

定位

JavaScript

HTML 插入 JS

注释和变量

注意

数值类型number

字符串类型string

布尔值Boolean

数组

运算符

流程控制

函数

对象

自定义对象

Date 日期对象

JSON 对象

RegExp 对象

BOM 和 DOM

BOM 操作

各种框

计时器

DOM 操作

事件

jQuery

HTML 导入 jQuery

jQuery 的基本语法

jQuery对象转换成标签对象

选择器和筛选器

操作标签

操作类

css 操作

位置操作

尺寸

文本操作

获取值操作

属性操作

两个方法

each

data

小案例

BootStrap

form 表单常用模版

`img`图片标签

`a`链接标签

数值类型`number`

字符串类型`string`

布尔值`Boolean`