JavaScript

JS简介

1.ECMA Script和JavaScript的关系

全称JavaScript但是与Java没有什么关系 之所以这么叫是为了蹭Java的热度

它是一门前端工程师的编程语言 但是它本身有很多逻辑错误（不是很严谨）

1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。

因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

2.JavaScript语言

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

JavaScript 在刚诞生的时候，它的名字叫 “LiveScript”。但是因为当时 Java 很流行，所以决定将一种新语言定位为 Java 的“弟弟”会有助于它的流行。

随着 JavaScript 的发展，它已经成为了一门完全独立的语言，并且也拥有了自己的语言规范 ECMAScript。现在，它和 Java 之间没有任何关系。

可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等

3.HTML、CSS、JavaScript

HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。

CSS 是一种样式规则语言，可将样式应用于 HTML 内容， 例如设置背景颜色和字体，在多个列中布局内容。

JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。

JS基础

1.如何使用?

1.head内script标签内编写
2.head内script标签src属性引入外部js资源
3.body内最底部通过script标签src属性引入外部js资源(最常用)
ps:注意页面的下载是从上往下的 所以操作标签js代码一定要等待标签加载完毕再执行才可以正常运行

2.注释语法

//这是单行注释
/**/ 这是多行注释

3.结束符

分号（很多时候不写也没问题）

变量与常量

1.pycharm创建js文件或者HTML文件（适合编写较为复杂的js代码）

2.浏览器提供编写js代码的环境

js中声明变量需要关键字

1.关键字var
var name='name'  /*全部都是全局变量*/
2.关键字let
let name = 'jason' /*可以声明局部变量*/

他俩的的区别：
    var 在for循环里面定义也会影响到全局
    let 在局部定义只会在局部生效

3.常量

python中没有真正意义上的常量，默认全大写就是表示常量
js中有真正意义上的常量，需要使用关键字const声明，这个常量不允许更改，一旦进行更改就会报错
const pi = 3.24
pi = 3.2   # 报错

基本数据类型

在JS中如何查看当前数据类型，typeof 变量名；

1.数值类型

在js中它不分整型、浮点型、统称为数值类型(number)

var a = 11;
var b = 11.11;
typeof a;
typeof b;

'number'
整型 浮点型 都为number类型
NaN 也属于数值类型 意思是：不是一个数字((Not A Number)

2.类型转换

转换整型
parseInt()
转换浮点型
parseFloat()

parseInt('123')
123
parseFloat('11.11')
11.11
parseInt('11.11')
11
parseInt('11adasdasdasd11')
11
parseInt('asddsad11')
NaN  // 属于数值类型 表示的意思是 不是一个数字

为了与前端迎合，js做到了尽量避免报错

3.字符类型(string)

var a = "Hello"
var b = "world;
var c = a + b;
console.log(c);  // 得到Helloworld
var s = 'jason'
typeof s
'string'
var s1 = 'jason'
typeof s1;
'string'
var s2 = '''body'''
VM1243:1 Uncaught SyntaxError: Unexpected string  // 不支持三引号

1.模板字符串（模板字符串除了可以定义多行文本之外还可以实现格式化字符串操作）
var s3 = `asadnkadnkasdjlhjhhljkhyhbnnnnnnnjk`  // 数字1左边的那个符号
undefined
typeof s3
'string'
模板字符串替换
书写${} 会自动去前面找大括号里面的变量名对应的值
如果没有定义直接报错
案例：
var name = 'jason'
var age = 18
var sss = `
my name is ${name} and my age is ${age}
`
sss
'my name is jason and my age is 18'


2.字符串的拼接(内置方法)
在python中不推荐你使用 + 做拼接，使用join
在JavaScript中国推荐直接使用 + 做拼接，并且支持不同类型直接的拼接，它会自动尽自己最可的可能去进行类型转换然后拼接
name + age
jason18

js常见的内置方法

4.布尔类型(Boolean)

python和js布尔类别的差别

python中的布尔值是首字母大写
True
False:0,None,'',[],{} 等一切空的数据
js中布尔值是全小写
true
false: '', 0, null, undefined, NaN

5.null与undefined

null意思是厕所纸用完了，拥有过现在没有了，undefined意思是厕所都没有放纸，从未拥有过

1.null：表示的意思是空
  表示值为空，一般都是指定或清空一个变量时使用
  name = 'jason'
  name = null
2.undefined：表示的意识是未定义
  表示声明一个变量，但是没有做初始化操作（没有给值）
  函数没有指定返回值的时候，返回的也是undefined

6,对象(object)

在js中也是一切皆对象

6.1数组

数组的作用是：使用单独的变量名来存储一系列的值，类似于python中的列表
var a =[123,'ABC']
console.log(a[1]);

常见的一些方法展示

6.2对象自定义对象(object)

类似于python中的字典
let d1 ={'name':'jaosn',}
let d2 = new Object()  # 创建一个空对象 默认为字典
类似于python中的内置函数或者内置模块
固定语法
    var 变量名 = new 内置对象名();

运算符

1.算数运算符

运算符号：+ - * / %  ++(自增) --(自减)
var x=10;
var res1=x++;
var res2=++x;

res1;
10
res2;
12

加号在前，先加后赋值
加号在后，先赋值后加

2.比较运算符

> >= < <= != == === !=

1 == "1"  // true  弱等于
1 === "1"  // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将
//数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误

3.逻辑运算符

&&(与)	||(或)  !(非)

4.赋值符号

= += -= *= /=

流程控制

单if

if(条件){条件成立之后执行的代码}

if…else

if(条件){
  条件成立之后执行的代码
}else{
  条件不成立执行的代码
}

if…else if…else

if(条件1){
   条件成立的执行语句
}else if(条件2){
   条件2成立执行的语句
}else{
   条件不成立执行的语句
}

switch

如果分支结构中else if很多还可以考虑使用switch语法

	switch(条件){
        case 条件1:
        	条件1成立执行的代码;
        	break;  如果没有break会基于某个case一直执行下去
        case 条件2:
        	条件2成立执行的代码;
        	break;
        case 条件3:
        	条件3成立执行的代码;
        	break;
       	case 条件4:
        	条件4成立执行的代码;
        	break;
        default:
  			 条件都不满足执行的代码
    }

for循环

for(var i=0;i<10;i++){
  console.log(i);
}

while

var i=0;
while(i<10){
  console.log(i);
  i++;
}

三元表达式

	python中:   值1 if 条件 else 值2
	JS中:	   条件?值1:值2

函数

1.语法结构

/*
python中函数的定义
    def 函数名(形参):
        '''函数注释'''
        函数体代码
        return 返回值
*/
function 函数名(形参){
    // 函数注释
    函数体代码
    return 返回值
}

2.无参函数

function 函数名(){
  console.log('hello world')
}
func1()    //调用 加括号调用与python中一样

3.有参函数

function func2(a,b){
  console.log(a,b)
}

func2(1,2)  //调用函数（传参）

func2(1,2,3,4,5,6)    // 多了没关系 只要对应得数据
1 2
func2(1)    // 少了也没关系
1 undefined

4.关键字arguments

arguments参数，可以获取传入得所有数据，也支持return和匿名函数
1.能够获取函数接受得索引参数

function func2(a,b){
    console.log(arguments)  // 能够获取函数接受得索引参数
    console.log(a,b)
}

2.关键字arguments(限制函数不能多也不能少

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

5.return返回值

返回元素的个数

function index(){
   return 666, 777, 888
}
res = index();  // 一次只能返回一个值

把返回值做成数组形式返回（可实现多元素返回）

function index(){
    return [666, 777, 888]
}
res = index();

匿名函数

function(){
console.log('所有只有好好学习)
}
var res = function(){
console.loh('嗯，好好学习把')
}

箭头函数

箭头左边的是形参  右边是返回值
var func1 = v => v;

上面等价于下面这句

var func1 = function(v){
   return v
}

var func2 = (arg1,arg2) => arg1+arg2
等价于
var func2 = function(arg1,arg2){
    return arg1+arg2
}

函数的全局变量和局部变量

1.局部变量

在JavaScript函数内部声明的变量(使用var)是局部变量，索引只能在函数内部访问它（该变量的作用域是函数内部）。
只要函数运行完毕，本地变量就会被删除

2.全局变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它

3.变量生存周期

JavaScript变量的生命周期从它们被声明的时候开始
局部变量会在函数运行以后被删除
全局变量会在页面关闭后被删除

4.作用域

首先在函数内部查找变量，找不到则到外部函数查找，逐步找到最外层。与python作用域关系查找一模一样

函数全局局部案例：

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();
shenZhen

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret(); 

Beijing

5.闭包函数

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

ShangHai

内置对象

Date对象

let d3 = new Date()
Thu Aug 25 2022 20:06:32 GMT+0800 (中国标准时间)

格式化时间

d3.toLocaleString()
'2022/8/25 20:06:32'

也支持手动输入时间(自定义)

let d4 = new Date('2022/08/25 12:12:45')
d4
Thu Aug 25 2022 12:12:45 GMT+0800 (中国标准时间)

时间对象方法

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

JSON序列化对象

1.python与js序列化和反序列化

在python中序列化反序列化
	dumps	序列化
	loads	反序列化

在js中也有序列化与反序列化
	JSON.stringify()
	JSON.parse()

2.js序列化使用

let d7 = {'name':'jason','age':18}

序列化
let res = JSON.stringify(d7)
res
'{"name":"jason","age":18}'

反序列化
JSON.parse(res)
{name: 'jason', age: 18}

3.js序列化基于网络发送给python

需求：如果当前js中有一个布尔值true需要基于网络发送给python程序并且让python转换成布尔值 如何操作

1.在js中使用JSON.stringify()序列化成json格式字符串
2.基于网络发送给python程序(自动编码)
3.python接收 解码并反序列化

RegExp正则对象

在python中如果需要使用正则 需要借助re模块
在js中需要我们取创建正则对象

1.new代表创建对象
let regl = new RegExp('^[a-zA-Z][a-zA-z0-9]{5,11}')

2.推荐使用
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
匹配内容
reg1.test('woshidashuaibi')
res2.test('woshidashuaibi')

3.获取字符串里面所有的字母s
let sss = 'nish asoswo shi'
sss.match(/s/)  // 拿到一个就停止了

4.解决拿到一个就停止的问题，使用全局匹配/g
sss.match(/s/g)  // 全局模式
(4) ['s', 's', 's', 's']

全局匹配模式：正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配，全局匹配会有一个lastindex属性

let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g

reg3.test('egondsb')  // 全局模式有一个lastindex属性
true
reg3.test('egondsb')
false
reg3.test('egondsb')
true
reg3.test('egondsb')
false
如果在后面加了一个/g的时候，每一次匹配结束后，它都会等在那里，如果再次校验的时候，它会基于当前页面进行再次向后移动，然后就会报false，报完false以后它会重置走到最开始位置

reg3.test('egondsb')
true
reg3.lastIndex
7
reg3.test('egondsb')
false
reg3.lastIndex
0

let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test()

reg4.test()  //什么都不传 默认的是undefined
true
reg4.rest()
true

//test匹配数据不传参数默认传的是undefined
reg4.test(undefined)
true

BOM（Browser Object Model）浏览器对象模型

目前为止，我们已经学习了javaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。

Javascript 由三部分构成，ECMAScript，DOM和BOM。

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素

window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

常用的Window方法

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口

window的子对象

navigator对象

浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

1.浏览器全称
window.navigator.appName

输出结果:
"Netscape"


2.浏览器厂商和版本的详细字符串
window.navigator.appVersion

输出结果:
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'


3.用来标识\效验当前是否是一个浏览器 是否存在(userAgent)参数
window.navigator.userAgent

输出结果:
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'

4.查看当前平台
window.navigator.platform

扩展(user-agent)网站仿爬措施

1.最简单最常用的一个就是校验当前请求的发起者是否是一个浏览器 userAgent

    user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

如何破解该措施？
        在你的代码中加上上面的user-agent配置即可

history对象

浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。

history.forward()  // 前进一页
history.back()  // 后退一页

location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

location.href = ‘https://www.sogo.com/‘

弹出框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框

警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
alert("警告框");

确认框

确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
confirm("你确定吗？")

提示框

提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
prompt("请在下方输入","你的答案")

计时相关

通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

• 过一段时间之后触发
• 每隔一段时间触发一次

案例：过一段时间之后触发（一次）3秒触发一次，可以取消定时任务，就不会进行执行

<script>
    function func1() {
        alert(123)
    }
    // 毫秒为单位 3秒之后自动执行func1函数
    let t = setTimeout(func1,3000);

// 取消定时任务  如果你想要清除定时任务 需要提前用变量指代定时任务
   clearTimeout(t)
</script>

限制每隔3秒触发执行一次，九秒后触发 停止执行。**

<script>	
	function func2() {
        alert(123)
    }
    function show(){
        let t = setInterval(func2,3000);  // 每隔3秒执行一次
        function inner(){
            clearInterval(t)  // 清除定时器
        }
        setTimeout(inner,9000)  // 9秒中之后触发/执行
    }
    show()
</script>

DOM （Document Object Model）文档对象模型

DOM 是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的数。

DOM标准规定HTML文档中的每个成分都是一个节点(node)

文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)

所有的标签都可以称之为是节点

查找标签

当我们的js文件中涉及到了查找标签的时候，确保能找到该标签，我们要把js文件放入body里面最下面，因为代码是向下走，走到最下面的时候，说明所有涉及到的标签都已经存在了，就可以使用了，不会存在找不到的情况

id查找 类查找 标签查找（直接查找）

document.getElementById()
    	根据id值查找标签 结果直接是标签对象本身
document.getElementsByClassName()
    	根据class值查找标签 结果是数组类型
document.getElementsByTagName()
    	根据标签名查找标签 结果是数组类型

代码练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d2">div
    <div>div>div</div>
    <p class="c1">div>p
        <span>div>p>span</span>
    </p>
    <p>div>p</p>
</div>
<div>div+div</div>
</body>
</html>

1.id查询

注意三个方法的返回值是不一样的
document.getElementById('d1')  # id查询(唯一)

输出结果:
<div id="d1">…</div>  // id不存在的话返回null

2.类查询（多个标签对象返回数组）

document.getElementsByClassName('c1')  # 返回数组
 
输出结果:
HTMLCollection(2) [div.c1, p.c1]

注意:
Element与Elements区别
Element：代表查询单个元素
Elements: 代表查询多个元素

3.标签查询（多个标签对象返回 数组）

document.getElementsByTagName('div')  # 数组

输出结果:
HTMLCollection(3) [div#d1, div, div, d1: div#d1]

索引取值方法(获取标签数组内容)
document.getElementsByTagName('div')[1]

变量名 存储方法

let divEle = document.getElementsByTagName('div')[1]
# 打印变量
divEle
输出结果:
<div class="c1">div</div>

注意:(存储变量名

当你用变量名指代标签对象的时候 一般情况下都推荐你书写成(见名知意)
以下示例:

xxxEle
divEle
aEle
pEle

ps:动态创建 临时有效 非永久

间接查找（熟悉）

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

1.生成变量名（存储变量名）

let divEle = document.getElementById('d1')

2.拿父节点（找父标签）

let divEle = document.getElementById('d1')divEle.parentElement

3.找所有的子标签

divEle.children返回结果：
HTMLCollection(3) [p, span, p]

4.找第一个孩子

divEle.firstElementChild

节点操作

1.需求

1.通过DOM操作动态的创建a标签
2.并且给标签加属性
3.最后将a标签追加到div标签尾部文本中

2.创建标签

临时操作(刷新丢失)
1.创建标签
    let XXXEle = document.createElement('标签名')
2.添加默认属性值
    XXXEle.id = 'id值'
3.添加内部文本
    XXXEle.innerText = '内部文本'
4.尾部添加
divEle.append(XXXEle)

3.属性操作

XXXEle.属性              只能是默认属性
XXXEle.setAttribute()    默认属性、自定义属性(可以只记住这个)

例子：
1.既可以设置自定义的属性也可以设置默认的书写
imgEle.setAttribute('username','jason')
undefined
2.打印标签
imgEle
<img src="111.png" username="jason">

4.文本操作

divEle.innerText  # 获取标签内部所有的文本

输出结果:
"div 百度
div>p
div>span"

divEle.innerHTML  # 内部文本和标签都拿到

输出结果:
"div
<a href="https://www.baidu.com/">百度</a><p id="d2">div&gt;p</p>
<span>div&gt;span</span>"

 对比innerText与innerHTML区别   

divEle.innerText = 'heiheihei'
"heiheihei"

divEle.innerHTML = 'hahahaha'
"hahahaha"

divEle.innerText = '<h1>heiheihei</h1>'  # 不识别html标签
"<h1>heiheihei</h1>"

divEle.innerHTML = '<h1>hahahaha</h1>'  # 识别html标签
"<h1>hahahaha</h1>"

总结它们俩个的区别

innerText: 只能获取标签内部的文本 设置文本的时候不识别HTML标签

innerHTML: 文本和标签都获取 设置文本的时候识别HTML标签

js获取值操作

1.获取用户数据标签内部的数据

--->HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1" name="">
<input type="text" name="gender" value="male" id="d2">男
<input type="text" name="gender" value="female" id="d3">女

<select name="" id="d4">
  <option value="111">1</option>
  <option value="222">2</option>
  <option value="333">3</option>
</select>

<input type="file" name="file" id="d5">
</body>
</html>

--->js代码
# 获取到输入框
let i1Ele = document.getElementById('d1')
# 查看它的值，可以动态的获取到前端输入的信息
i1Ele.value
''
i1Ele.value
'jason'
# 获取选择框
let o4Ele = document.getElementById('d4')
# 获取到的是Value里面的值，前端看到的1，是我们设置的前端所展示内容
o4Ele.value
'111'

注意：关于获取用户上传的文件数据

let i5Ele = document.getElementById('d5')
# 获取到的只是我们自己电脑上的位置，没什么用处
i5Ele.value
'C:\\fakepath\\02 数据存取演变史.mp4'
# 获取文件的信息
fileEle.files  # 数组  [文件对象,文件对象1...]
# 这里它显示了里面有一个对象
FileList {0: File, length: 1}
0: File
lastModified: 1660266516578
lastModifiedDate: Fri Aug 12 2022 09:08:36 GMT+0800 (中国标准时间) {}
name: "02 数据存取演变史.mp4"
size: 53558043
type: "video/mp4"
webkitRelativePath: ""
[[Prototype]]: File
length: 1
[[Prototype]]: FileList

获取文件数据（需要通过索引取值）

i5Ele.files[0]
File {name: '02 数据存取演变史.mp4', lastModified: 1660266516578, lastModifiedDate: Fri Aug 12 2022 09:08:36 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 53558043, …}
lastModified: 1660266516578
lastModifiedDate: Fri Aug 12 2022 09:08:36 GMT+0800 (中国标准时间) {}
name: "02 数据存取演变史.mp4"
size: 53558043
type: "video/mp4"
webkitRelativePath: ""
[[Prototype]]: File

js获取值总结

普通数据(输入、选择)
	标签对象.value
文件数据(上传)
	标签对象.files
	标签对象.files[0]

js类操作

1.获取标签所有的类属性（classList）

1.生成变量名对象
let divEle = document.getElementsByClassName('c1')

2.获取标签所有的类属性
divEle.classList
DOMTokenList(3) ['c1', 'c2', 'c3', value: 'c1 c2 c3']

2.增加某个属性（add）

divEle.classList.add('c4')
divEle
<div class="c1 c2 c3 c4"></div>

3.移除某个属性（remove）

divEle.classList.remove('c4')
divEle
<div class="c1 c2 c3"></div>

4.验证是否包含某个类属性（contains）

divEle.classList.contains('c3')
true
'返回的是true或者false'

5.有则删除无则添加（toggle）

divEle.classList.toggle('c3')
true
divEle.classList.toggle('c3')
false

js样式操作

只要想操作标签css先用style起手(DOM操作操作标签样式)

1.js操作css属性的规律

对于没有中横线的css属性一般直接使用style属性名即可

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

2.指定css操作

let pEle = document.getElementsByTagName('p')[0]
pEle.style.backgroundColor = 'red'
'red'

事件

*HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。*

1.事件可以简单的理解为是给html标签绑定了一些额外的功能(能够触发js代码的运行)

常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect       在文本框中的文本被选中时发生。
onsubmit       确认按钮被点击，使用的对象是form。

2.绑定事件的两种方式

绑定事件的方式1:提前写好函数 标签内部指定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="点我有惊喜" onclick="func1()">
<button>按一下给你蹦俩糖出来</button>
<script>
  function func1(){
    alert('喜提一个大胖小子！')
  }
</script>
</body>
</html>

绑定事件的方式2:先查找标签 然后批量绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="点我有惊喜" onclick="func1()">
<button id="d1">按一下给你蹦俩糖出来</button>
<script>
  // function func1(){
  //   alert('喜提一个大胖小子！')
  // }
  let btnEle = document.getElementById('d1')
  btnEle.onclick = function func1(){
    alert('注意：吃糖容易长蛀牙，还是别吃了！')
  }
</script>
</body>
</html>

3.事件中的this

let btnEle = document.getElementById('d1')
  btnEle.onclick = function func2(){
    alert('注意：吃糖容易长蛀牙，还是别吃了！')
    console.log(this)
  }

this指代的是当前被操作的标签对象,以后我们在一些复杂的代码的时候，需要在代码中反复的用到这个标签，就可以用this俩快速的指代，类似于面向对象中的self就是当前对象是谁那么这个self就是谁

window.onload

当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。

window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。

注意：.onload()函数存在覆盖现象。

JS事件案例校验用户输入展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
  <input type="text" id="username">
  <span class="errors" style="color: red"></span>
</p>
<p>
  <input type="text" id="password">
  <span class="errors" style="color: red"></span>
</p>
  <button id="btn">提交</button>
<script>
  // 1.查找按钮标签
  let btnEle = document.getElementById('btn')
  // 2.绑定单击事件
  btnEle.onclick = function () {
    // 3.获取用户输入的用户名和密码
    let username = document.getElementById('username').value;
    let password = document.getElementById('password').value;
    // 4.判断用户名和密码是否合法
    if (username === 'jason'){
      // 4.1查找获取用户名的input框下面的span标签
      let span1Ele = document.getElementsByClassName('errors')[0]
      // 4.2给span标签添加内部文本
      span1Ele.innerText = '用户名不能是Jason'
    }
    if (password.length === 0){
      // 4.1查找获取用户名的input框下面的span标签
      let span2Ele = document.getElementsByClassName('errors')[1]
      // 4.2给span标签添加内部文本
      span2Ele.innerText = '密码不能为空'
    }
  }
</script>
</body>
</html>

JS事件案例省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
省份：<select name="" id="province"></select>
市区：<select name="" id="city"></select>
<script>
    let data = {
        "河北": ["廊坊", "邯郸"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "安徽": ["芜湖", "合肥"],
        "上海": ["浦东新区", "青浦区"],
        "山西": ["忻州", "运城"]
    };
    let proEle = document.getElementById('province');
    let cityEle = document.getElementById('city');

    // 1.循环获取所有的省消息
    for (let pro in data) {
        // 2.创建option标签
        let opEle = document.createElement('option')
        // 3.添加内部文本
        opEle.innerText = pro // <option>省份信息</option>
        // 4.添加value属性，<option value=‘省份信息’>省份信息</option>
        opEle.setAttribute('value', pro)
        // 5.将上述的option标签添加到第一个select标签中
        proEle.append(opEle)

        // 给省份的下拉框绑定文本域变化事件
        proEle.onchange = function () {
            // 每次给市区下拉框添加市区信息之前 应该先清空上一次加载的数据
            cityEle.innerHTML = '';
            // 1.获取用户选择的省份信息
            let currentPro = this.value;
            // 2.根据省份获取对应的市区列表数据
            let targetCityList = data[currentPro];
            // 3.循环获取所有的市信息
            for (let i = 0; i < targetCityList.length; i++) {
                // 4.创建option标签
                let opEle = document.createElement('option');  // <option></option>
                // 5.添加内部文本
                opEle.innerText = targetCityList[i]
                // 6.添加value属性
                opEle.setAttribute('value', targetCityList[i])
                // 7.添加到第二个select标签内
                cityEle.append(opEle)
            }
        }
    }
</script>
</body>
</html>

jQuery(write less do more)

jQuary是一个轻量级的、兼容多浏览器的JavaScript库

jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery内部封装了原生的js代码(还额外添加了很多的功能)
能够让你通过书写更少的代码 完成js操作 
类似于python里面的模块  在前端模块不叫模块  叫 “类库”

兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题

jQuery的优势

1.一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
2.丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
3.链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4.事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
5.Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6.跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
7.插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

有了jQuery那我们还使用BOM与DOM吗？

一般情况都用jQuery可以使用BOM与DOM的功能，还额外添加了很多，用更少的代码，完成js操作，并且兼容多个浏览器。
因为原生js是最底层的，它的速度是最快的。
使用jQuery，它的内部封装了js，它会有一个转换，速度稍微慢一点(不影响)

jQuery导入

前端免费的cdn网站: https://www.bootcdn.cn/

导入方式

注意:使用jQuery必须要先导入(很容易忘)
     本质其实就是一个js文件
本地导入
     提前下载文件并导入
网络CDN服务
     只要计算机能够联网就可以直接导入
     CDN的概念:内容分发网络(加快服务器响应速度,别人可以快速访问到网站的资源)
     bootcdn

*导入的时候放入script标签中，那么建议是保存在本地一份，即使到了网络环境差的地方也可以使用，放在head标签里也可以，也可以放在body标签底部，那建议是将script标签的都放入body底部*

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
注意: 使用CDN的jQuery前提必须要有网络

jQuery提供的CDN服务优点与缺点

优点:
    好处在于无需下载文件，直接走网络请求使用
缺点:
    不好的地方在于必须要有网才可以使用

添加到自定义模板

jQuery基本使用

1.jQuery基本语法

秉持着jQuery的宗旨 "Write less,do more."

jQuery简写	$

演示:
jQuery()  === $()

2.JavaScript与jQuery语法相比

// JS操作代码，给p1改变字体颜色
undefined
let p5Ele = document.getElementsByTagName('p')[4]
undefined
p5Ele.style.color = 'yellow'
'yellow'
// jQuary代码操作
undefined
$('p').first().css('color','green').next().css('color','blue')
jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]

3.jQuery选择器查找标签之后的结果与js有何区别

结果集都是数组但是功能有区别
    1.如果使用索引取值 那么都是标签对象
        标签对象是无法调用jQuery提供的方法的
    2.标签对象如果想转换成jQuery对象需要使用 $()
        转换成jQuery对象的目的是为了使用jQuery提供的更多方法

$('p')
jQuery.fn.init(5) [p, p, p, p, p, prevObject: jQuery.fn.init(1)]
// jQuary对象，同时是一个数组，它包含着jQuary对象的方法，相当于是jQuary数组的一个对象
document.getElementsByTagName('p')
HTMLCollection(5) [p, p, p, p, p]
// 原生的js,它就是一个数组
// 它们俩个之间是可以互相转化的
document.getElementsByTagName('p')[0]
<p style=​"color:​ green;​">​很想一直快乐​</p>​
$('p')[0]
<p style=​"color:​ green;​">​很想一直快乐​</p>​
// 它们俩的结果是一样的
// 将标签对象转化为jQuary对象
$(document.getElementsByTagName('p')[0])
jQuery.fn.init [p]

jQuery查找标签

1.基本选择器
$('#d1')  id选择器
$('.c1')    class选择器
$('div')    标签选择器
2.组合选择器
$('div#d1')   查找id是d1的div标签
$('span.c1')  查找含有c1样式类的span标签
$('div,span,p')  查找div或者span或者p标签
$('#d1,.c1,span')  查找id是d1的或者class含有c1的或者span标签
3.层级选择器
$('div p')				查找div里面所有的后代p标签
$('div>p')			查看div里面的儿子p标签
$('div+p')			查看div同级别下面紧挨着的p标签
$('div~p')			查看div同级别下面所有的p标签
4.属性选择器
$('[username]')				查找含有username属性名的标签
$('[username="jason"]')			查找含有username属性名并且值等于Jason的标签
$('input[username="jason"]')  查看含有input的属性且属性名为username值为Jason的标签

基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$('li:first') 优化后 $('li').first()

代码练习

$('ul')
jQuery.fn.init [ul, prevObject: jQuery.fn.init(1)]
$('ul li')
jQuery.fn.init(6) [li, li, li, li, li, li, prevObject: jQuery.fn.init(1)]
// 想找里面第一个的话
undefined
$('ul li:first')
$('ul li:last')
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
// 索引等于index的那个元素
$('ul li:eq(2)')
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
// 匹配所有索引值为偶数的元素，从 0 开始计数
$('ul li:even')
jQuery.fn.init(3) [li, li, li, prevObject: jQuery.fn.init(1)]
// 匹配所有索引值为奇数的元素，从 0 开始计数
$('ul li:odd')
jQuery.fn.init(3) [li, li, li, prevObject: jQuery.fn.init(1)]

表单筛选器

:text   # 文本
:password  # 密文
:file   # 文件
:radio  # 单选框
:checkbox  # 多选框
:submit   # 提交
:reset      # 重置
:button   # 按钮

代码练习：

---->html代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<form action="">
    <p>username：<input type="text" disabled class="c" value="我要o泡果奶"></p>
    <p>password：<input type="password" class="c"></p>
    <p>日期：<input type="date" class="c"></p>
    <p>邮件：<input type="email" class="c"></p>
    <p>单选框：<input type="radio" class="c" checked></p>
    <p>单选框：<input type="radio" class="c" checked></p>
    <p>多选框：<input type="checkbox" class="c" checked></p>
    <p>提交：<input type="submit" class="c"></p>
    <p>重置：<input type="reset" class="c"></p>
    <p>按钮：<input type="button" class="c"></p>
    <select name="" id="">
        <option value="">111</option>
        <option value="" selected>222</option>
        <option value="">333</option>
    </select>
</form>
</body>
</html>

---->jQuery代码
$(':text')
jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
$('input[type="text"]')
jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
// 可以发现俩者是一样的
undefined
$(':password')
jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
$(':radio')
jQuery.fn.init(2) [input.c, input.c, prevObject: jQuery.fn.init(1)]0: input.c1: input.clength: 2prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)
$(':checked')
jQuery.fn.init(4) [input.c, input.c, input.c, option, prevObject: jQuery.fn.init(1)]

表单属性对象

:enabled
:disabled
:checked
:selected

disable 是什么意思呢？？就是这个标签只能看不能进行点击、输入等操作

:checked与:selected

要注意 :checked和:selected,前者在寻找的时候，可以将后者也包括在内，而后者在寻找的时候只能找到它自己，如果不要找到:selected那可以在前面设置一下标签过掉:selected

筛选器方法

1.下一个元素

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

2.上一个元素

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

3.父亲元素

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

4.儿子和兄弟元素

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>筛选器方法</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<p>111</p>
<p>222</p>
<div id="d2">div
    <span>444</span>
    <p>div>p
        <span id="d1">div>p>span</span>
    </p>
    <span>333</span>
</div>
<p>555</p>
<p>666</p>
</body>
</html>

1.查找下面的同级标签第一个
$divEle.next()
jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]
2.查找下面同级标签以下所有标签
$divEle.nextAll()
jQuery.fn.init(2) [p, p, prevObject: jQuery.fn.init(1)]
3.查找下面同级别标签第一个直到.p2为止(不包含最后一个)
$divEle.nextUntil('.p2')
jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]

...

操作标签

1.操作类js与jq的对比

js原生版本														
classList.add()										
classList.remove()								
classList.contains()							
classList.toggle()								


jQuery版本
addClass()			: 添加元素
removeClass()		: 移出某个类属性	
hasClass()			: 验证是否包含某个类属性
toggleClass()		: 有则删除无则添加 

2.操作标签样式(链式操作)

.css('样式名','样式值')		style.样式名 = '样式值'

执行链式操作

$('p').first().css('color','green').next().css('color','blue')

'原理解析：'
1.jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
2.jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法

链式操作在python中的本质

1.python代码实现链式操作本质

class MyClass(object):
    def func1(self):
        print('func1')
        // 必须要返回对象
        return self

    def func2(self):
        print('func2')
        return self
obj = MyClass()
obj.func1().func2()

2.jQuery链式操作的本质
对象在调用一个方法之后，对象还会返回回来，然后在调用其他方法，以此循环 jQuery本质。

3.位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
实际操纵练习

右侧滚动条距离顶部的长度
$(window).scrollTop()
7142.22216796875

$(window).scrollTop()
9920

$(window).scrollTop()
11475.5556640625

加了参数就是设置(回到顶部)
$(window).scrollTop(0)  
n.fn.init [Window]

$(window).scrollTop(500)
n.fn.init [Window]

4.尺寸操作

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

操作目标

1.文本高度
$('p').height() 
21

2.文本宽度
$('p').width()  
697

3.文本+padding 内高
$('p').innerHeight()  
27

4.文本+padding 内宽
$('p').innerWidth()   
702

5.文本+padding+border 边框(未设值)
$('p').outerHeight()  
27

6.文本+padding+border 边框(未设值)
$('p').outerWidth()   
702

5.文本操作

1.操作标签内部文本

js版本										
innerText	 : 操作文本											
innerHTML	 : 操作文件与标签 

jQuery版本
text()		: 括号内不加参数就是获取加了就是设置(只能操作文本内容)
html()		: 括号内不加参数就是获取加了就是设置(能操作文本与标签)
val()		：取得第一个匹配元素的当前值
val(val)	：设置所有匹配元素的值
val([val1, val2])：设置多选的checkbox、多选select的值

JQuery获取标签

$('div').text()
'要有所期待\n    444\n    div>p\n        div>p>span\n    \n    333\n'

$('div').html()
'要有所期待\n    <span>444</span>\n    <p>div&gt;p\n        <span id="d1">div&gt;p&gt;span</span>\n    </p>\n    <span>333</span>\n'

text设置文本

$('div').text('我们都是Jason的大宝贝')
jQuery.fn.init [div#d2, prevObject: jQuery.fn.init(1)]

HTML设置文本

$('div').html('今天最开心的时刻就是转头的那一刻')
w.fn.init [div, prevObject: w.fn.init(1)]

$('div').text('<h1>你们都是我的大宝贝</h1>')
w.fn.init [div, prevObject: w.fn.init(1)]

$('div').html('<h1>我一天天的比你们都紧张</h1>')
w.fn.init [div, prevObject: w.fn.init(1)]

注意:jQuery与js文本规律相同

6.属性操作

js版本	
setAttribute()
getAttribute()											
removeAttribute()										

jQuery版本	
attr(name,value)	 : 设置属性(两个参数设置)
attr(name)			: 获取属性(一个参数获取)
removeAttr(name)	 : 移出属性

实操练习

使用变量接收p标签
let $pELe = $('p')
undefined

获取id属性值
$pELe.attr('id')
'd1'

获取class属性值为空(标签内没有calss属性)
$pELe.attr('class')
undefined

创建名为class的类属性值为c1
$pELe.attr('class','c1')
jQuery.fn.init(2) [p#d1.c1, p#d2.c1, prevObject: jQuery.fn.init(1)]0: p#d1.c11: p#d2.c1length: 2prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)

修改id属性
$pELe.attr('id','newd1')
jQuery.fn.init(2) [p#newd1.c1, p#newd1.c1, prevObject: jQuery.fn.init(1)]0: p#newd1.c11: p#newd1.c1length: 2prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)

移出属性
$pELe.removeAttr('password')
jQuery.fn.init(2) [p#newd1.c1, p#newd1.c1, prevObject: jQuery.fn.init(1)]

获取p标签数据 
$('p')[0]

checkbox使用attr查询用户选择情况
针对选择按钮，checkbox radio option这些需要用户选择的，你在操作它的属性的时候，就不要使用attr。

1.查询id为d3的checked的选择情况           
$('#d3').attr('checked')  # 无效
"checked"
2.查询id为d2的checked的选择情况           
$('#d2').attr('checked')  # 无效
undefined
$('#d2').attr('checked')  # 无效
undefined
$('#d4').attr('checked')  # 无效
undefined
$('#d3').attr('checked')  # 无效
"checked"
3.给id为d3的checked并设置选择
$('#d3').attr('checked','checked')  # 无效
w.fn.init [input#d3]

对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox radio option是否被选中用prop

专门针对选择按钮的参数解决以上无效问题
prop独有作用:
        用户选择	 :  True
        用户未选择    :  False

解决checkbox使用attr查询用户选择时(无效问题)

在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。
为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")

checkbox使用prop Html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox使用prop</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<input type="checkbox" value="111" name="hobby" id="d2">d2
<input type="checkbox" value="222" name="hobby" checked id="d3">d3
<input type="checkbox" value="333" name="hobby" id="d4">d4
</body>
</html>

1.查询id为d2的选项是否选择
$('#d2').prop('checked')
false

2.查询id为d3查询的选项是否选择
$('#d3').prop('checked')
true

3.查询id为d4查询的选项是否选择
$('#d4').prop('checked')
false

4.prop设置值
$('#d3').prop('checked',true)
k.fn.init [input#d3]

5.prop取消值
$('#d4').prop('checked',false)
k.fn.init [input#d4]

prop和attr的属性

attr全称attribute(属性)
prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

总结一句话就是说，attr只能判断一些固定的死的，不能去判断动态的东西，像checked就属于动态的它不能够判断。prop就是专门的去做一些动态的判断例如：checked、redio、option。

7.文档处理

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

克隆，了解知识（clone（））

jQuery事件

JQuery绑定事件

JS绑定事件
	标签对象.on事件名 = function(){事件代码}
   		btnEle.onclick = function(){alert(123)}
jQuery绑定事件
	方式1
        jQuery对象.事件名(function(){事件代码})
            $btnEle.click(function(){alter(123)})
	方式2
    	  jQuery对象.on('事件名',function(){事件代码})
        	  $btnEle.on('click',function(){alter(123)})
 	"""
 	有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2
 	"""

常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})    # 键按下触发

克隆事件

默认情况下只会克隆它的标签，不会克隆它的点击事件，所以只能第一个点击进行克隆，而后面克隆出来的不能进行点击克隆。
但是如果想要更完美的克隆就是原封不动的全部克隆出来，就在clone()的括号里设置true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        .c1{
            border: 3px solid greenyellow;
            background-color: khaki;
        }
    </style>
</head>
<body>
<button id="d1" class="c1">哇咔咔！</button>
<script>
    let $btnEle = $('#d1');
    // 克隆事件
    $btnEle.click(function (){
        // this指代的是当前被操作的标签对象，不能直接点jquery方法的，需要转换为jQuery对象
        $('body').append($(this).clone(true))  // $(this)是当前按钮的jquery对象，然后把自己克隆一份，然后把克隆的这一份添加到body中去
    })
</script>
</body>
</html>

keydown和keyup事件组合

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>


<table border="1">
  <thead>
  <tr>
    <th>#</th>
    <th>姓名</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type="checkbox"></td>
    <td>Egon</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Alex</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Yuan</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>EvaJ</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Gold</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  </tbody>
</table>

<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选">


<script src="jquery-3.3.1.js"></script>
<script>

    var flag = false;
    // shift按键被按下的时候
    $(window).keydown(function (event) {
        console.log(event.keyCode);
        if (event.keyCode === 16){
            flag = true;
        }
    });
    // shift按键被抬起的时候
    $(window).keyup(function (event) {
        console.log(event.keyCode);
        if (event.keyCode === 16){
            flag = false;
        }
    });
    // select标签的值发生变化的时候
    $("select").change(function (event) {
        // 如果shift按键被按下，就进入批量编辑模式
        // shift按键对应的code是16
        // 判断当前select这一行是否被选中
        console.log($(this).parent().siblings().first().find(":checkbox"));
        var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");
        console.log(isChecked);
        if (flag && isChecked) {
            // 进入批量编辑模式
            // 1. 取到当前select选中的值
            var value = $(this).val();
            // 2. 给其他被选中行的select设置成和我一样的值
            // 2.1 找到那些被选中行的select
            var $select = $("input:checked").parent().parent().find("select")
            // 2.2 给选中的select赋值
            $select.val(value);
        }
    });
</script>
</body>
</html>

hover事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        .c1{
            border: 3px solid greenyellow;
            background-color: khaki;
        }
    </style>
</head>
<body>
<button id="d1" class="c1">哇咔咔！</button>
<p>压在我头上是吧</p>
<script>
    let $btnEle = $('#d1');
    // 克隆事件
    $btnEle.click(function (){
        // this指代的是当前被操作的标签对象，不能直接点jquery方法的，需要转换为jQuery对象
        $('body').append($(this).clone(true))  // $(this)是当前按钮的jquery对象，然后把自己克隆一份，然后把克隆的这一份添加到body中去
    })
    $('p').hover(function (){
        alert('你只能在下面呆着')
    },
    function (){
        alert('那好吧，，那我走了')
    })
</script>
</body>
</html>

监听事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        .c1 {
            border: 3px solid greenyellow;
            background-color: khaki;
        }
    </style>
</head>
<body>
<input type="text" id="d1">

<script>
    $('#d1').on('input', function () {
        console.log(this.value)
    })
</script>
</body>
</html>

阻止后续事件执行

能够触发form表单提交数据动作的标签有两个
	 <input type="submit">
  	 <button></button>
给已经有事件的标签绑定事件 会先执行绑定的 再去执行默认的
	我们也可以让标签之前的事件不执行
    	return false

$(':submit').click(function (e){
            alert('一定要细心 千万不要慌!!!')
            // return false  方式1
            e.preventDefault()方式2
        })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        .c1 {
            border: 3px solid greenyellow;
            background-color: khaki;
        }
    </style>
</head>
<body>
<p>
    username: <input type="text" name="username">
</p>
<input type="submit" value="提交"><button id="b1">点我</button>


<script>
    $(":submit").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>

冒泡事件

涉及到标签嵌套并且有相同事件的时候 那么会逐级往上反馈并执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        .c1 {
            border: 3px solid greenyellow;
            background-color: khaki;
        }
    </style>
</head>
<body>
<div>div
    <p>div>p
        <span>div>p>span</span>
    </p>
</div>

<script>
    $('div').click(function (){
        alert('div')
    })
    $('p').click(function (){
        alert('p')
    })
    $('span').click(function (e){
        alert('span')
        // return false  // 方式一
        e.stopPropagation()  // 方式二
    })
</script>
</body>
</html>

事件委托

"""
创建标签的两种方式
	JS
		document.createElement()
	jQuery
		$('<标签名>')
"""
事件绑定默认情况下是不会对动态创建的标签生效的 如果想生效需要事件委托
$('div').on('click','button',function () {
            alert('委托事件啦')
        })

将div标签里的所有点击事件都委托给button标签执行

上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签)

jQuery动画效果(了解)

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

用法：$(div).关键字(秒数)

Bootstrap页面框架

别人已经提前写好了一大堆css和js 我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能

版本有很多 使用V3即可

文件结构
	bootstrap.css
 	bootstrap.js
	ps:js部分是需要依赖于jQuery
  
CDN
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

pycharm自动提示问题
	最好本地导入几次

核心部分讲解

使用bootstrap其实只需要操作标签的样式类即可

布局容器
	class = "container"				有留白
 	class = "container-fluid"		 没有留白
栅格系统
	class = "row"					一行均分12份
		class = "col-md-8"			 划分一行的12份
屏幕参数
	col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
	col-md-offset-3

重要样式

1.表格样式
	<table class="table table-hover table-striped">
	颜色
 	 <tr class="success">
2.表单标签
	class = "form-control"
3.按钮组
	class = "btn btn-primary btn-block"

组件

1.图标
	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
	https://fontawesome.com.cn/
2.导航条
	class="navbar navbar-inverse"
3.其他