JavaScript基础

JavaScript初识

1.JavaScript基础

PS:任何编程语言的学习流程

  • 变量
  • 数据类型
  • 流程控制
  • 函数
  • 对象
  • 内置方法/模块

1.1、JavaScript简介

  1. js是一门可以编写前端和后端的编程语言
  2. ECMAScript和JavaScript的关系：前者是后者的规格，后者是前者的一种是实现
  3. js版本：主要还是用5.1和6.0版本
  4. 特点
    • JavaScript是一门脚本语言
    • JavaScript是一种轻量级的编程语言
    • JavaScript是可插入HTML页面的编程代码
    • JavaScript插入HTML页面后，可有所有的现代浏览器执行
    • JavaScript是很容易学的

1.2、JavaScript的注释

/单行注释/
/*
多行注释1
多行注释2
多行注释3
*/

1.3、JavaScript的引入方式

  1. script标签内些js代码

    <script>
JS代码
</script>

  2. 引入外部JS文件(最正规的方式)

    <script src="myscript.js"></script>

1.4、JavaScript变量与常量

  1. 变量

    • JS的变量名可以用数字、字母、下划线、$命名，不能以数字开头

    • 声明变量要使用关键字var、let

      // 方式一
var name = 'jason'

// 方式二
let name = 'jason'

    • var和let的区别

      • var声明的变量是全局变量（5.1版本）
      • let声明的变量是局部变量（6.0版本）

  2. 常量

    • 在python中没有真正意义上的常量，它的常量定义是全部用大写

    • 在JavaScript中是有真正意义上的常量的，需要使用关键字const

      """python中定义常量"""
USERNAME = 'jason'

"""JavaScript中定义常量"""
const pi = 3.14

1.5、JavaScript的数值类型（number）

  1. JS中的整型和浮点型都是属于数值类型

  2. 类型转换

    • parseInt()：转换为整型
    • parseFloat()：转换为浮点型

  3. 注意：NaN也是数值类型，表示不是一个数字

    var a = 11;
typeof a;
>>> number

var b = 11.11;
typeof b;
>>> number

// 类型转换
parseInt()  // 转化成整形
parseFloat() // 转化成浮点型

parseInt(b)
>>> 11 // 这里要注意js中把浮点型转化成整形的时候会忽略小数点后的数字
parseFloat(a)
>>> 11

// js也支持把字符串转化成整形或者浮点型
parseInt('123asda123')
>>> 123 // 遇到非数字就停止取值

parseFloat('123.12asdas')
>>> 123.12

parseInt('asdasds123')
>>> NaN // 如果开头就是字母的话会显示NaN类型  not a number

// 小区分点
// js在转化字符串为整形或者浮点型的时候如果出现了非法数字组合不会报错，按常规的取
parseInt('1237.123.123asd')
>>> 1237
parseFloat('1237.123.123asd')
>>> 1237.123

1.6、字符类型（string）

  1. JS中的字符串可以使用单引号、双引号、反单引号（支持写多行）

  2. 格式化输出：$

  3. 字符串的拼接：+

    // js中字符串用单引号'' 双引号"" 或者反引号 ``（支持写多行）
var name = 'hz'
var age = "18"
typeof name
>>> string

// 格式化输出 $
var sss = `
	my name is ${name} age is ${age}!
`
>>> my name is hz age is 18

// 字符串拼接 +
name+age
>>> hz18
name+19
>>> hz19

  4. 字符类型常用方法

    `
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割
`
var a = 'hz'
var b = ' asd '

// .length
a.length
>>> 2

// .trim() #如果不用新名字接受就不会改变b的值  只能去除空格
// trimLeft() trimright() 左去除和右去除和去除用法相同
b.trim()
>>> asd

// .charAt(n)
a.charAt(1)
>>> z

// .concat(value1,value2....)  js是弱类型语言，遇到不同类型之间的操作会自动转换
a.concat(123,'asdas',123)
>>> hz123asdas123

// .indexOf(查找的字符，起始查找位置)
b.indexOf(' ')
>>> 0
b.indexOf(' ',1)
>>> 4

// .substring(起始索引位置，结束索引位置) 都可以不写，起始不写是0，结束不写是末尾（不是最后一个，因为顾头不顾尾） 但是不识别负数
var sss = 'hz is dsb'
sss.substring(3,5)
>>> is

// .slice(起始索引位置，结束索引位置) 用法和substring一样，但是支持负数（推荐）
sss.slice(0,-1)
>>> hz is ds

// .toLowerCase() 全部小写 
// .toUpperCase()用法相同
sss.toLowerCase()
>>> HZ IS DSB

// .split(切割依据，切割后的元素的个数)
var x = 'hz,is,d,d,sb'
x.split(",")
>>> ['hz','is','d','d','sb']
x.split(",",4)
>>>  ["hz", "is", "d", "d"]

1.7、布尔值（boolean）

  1. true：真
  2. false：假
  3. 得出false的元素：空字符串、0、null、undefined、NaN

1.8、null和undefined

  1. null表示空
    • 空表示一个状态，一个物体是空的，表示用空这种状态去填满它
    • 一般指定null或者清空一个变量时使用
  2. undefined表示无
    • 无是真的没有，和空有区别
    • 一般指在定义一个变量时没有赋值，函数没有返回值，返回的也是undefined

1.9、运算符

  1. 算数运算符
    • ++表示自增 类似于 +=1
    • i++：先赋值，后自加
    • ++i：先自加，后赋值
  2. 比较运算符
    • ==：弱等于，内部会自动转换成相同的数据类型再进行比较
    • ===：强等于，和后端的逻辑一样严谨
    • !=：弱不等于，内部会自动转换成相同的数据类型再进行比较
    • !==：强不等于，和后端的逻辑一样严谨
  3. 逻辑运算符
    • &&：与
    • ||：或
    • ！：非
  4. 赋值元素运算符
  • 和python中的一样

  1. 三元运算符

    • 变量名 = 条件?条件成立的值:条件不成立的值

  2. 具体示例

    // 算数运算符
var x = 10
var res1 = x++;
var res2 = ++x;
res1 10
res2 12
++表示自增1 类似于 +=1
加号在前先加后赋值 加号在后先赋值后加

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

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

1 != '1'
false
1 !== '2' // 强不等于
true

//逻辑运算符
// python中 and or not
//js中 && || !
5 && '5'
'5'

0 || 1
1

!5 && '5'
false

"""
一定要注意到底什么时候返回的是布尔值 什么是返回的是数据
按照后端逻辑理解吧 js这块看看就行了
"""

// 赋值运算符
= += -= *= ....

// 三元运算符
// python中三元运算符 res = 1 if 1>2 else 3
// JS中三元运算  res = 1>2?1:3
// 名字 = 条件?条件成立的值：条件不成立的值
var res = 2>5?8:10 // 10

1.10、流程控制

  1. if条件

    • 模板：if(条件)

      // if(条件){条件成立后执行的代码}
if (age>18){
  console.log('来啊 来啊')
}
// if-else
if (age>18){
  console.log('来啊 来啊')
}else{
  console.log('没钱 滚蛋')
}
// if-else if else
if (age<18){
  console.log("培养一下")
}else if(age<24){
  console.log('小姐姐你好 我是你的粉丝')
}else{
  console.log('你是个好人')
}

  2. switch分支

    // switch 提前写好出现的条件和解决方式
var num = 2;
switch(num){
  case 0:
  	console.log('喝酒');
  	break;  // 不加break 匹配到一个之后 就一直往下执行
  case 1:
  	console.log('唱歌');
  	break;
  case 2:
  	console.log('洗脚');
  	break;
  case 3:
  	console.log('按摩');
  	break;
  case 4:
  	console.log('营养快线');
  	break;
  case 5:
  	console.log('老板慢走 欢迎下次光临');
  	break;
  default:
  	console.log('条件都没有匹配上 默认走的流程')
}

  3. for循环

    // for循环
// 打印0-9
for(let i=0;i<10;i++){
    console.log(i)
}

  4. while循环

    // while循环
var i = 0
while(i<100){
  console.log(i)
  i++;
}

1.11、函数

  1. 格式

    function 函数名(形参1,形参2,形参3...) {函数体代码}

  2. 普通函数定义

    function f1() {
    console.log("hello world")
}

  3. 带参函数定义

    function f2(arg1,arg2) {
    console.log(arguments); //内置的arguments对象
    console.log(arguments.length); //输出参数个数
    console.log(arg1+arg2);
}

  4. 带返回值的函数

    • 函数只能返回一个值，如果要返回多个值，只能将其放在数组或者对象中返回
    function f3(a,b) {
    reture a+b;
}
var res = f3(1,2);//调用函数
res //3


function f4(a,b) {
    reture a+b,11,22,33,44,55,66;
}
var res = f4(1,2) //66

  5. 匿名函数

    var f5 = function(a,b) {
    return a+b;
}
f5(1,2);

  6. 箭头函数

    var f6 = v => v;  //箭头左边的是形参，右边的是返回值
等价于
var f6 = function(v) {
    return v;
}

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

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

    • 和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

# 第三题
var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();  // 打印结果是？
ShangHai

1.12、对象

JavaScript中的所有事物都是对象，一切皆对象

  1. 数组（类似于python中的列表）[]

    • 方法

      """
.length           数组大小
.push(ele)        尾部追加元素
.pop()            获取尾部的元素
.unshift(ele)     头部插入元素
.shift()          头部移除元素
.slice(start,end) 切片
.revarse()        反转
.join(seq)        将数组元素连接成字符串
.concat(val,...)  连接数组 
.sort()           排序 
forEach()         将数组的每个元素传递给回调函数
.splice()         删除元素，并向数组添加新的元素
.map()            返回一个数组元素调用函数处理后的新数组
"""

    • 具体使用

      var l = [11,'aa',true,null,undefined] // 可以存放任意值
typeOf l
>>> 'object'

l[1] // 不支持负数索引
>>> 'aa'

// .length 显示长度
// .push(添加的元素1，元素2。。。)
l.push(123,456)
>>> [11,'aa',true,null,undefined,123,456]

// .pop() 删除最后一个元素
l.pop()
>>> [11,'aa',true,null,undefined,123]

// .unshift(在最开头加的元素1，元素2...)
l.unshift(0,1)
>>> [0,1,11,'aa',true,null,undefined,123]

// .shift() 删除开头元素
l.shift()
>>> [1,11,'aa',true,null,undefined,123]

// .slice(起始节选，结束节选) 顾头不顾尾
l.slice(0,3)
>>> [1,11,'aa']

// .reverse() 反转
var a = [1,2,3,'aa']
>>> ["aa", 3, 2, 1]

// .join 拼接字符串
a.join(",")
>>> "aa,3,2,1"

// .concat(拼接的对象1，2，3...) 可以是任意数据类型
a.concat(a)
>>>  ["aa", 3, 2, 1, "aa", 3, 2, 1]

// . sort() 排序 方式和python中相同
a.sort()
>>> 1,2,3,'aa'


// forEach 和 map 都会把对象里的每一个元素放到内部的函数中处理，forEach会修改原来的对象，而map会得到一个新的对象
// 都可以对内部函数传三个参数，分别是，元素、元素索引、元素数据来源（对象）
// 最少写一个，最多写三个

// .forEach(function(元素，元素索引，元素数据来源){函数体代码},对象)
// 参数最少1个最多三个
ll.forEach(function(value,index,arr){console.log(value,index,arr)},ll)  
VM2430:1 111 0 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 222 1 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 333 2 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 444 3 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 555 4 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 666 5 (6) [111, 222, 333, 444, 555, 666]

// .splice(起始位置，删除元素个数,删除后添加的对象) 第三个参数可不写
var l = [1,2,3,4,5,6]
l.splice(1,2,['aa',123])
>>> [1, Array(2), 4, 5, 6]

// .map()  
var l1 = [11,22,33,44,55,66]
undefined
l1.map(function(value){console.log(value)},l1)
VM3115:1 11
VM3115:1 22
VM3115:1 33
VM3115:1 44
VM3115:1 55
VM3115:1 66
l1.map(function(value,index){return value*2},l1)
(6) [22, 44, 66, 88, 110, 132]
l1.map(function(value,index,arr){return value*2},l1)
(6) [22, 44, 66, 88, 110, 132]

    • 重点掌握

      • forEach()

        • 语法：forEach(function(currentValue,index,arr),thisValue)

        • 参数

          image-20200818193217160

        • 具体使用

          image-20200818193259360

          image-20200818193611575

      • splice

        • 语法：splice(index,howmany,item1,....,itemX)

        • 参数

          image-20200818193951385

      • map()

        • 语法：map(function(currentValue,indedx,arr),thisValue)

        • 参数

          image-20200818194147862

        • 具体使用

          image-20200818194228563

    • 注意事项

      """
关于sort()需要注意：

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)
"""

    • 类型查询(typeof)

      • typeof是一个一元运算符（就像++、—、！等一元运算符）不是一个函数，也不是一个语句。
      • 对变量或者调用typeof运算符将返回下列值之一：
        • undefined： 如果变量是 Undefined 类型的
        • boolean：如果变量是Boolean类型的
        • number：如果变量是Number类型的
        • string：如果变量是String类型的
        • object：如果变量是一种引用类型或者是Null类型的

  2. 自定义对象

    可以看做是python中的字典，但是JS里的自定义对象操作更加简单

    • 创建方式

      // 第一种创建自定义对象的方式 
var d1 = {'name':'hz','age':18}

d1['name'] 
>>> hz
d1.name
>>> hz
for (let i in d1){
    console.log(i,d1[i])
} 
>>>name hz
>>>age 18

// 第二种创建自定义对象的方式
var d2 = new Object()  

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

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

  3. Data对象

    • 创建方式

      let d3 = new Data()
Fri May 15 2020 14:41:06 GMT+0800 (中国标准时间)

d3.toLocaleString()
"2020/5/15 下午2:41:06"

// 也支持自己手动输入时间
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 Data()
d6.getData()         获取日
d6.getDay()		     获取星期
d6.getMonth()		 获取月份(0-11)
d6.getFullYear()	 获取完整的年份
d6.getHours()	     获取小时
d6.getMinutes()		 获取分钟
d6.getSeconds()		 获取秒
d6.getMilliseconds() 获取毫秒
d6.getTime()         时间戳
"""

  4. json对象

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

在js中也有序列化反序列化
	JSON.stringify()								dumps
	JSON.parse()									loads			
"""

# 具体使用
let d7 = {'name':'jason','age':18}
let res666 = JSON.stringify(d7)
"{"name":"jason","age":18}"

JSON.parse(res666)
{name: "jason", age: 18}

  5. RegExp对象

    • 书写方式

      let 名字 = new RegExp(正则匹配规则)
let 名字 = /正则匹配规则/

    • 具体使用

      let reg = /^[a-zA-Z][a-zA-A0-9]{5,11}/ 匹配任意数字字母 长度5-11

var a = 'asdas123s'
sss.match(/s/)  // 拿到一个s就停止了
sss.match(/s/g)	// 全局匹配  g就表示全局模式

sss.match(/s/)
["s", index: 5, input: "egondsb dsb dsb", groups: undefined]

sss.match(/s/g)
["s", "s", "s"]

    • 槽点

      // 全局匹配模式吐槽点
// 全局模式有一个lastIndex属性，第一次找到结束，lastindex指向最后一个元素，下一次查找从他开始，所以下一次查找就会找不到，如果出现找不到，lastIndex会重新指向开头

let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g
reg2.test('egondsb')

reg3.test('egondsb')  
true
reg3.test('egondsb')
false
reg3.test('egondsb')
true
reg3.test('egondsb')
false
reg3.lastIndex
0
reg3.test('egondsb')
true
reg3.lastIndex
7
// 如果什么都不传，默认是undefined
let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test()

reg4.test()  
true
reg4.test()
true

reg4.test(undefined)
true
let reg5 = /undefined/
undefined
reg5.test('jason')
false
reg5.test()
true

  6. Math对象

    """
abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。
"""

2、JavaScript进阶

  • 引子
    • BOM
      • 浏览器对象模型（Borwser Object Model）
      • js代码操作浏览器
    • DOM
      • 文档对象模型（Document Object Model）
      • js代码操作HTML标签

2.1、BOM操作

2.1.1、window对象

// window对象指的是浏览器窗口

window.innerHerght //当前浏览器窗口的高度
900
window.innerwidth  //当前浏览器窗口的宽度
1680

window.open('https://www.baidu.com','','heigth=400px,width=40px,top=400px')
// 新建窗口打开页面后，第二个参空即可，第三个参数写新建的窗口的大小和位置
// 父子页面通信window.opener() 了解

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

2.1.2、window子对象

window.navigator.appName # 获取浏览器名称
>>> "Netscape"

window.navigator.appVersion # 获取浏览器版本
>>> "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36"

window.navigator.userAgent # 检查当前访问是否是一个浏览器（需要掌握）
>>> "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36"
# 当我们使用那个代码去访问浏览器的时候是不会有userAgent的，所以最简单的反爬措施就是检验请求者发起的userAgent，反反爬就是在代码中加入userAgent就能破解

window.navigator.platform # 当前硬件平台
>>> "Win32"

# 对以上的window子对象中的window都可以省略

2.1.3、history对象

window.history.back() # 回退到上一页
window.history.forword() # 前进到下一页
# 对应的是浏览器左上角的两个箭头

2.1.4、location对象（掌握）

window.location # 获取全部的location里的值
>>> Location {            href:"https://www.cnblogs.com/hz2lxt/p/12911538.html#%E5%BC%95%E5%AD%90", 
    ancestorOrigins: DOMStringList,
    origin: "https://www.cnblogs.com", 
    protocol: "https:", 
    host: "www.cnblogs.com", …}

window.location.href # 获取当前页面的url
>>> "https://www.cnblogs.com/hz2lxt/p/12911538.html#%E5%BC%95%E5%AD%90"

window.location.href='https://www.baidu.com' # 跳转到指定的url

window.location.reload() # 重新刷新页面

2.1.5、弹出框

# 警告框
alter('你个憨儿子')
# 弹出一个框，显示文字'你个憨儿子'，还有一个确认按钮

# 确认框
confirm('别bb')
# 弹出一个框，显示文字'别bb'，还有一个确认按钮和一个取消按钮
# 按下确认代码返回true，按下取消代码返回false

# 提示框
prompt('别争了，给你给你','那就快点')
# 弹出一个框，显示文字'别争了，给你给你'，下面还有一个input框，默认显示'那就快点'，这个input框里的内容还可以修改
# 按下确认按钮代码就会返回输入的内容，按下取消代码就会返回null

2.1.6、计时器相关

  • 单次计时器

    <script>
	function func1() {
        alter(123)
    }
    let t = setTimeout(func1,3000) // 以毫秒为单位，单次计时器
    
    clearTimeout(t) // 取消定时任务，定时是异步，所以会直接取消。
</script>

  • 循环定时器

    <script>
	fnction func2() {
        alter(123)
    }
   let t = setInterval(func2,3000) // 以毫秒为单位，循环计时器
  
   clearInterval(t) // 取消定时任务，定时是异步，所以会直接取消
</script>

    <script>
   function func2(){
    alter('hz is dsb')
}
	function show(){
        let t = setInterval(func2,3000) // 设定循环定时器，只要按掉就会重新计时
        function inner(){
            clearIntercal(t) // 清除定时器
        }
        setTimeout(inner,9000) // 9秒后触发清除定时器
    }
show()
</script>

2.2、DOM操作

2.2.1、HTML DOM树

image-20200820214814134

  • DOM标准规定HTML文档中的每个成分都是一个节点（node）
    • document对象（文档节点）：代表整个文档
    • element对象（元素节点）：代表一个元素（标签）
    • text对象（文本节点）：代表元素（标签）中的文本
    • attribute对象（属性节点）：代表一个属性，元素（标签）才有属性
    • comment对象：注释是注释节点

2.2.2、查找标签

  1. 直接查找

    document.getElementById()		  # 根据id值获取一个标签
document.getElementsByClassName()  # 根据class值获取一个标签列表
document.getElementsTagName()      # 根据标签名获取一个标签列表

  2. 间接查找

    """
步骤：
	1.要先通过直接查找找到具体的某个标签
	2.再使用间接查找的方式查找其他标签
"""
parentElement			# 父节点标签元素
children				# 所有子标签
firstElementChild       # 第一个子标签元素
lastElementChild	    # 最后一个子标签元素
nextElementSibling      # 同级标签的下一个兄弟标签
previousElementSibling  # 同级标签的上一个兄弟标签

2.2.3、节点操作

  1. 创建img节点示例

    let imgEle = document.createElement('img') // 创建img标签

imgEle.src = '111.png' // 给标签设置默认属性，自定义属性不能这样创建
imgEle.setAttribute('src','111.png') 
imgEle.setAttribute('username','jason') // 推荐使用这种方式，无论是默认属性还是自定义属性都可以设置

let divEle = document.getElementById('d1') // 获取一个具体的标签对象
divEle.appendChild(imgEle) // 将img标签添加到div内部的最后

  2. 创建a标签示例

    let aEle = document.create('a') // 创建一个a标签

aEle.href = 'https://www.baidu.com' // 给a标签设置默认属性
aEle.innerText = '百度一下' // 给标签设置文本内容

let divEle = document.getElementById('d1')
let pEle = document.getElementById('d2')

divEle.insertBefore(aEle,pEle) // 添加标签内容指定位置添加
// 在div内，p标签前

  3. innerText和innerHTML的区别

    • innerText只能获取标签内所有的文本，innerHTML能够获取标签内所有的文本内容并且识别HTML代码

    • innerText在设置标签文本时只能设置文本，不识别HTML代码，innerHTML在设置标签文本时不仅可以设置文本，还识别HTML代码

      # innerText 和innerHTML的区别
divEle.innerText  # 获取标签内部所有的文本
# 所以在设置的时候也只能设置文本，不会识别内部的标签语法
    "id = d1 div2
    div>p
    div>span"
    
divEle.innerHTML # 获取标签内部的所有标签加文本
# 设置的时候会识别标签语法
" id = d1  div2
    <p id="d2" class="c1">div&gt;p</p>
    <span>div&gt;span</span>
"
divEle.innerText = '<h1>heiheihei</h1>'  # 不识别html标签
divEle.innerHTML = '<h1>hahahaha</h1>'  # 识别html标签

  4. 总结

    """
1.创建节点
	语法：document.createElement(标签名)
	示例：let divEle = document.createElement('div');

2.添加节点
	方法一：
        语法：节点名.appendChild(待插节点)
        示例：let pEle = document.createElement('p')
             let divEle = document.getElementById('d1')
             divEle.appendChild(pEle)
    方法二：
    	语法：节点名.insertBefore(待插节点，被插节点)
    	示例：let pEle = document.createElement('p')
             let divEle = document.getElementById('d1')
             let aEle = document.getElementById('d2')
             divEle.insertBefore(pEle,aEle)
3.删除节点
	语法：document.removeChild(待删节点)
	示例：let divEle = document.getElementById('d1')
		 let pEle = document.getElementById('d2')
		 divEle.removeChild(pEle)
4.替换节点
	语法：document.replaceChild()
5.设置属性
	语法：setAttribute()
	获取属性：getAttribute()
	移除属性：removeAttribute()
"""

2.2.4、获取值操作

  1. 获取值操作是获取用户输入的、选择的，获取的是像input、select、textarea等标签里面的value值

    # 获取用户数据标签内部的数据
let seEle = document.getElementById('d1')
seEle.value # 获取的是标签内部的value值
"111"

let inputEle = document.getElementById('d2')
inputEle.value # 获取输入框输入的值
"123"

  2. 文件获取

    # 文件获取
fileEle.value   # 获取的只是文件的路径
"C:\fakepath\a.txt"

fileEle.files
FileList {0: File, length: 1} # 获取的是一个数组

fileEle.files[0] # 获取的是文件数据
File {name: "a.txt", lastModified: 1587783848425, lastModifiedDate: Sat Apr 25 2020 11:04:08 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 637, …}

2.2.5、CSS操作

  1. 语法：节点名.style.样式名=“样式”

    divEle.style.backgroundColor='red'
spanEle.style.fontSize='32px'

  2. 注意

    • 对于没有中间线的CSS属性，一般直接用style.属性名即可

      divEle.style.margin='200px'
divEle.style.width='200px'
divEle.style.left='200px'
div.style.position='fixed'

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

      divEle.style.marginTop='200px'
divEle.style.fontSize='32px'

2.2.6、class操作

  1. 具体方法

    """
className					 获取标签所有的class值（返回字符串）
classList.remove(class值)    删除指定的class值
classList.add(calss值)       添加指定的class值
classList.contains(class值)  判断是否存在指定的class值，存在返回true，不存在返回false
classList.toggle(class值)    标签内存在指定的class值，就删除，不存在就添加
"""

  2. 具体操作

    let divEle = document.getElementById('d1')

divEle.classList # 获取标签的所有类属性，放在一个数组内
DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]
# 可以通过数组的方法对内部的属性进行增删改

divEle.classList.remove('bg_red')  # 移除某个类属性

divEle.classList.add('bg_red')  # 添加类属性

divEle.classList.contains('c1')  # 验证是否包含某个类属性
true
divEle.classList.contains('c2')
false

divEle.classList.toggle('bg_red')  # 有则删除无则添加
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false

2.3、事件

3.3.1、事件简介

  1. 介绍：HTML4.0的新特性之一是有能力使HTML事件触发浏览器中的动作（action），比如当用户点击某个HTML元素时启动的一段JavaScript代码。

  2. 常用事件

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

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

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

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

3.3.2、绑定方式

  1. 方式一

    <button onclick="func1()">点我</button>

<script>
	function func1() {
        alter(123)
    }
</script>

  2. 方式二（推荐）

    <button id='d1'>点我</button>

<script>
	let btnEle = document.getElementById('d1')
    btnEle.onclick = function () {
        alter(123)
    }
</script>

3.3.3、原生JS事件绑定

  1. 开关灯案列

    <div id='d1' class='c1 bg_red bg_green'></div>
<button id='d2'>变色</button>

<script>
	let dvEle = document.getElementById('d1');
    let btnEle = document.getElementById('d2');
    btnEle.onclick = function () { //绑定事件
        //动态修改div标签的类属性
        divEle.classList.toggle('bg_red') 
    }
</script>

  2. input框获取焦点失去焦点案例

    <input type='text' value='老板去吗？' id='d1'>

<script>
	let inpEle = document.getElementById('d1');
    //获取焦点事件
    inpEle.onfocus = function () {
        //将input框内部值去除
        inpEle.value = ''
        // .value就是获取  等号赋值就是设置
    }
    // 失去焦点事件
    inpEle.onblur = function () {
        // 给input标签重新赋值
        inpEle.value = '没钱 不去！'
    }
</script>

  3. 实时展示当前时间

    <input type="text" id="d1" style="display: block;height: 50px;width: 200px">
<button id="d2">开始</button>
<button id="d3">结束</button>

<script>
    // 先定义一个全局存储定时器的变量
    let t = null
    let inputEle = document.getElementById('d1')
    let startBtnEle = document.getElementById('d2')
    let endBtnEle = document.getElementById('d3')
    // 1 访问页面之后 将访问的时间展示到input框中
    // 2 动态展示当前时间
    // 3 页面上加两个按钮 一个开始 一个结束
    function showTime() {
        let currentTime = new Date();
        inputEle.value = currentTime.toLocaleString()
    }

    startBtnEle.onclick = function () {
        // 限制定时器只能开一个
        if(!t){
            t = setInterval(showTime,1000)  // 每点击一次就会开设一个定时器 而t只指代最后一个
        }
    }
    endBtnEle.onclick = function () {
        clearInterval(t)
        // 还应该将t重置为空
        t = null
    }
</script>

  4. 省市联动

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<select name="" id="d1">
    <option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="d2"></select>

<script>
    let proEle = document.getElementById('d1')
    let cityEle = document.getElementById('d2')
    // 先模拟省市数据
    data = {
        "河北": ["廊坊", "邯郸",'唐山'],
        "北京": ["朝阳区", "海淀区",'昌平区'],
        "山东": ["威海市", "烟台市",'临沂市'],
        '上海':['浦东新区','静安区','黄浦区'],
        '深圳':['南山区','宝安区','福田区']
    };
    // 选for循环获取省
    for(let key in data){
        // 将省信息做成一个个option标签 添加到第一个select框中
        // 1 创建option标签
        let opEle = document.createElement('option')
        // 2 设置文本
        opEle.innerText = key
        // 3 设置value
        opEle.value = key  // <option value="省">省</option>
        // 4 将创建好的option标签添加到第一个select中
        proEle.appendChild(opEle)
    }
    // 文本域变化事件  change事件
    proEle.onchange = function () {
        // 先获取到用户选择的省
        let currentPro = proEle.value
        // 获取对应的市信息
        let currentCityList = data[currentPro]
        // 清空市select中所有的option
        cityEle.innerHTML = ''
        // 自己加一个请选择
        let ss = "<option disabled selected>请选择</option>"
        // let oppEle = document.createElement('option')
        // oppEle.innerText = '请选择'
        // oppEle.setAttribute('selected','selected')
        cityEle.innerHTML = ss

        // for循环所有的市 渲染到第二个select中
        for (let i=0;i<currentCityList.length;i++){
            let currentCity = currentCityList[i]
            // 1 创建option标签
            let opEle = document.createElement('option')
            // 2 设置文本
            opEle.innerText = currentCity
            // 3 设置value
            opEle.value = currentCity  // <option value="省">省</option>
            // 4 将创建好的option标签添加到第一个select中
            cityEle.appendChild(opEle)
        }
    }
</script>
</body>
</html>

3、jQuery基础

3.1、基本介绍

  1. 介绍：jQuery是一款轻量级的、兼容多浏览器的JavaScript库。其内部封装了原生的JS代码，能让我们通过写更少的代码实现更多的功能

  2. 导入方式

    • 直接下载到本地，结合pycharm走动初始化代码处修改

      image-20200822071252870

    • 基于CDN服务直接导入（需要网络）

      国内免费的CDN服务：https://www.bootcdn.cn/

      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  3. jQuery基本语法

    """
jQuery(选择器).action()
等价于
$(选择器).action()      推荐
"""
选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件

3.2、选择器

3.2.1、基本选择器

  1. id选择器

    $('#d1')

  2. class选择器

    $('.c1')

  3. 标签选择器

    $('span')

  4. 所有元素选择器

    $('*')

  5. 配合使用

    $('div.c1') //找到带有class值是c1的div标签

  6. 组合选择器

$('#d1,.c1,span')

3.2.2、层级选择器

  1. 后代选择器

    $('x y') // x的所有后代y(子子孙孙)

  2. 儿子选择器

    $('x>y') // x的所有儿子y

  3. 毗邻选择器

    $('x+y') // 找到所有紧挨着x后面的一个y

  4. 弟弟选择器

    $('x~y') // 找到x后面的所有y

3.2.3、属性选择器

"""
$(['username']) 			 # 选择所有带有username属性的标签
$('[username="jason"]') 	 # 选择所有带有username="jason"属性的标签
$('input[username="jason"]') # 找到所有带有username="jason"属性的input标签
"""

3.3、筛选器

3.3.1、基本筛选器

  1. 具体方法

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

  2. 简便写法

    .first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

  3. 例子

    $('ul li:first') # 取第一个子标签
# 注意所有选择器内部：后面的方法都可以拿出来写
$('ul li').first() == $('ul li:first') 

$('ul li:last') # 最后一个子标签

$('ul li:eq(2)') # 取索引为2的标签（第三个！）

$('ul li:even') # 所有偶数索引标签 包括0

$('ul li:odd') # 所有奇数索引标签

$('ul li:lt(2)') # 索引小于索引为2的标签 不包括2

$('ul li:gt(2)') # 索引大于索引为2的标签 不包括2

$("ul li:not('#d1')") # 移除满足条件的标签

$('div:has("p")') #选择包含p标签的div标签

3.3.2、表单筛选器

  1. 提出前提：结合了选择器中的属性选择器，对其进行简写，真正做到write less do morn

  2. 具体方法

    """
$('input[type="text"]')  ==  $(':text')
由上面可推导出
$('input[type="text"]')  ==  $(':text')
$('input[type="password"]')  ==  $(':password')
$('input[type="file"]')  ==  $(':file')
$('input[type="radio"]')  ==  $(':radio')
$('input[type="checkbox"]')  ==  $(':checkbox')
$('input[type="submit"]')  ==  $(':submit')
$('input[type="reset"]')  ==  $(':reset')
$('input[type="button"]')  ==  $(':button')
"""

"""
具体方法：
	:text
    :password
    :file
    :radio
    :checkbox
    :submit
    :reset
    :button
    表单对象属性：
        :enabled
        :disabled
        :checked
        :selected
"""

  3. 特殊情况

    $(':checked') # 他将含有checked的input标签，和selected的option标签都拿到

$(':selected') # 他不会拿到含有checked的input标签，他只拿含有selected的select标签

解决方法：给标签加上一个限制条件
$('input:checked')

3.3.3、筛选器方法

  1. 具体方法

    # 1 下一个元素
	# .next()		    下面一个元素
    # .nextAll()        下面所有的元素
    # .nextUntil(选择器) 下面所有的元素直到选择器的元素为止 
    
# 2 上一个元素
	# .prev()		    上面一个元素
    # .prevAll()        上面所有的元素
    # .prevUntil(选择器) 上面所有的元素直到选择器的元素为止 
# 3 父级元素
	# .parent()           父亲元素
    # .parents()          父辈元素
    # .parentUntil(选择器) 父辈元素直到选择器的元素为止
# 4 儿子和兄弟选择器
	# .children()  儿子们
    # .siblings()  兄弟们

  2. 示例

    $('#d1').next() # id=d1标签的下一个

$('#d1').nextAll() # 下面全部

$('#d1').nextUntil('.c1') # 下面直到继承类c1的标签

$('.c1').prev() # 上面一个

$('.c1').prevAll() # 上面全部

$('.c1').prevUntil('#d2') #上面直到

$('#d3').parent() # 父标签

$('#d3').parent().parent() # 爷标签

$('#d3').parents() # 所有父标签

$('#d3').parentsUntil('body') # 取所有父标签直到body

$('#d2').children() # 所有的第一层子标签

$('#d2').siblings() # 所有同级别标签

3.4、样式操作

3.4.1、class操作

  1. js和jQuery对比

    """
js中								jQuery中
	classList.add()         		addClass()     
	classList.remove()   			removeClass()   
	classList.contains()  			hasClass()      
	classList.toggle()				toggleClass()   
"""
"""注意：括号里面不用加. # 表示class id"""

  2. 具体示例

    $('div').addClass('c4'); # 添加c4这个类属性
w.fn.init [div.c1.c2.c3.c4, prevObject: w.fn.init(1)]

$('div').removeClass('c4'); # 移除c4这个类属性
w.fn.init [div.c1.c2.c3, prevObject: w.fn.init(1)]

$('div').hasClass('c3'); # 判断是否有c3这个类属性
true
$('div').hasClass('c4'); # 判断是否有c4这个类属性
false

$('div').toggleClass('c4'); # 判断是否有c4这个类属性，有就删除，没有就添加
w.fn.init [div.c1.c2.c3.c4, prevObject: w.fn.init(1)]
$('div').toggleClass('c1'); # 判断是否有c1这个类属性，有就删除，没有就添加
w.fn.init [div.c2.c3.c4, prevObject w.fn.init(1)]

3.4.2、css操作

  1. js和jQuery对比

    """
js中
	document.getElementById('d1').style.fontSize('32px')

jQuery中
	$('#d1').css('font-size','32px')
"""

  2. 具体示例

    $('p').first().css('color','red').next().css('color','green')
# jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
# jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法
class MyClass(object):
    def func1(self):
        print('func1')
        return self

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

3.4.3、位置操作

  1. 具体方法

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

  2. 具体示例

    $('p').offset();
{top: 100, left: 100}

$('p').position();
{top: 100, left: 100}

$(window).scrollTop()
1698

$(window).scrollLeft()
0

3.4.4、尺寸操作

  1. 具体方法

    """
.heigth() # 文本高度
.width() # 文本宽度
.innerHeigth() # 文本+padding高度
.innerWidth() # 文本+padding宽度
.outerHeigth() # 文本+padding+border高度
.outerWidth() # 文本+padding+border宽度
"""

  2. 具体示例

    $('p').height()  # 文本
20
$('p').width()
1670

$('p').innerHeight()  # 文本+padding
26
$('p').innerWidth()
1674

$('p').outerHeight()  # 文本+padding+border
26
$('p').outerWidth()
1674

3.5、文本操作

3.5.1、文本操作

  1. js和jQuery对比

    """
js中						jQuery中
	innertext            	text() # 括号内不加参数就是获取
	innerHTML				html() # 加了参数就是设值
"""

  2. 具体示例

    $('div').text()
"
    
        有些话听听就过去了，不要在意，都是成年人!
    
"
-------------------------------------------
$('div').html()
"
    <p>
        有些话听听就过去了，不要在意，都是成年人!
    </p>
"
-------------------------------------------
$('div').text('你们都是我的大宝贝')
w.fn.init [div, prevObject: w.fn.init(1)]
$('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)]

3.5.2、获取值操作

  1. js和jQuery对比

    """
js中
	.value()
jQuery中
	.val() # 括号内不加参数就是获取值，加上参数就是设值
"""

  2. 具体示例

    $('#d1').val() # 获取值
"sasdasdsadsadad"

$('#d1').val('520快乐')  # 设值

$('#d2').val()
"C:\fakepath\01_测试路由.png"
$('#d2')[0].files[0]  # 牢记两个对象之间的转换
File {name: "01_测试路由.png", lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 28733, …}

3.6、属性操作

  1. js和jQuery对比

    """
js中							jQuery中
	setAttribute()            	attr(name,value)
	getAttribute()	 			attr(name)
	removeAttribute()    		removeAttr(name)
"""

  2. 具体示例

    let $pEle = $('p')
undefined
$pEle.attr('id')
"d1"
$pEle.attr('class')
undefined
$pEle.attr('class','c1')
w.fn.init [p#d1.c1, prevObject: w.fn.init(1)]
$pEle.attr('id','id666')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
$pEle.attr('password','jason123')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
$pEle.removeAttr('password')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]

  3. 特殊

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

$('#d3').attr('checked')
"checked"
$('#d2').attr('checked')
undefined
$('#d2').attr('checked')
undefined
$('#d4').attr('checked')
undefined
$('#d3').attr('checked')
"checked"
$('#d3').attr('checked','checked')  # 无效
w.fn.init [input#d3]
           
           
$('#d2').prop('checked')
false
$('#d2').prop('checked')
true
$('#d3').prop('checked',true)
w.fn.init [input#d3]
$('#d3').prop('checked',false)
w.fn.init [input#d3]

3.7、文档处理

  1. js和jQuery对比

    """
js中								jQuery中
	createELement('div')         	$('<div>')
	appendChild()					.append()
"""

"""
################### 实际操作 ###################
1 尾部追加
	$('.c1').append($pEle)
	$pEle.appendTo($('.c1'))
	
2 头部追加
	$('.c1').prepend($pEle)
	$pEle.prepend($('.c1'))
	
3 加在某个标签后面
	$('.c1').after($pEle)
	$pEle.insertAfter($('.c1'))
	
4 加在某个标签前面
	$('.c1').before($pEle)
	$pEle.insertBefore($('.c1'))
	
5 删除标签
	$('.c1').remove()  清空标签内所有的内容，包括该标签
	$('.c1').empty()   清空标签内所有的内容，不包括该标签
"""

  2. 具体示例

    let $pEle = $('<p>')
$pEle.text('你好啊 草莓要不要来几个?')
$pEle.attr('id','d1')          
$('#d1').append($pEle)  # 内部尾部追加
$pEle.appendTo($('#d1')) 
           
$('#d1').prepend($pEle)  # 内部头部追加
w.fn.init [div#d1]
$pEle.prependTo($('#d1'))
w.fn.init [p#d1, prevObject: w.fn.init(1)]
         
$('#d2').after($pEle)  # 放在某个标签后面
w.fn.init [p#d2]
$pEle.insertAfter($('#d1'))
        
$('#d1').before($pEle)  # 放在某个标签前面
w.fn.init [div#d1]
$pEle.insertBefore($('#d2'))

$('#d1').remove()  # 将标签从DOM树中删除
w.fn.init [div#d1]
           
$('#d1').empty()  # 清空标签内部所有的内容
w.fn.init [div#d1]

3.8、事件

3.8.1、事件绑定

//第一种
	$('#d1').click(function() {
	alter('别bb，吻我')
	});
	
//第二种
	$('#d1').on('click',function() {
	alter('别bb，吻我')
	})

3.8.2、克隆事件

<button id='d1'>点我给你好看</button>

<script>
	$('#d1').on('click',function () {
        //clone(true) 默认是false，表示只克隆HTML标签和css样式，不克隆事件，改成true就可以克隆事件
        $(this).clone(true).insertAfter($('body'))
    })
</script>

3.8.3、模态框事件

/*模态框的本质就是给标签移除或者添加hide属性*/
<script>
  $("#i0").click(function () {
    var coverEle = $(".cover")[0];  // 需要手动转
    var modalEle = $(".modal")[0];

    $(coverEle).removeClass("hide");
    $(modalEle).removeClass("hide");
  })

  var cButton = $("#i3")[0];
  cButton.onclick=function () {
    var coverEle = $(".cover")[0];
    var modalEle = $(".modal")[0];

    $(coverEle).addClass("hide");
    $(modalEle).addClass("hide");
  }
</script>

3.8.3、左侧菜单栏

<script>
    $('.title').click(function () {
        // 先给所有的items加hide
        $('.items').addClass('hide')
        // 然后将被点击标签内部的hide移除
        $(this).children().removeClass('hide')
    })
</script>

3.8.4、回到顶部

<script>
	$(window).scroll(function () {
        if($(window).scrollTop>300) {
            $('#d1').removeClass('hide')
        }else {
            $('#d1').addClass('hide')
        }
    })
	
</script>

3.8.5、自定义登录校验

//在获取用户的用户名和密码时，用户没有填写 此时应该给用户展示提示信息
<p>username:
	<input type='text' id='username'>
    <span style='color:red;'></span>
</p>
<p>password:
	<input type='password' id='password'>
    <span style='color:red;'></span>
</p>
<button id='d1'>提交</button>

<script>
	let $userName = $('#username')
    let $passWord = $('#password')
    $('#d1').click(function () {
        let userName = $userName.val()
        let passWord = $passWord.val()
        if(!userName) {
            $userName.next().val('用户名不能为空')
        }
        if(!passWord) {
            $passWord.next().val('密码不能为空')
        }
    $('input').focus(function () {
        $(this).next().text('')
    }) 
</script>

3.8.6、input实时监控

<input type='text' id='d1'>

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

3.8.7、hover事件

<script>
	$('#d1').hover(function () { //鼠标悬浮+鼠标移开  两个动作
        alter(123)
    })
    
    $('#d1').hover(
        function () {alter('come baby'), //悬浮动作
        function () {alter('get out')}   //移开动作
    })
</script>

3.8.8、键盘按键按下事件

<script>
	$(window).keydown(function (event) {
        console.log(event.keyCode)
        if(event.keyCode === 16) {
            alter('你按下了shift键')
        }
    })
</script>

3.8.9、阻止后续事件执行

<script>
	$('#d1').click(function (e) {
        $('#d2').text('come boby')
        //阻止事件后续执行方式1
        return false
        //阻止事件后续执行方式2
        e.preventDafualt()
    })
</script>

3.8.10、阻止事件冒泡

<script>
	$('#d1').click(function (e) {
        alter(div)
    })
    $('#d2').click(function (e) {
        alter(p)
    })
    $('#d3').click(function (e) {
        alter(span)
        //阻止事件冒泡方式1
        return false
        //阻止事件冒泡方式2
        e.stopPropagation()
    })
</script>

3.8.11、事件委托

<button>是兄弟，就砍我</button>

<script>
    //这种绑定事件方式无法实现事件委托
	$('button').click(function () {
        alter(123)
    })
    
    //这种事件绑定方法可以实现事件委托
    $('body').on('click','button',function () {
        alter(123) //在指定的范围内（body）将事件委托给某个标签（button）无论该标签是事先写好的还是后面动态创建的
    })
</script>

3.8.12、页面加载

# 等待页面加载完毕再执行代码
window.onload = function(){
  // js代码
}


"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
  // js代码
})

# 第二种
$(function(){
  // js代码
})

# 第三种
"""直接写在body内部最下方"""

3.9、动画效果

"""
$('#d1').hide(5000)			5秒后隐藏
w.fn.init [div#d1]
$('#d1').show(5000)			5秒后展示
w.fn.init [div#d1]
$('#d1').slideUp(5000)		5秒后上滑消失
w.fn.init [div#d1]
$('#d1').slideDown(5000)	5秒后下滑显示
w.fn.init [div#d1]
$('#d1').fadeOut(5000)		5秒后慢慢褪去消失
w.fn.init [div#d1]
$('#d1').fadeIn(5000)		5秒后慢慢显示
w.fn.init [div#d1]
$('#d1').fadeTo(5000,0.4)	5秒后慢慢显示0.4的透明度
w.fn.init [div#d1]  
"""

3.10、补充each、data

3.10.1、each方法

"""
# 第一种方式
$('div')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').each(function(index){console.log(index)})
VM181:1 0
VM181:1 1
VM181:1 2
VM181:1 3
VM181:1 4
VM181:1 5
VM181:1 6
VM181:1 7
VM181:1 8
VM181:1 9

$('div').each(function(index,obj){console.log(index,obj)})
VM243:1 0 <div>​1​</div>​
VM243:1 1 <div>​2​</div>​
VM243:1 2 <div>​3​</div>​
VM243:1 3 <div>​4​</div>​
VM243:1 4 <div>​5​</div>​
VM243:1 5 <div>​6​</div>​
VM243:1 6 <div>​7​</div>​
VM243:1 7 <div>​8​</div>​
VM243:1 8 <div>​9​</div>​
VM243:1 9 <div>​10​</div>​

# 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM484:1 0 111
VM484:1 1 222
VM484:1 2 333
[111, 222, 333]
"""
有了each之后 就无需自己写for循环了 用它更加的方便

3.10.2、data方法

"""
能够让标签帮我们存储数据 并且用户肉眼看不见
"""
$('div').data('info','回来吧，我原谅你了!')
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
               
$('div').first().data('info')
"回来吧，我原谅你了!"
$('div').last().data('info')
"回来吧，我原谅你了!"
               
$('div').first().data('xxx')
undefined
$('div').first().removeData('info')
w.fn.init [div#d1, prevObject: w.fn.init(10)]
           
$('div').first().data('info')
undefined
$('div').last().data('info')
"回来吧，我原谅你了!

3、bootstrap基础

3.1、bootstrap简介

  1. 简介：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。Bootstrap的JS代码时依赖jQuery的，也就意味着你在使用Bootstrap动态效果时，一定要导入jQuery

  2. 版本使用：建议使用V3版本（https://v3.bootcss.com/）

  3. 使用本质：直接面向CV编程（该框架已经帮助我们写好了很多页面样式，在使用时只需要通过class来调节即可）

  4. Bootstrap内部

    image-20200823182908471

    image-20200823183006817

    image-20200823183111153

  5. 相关神器

3.2、全局CSS样式

3.2.1、布局容器

  1. .container类用于国定宽度并支持响应式布局的容器

    <div class="container">
  ...
</div>

  2. .container-fluid类用于100%宽度，占据全部视口（viewport）的容器

    <div class="container-fluid">
  ...
</div>

  3. 注意：后续在使用bootstrap做页面的时候 上来先写一个div class=container,之后在div内部书写页面

3.2.2、栅格系统

  1. 简介：栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

  2. 具体解释

    <div class="row"></div>
# 写一个row就是将所在的区域划分成12份

<div class="col-md-6 ">  # 获取你所要的份数
# 在使用bootstrap的时候 脑子里面一定要做12的加减法

  3. 栅格参数

    .col-xs-	.col-sm-	.col-md-	.col-lg-
# 针对不同的显示器 bootstrap会自动选择对应的参数
# 如果你想要兼容所有的显示器 你就全部加上即可


# 在一行如何移动位置
<div class="col-md-8 c1 col-md-offset-2"></div> # 从左向右移动2个单位

3.2.3、排版

  1. 简介：HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

  2. 具体示例

    <h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

  3. 特殊：在标题内还可以包含标签或添加类class=‘small’，用来标记副标题

    <h1>h1. 主标题 <small>副标题</small></h1>
<h2>h2. 主标题 <small>副标题</small></h2>
<h3>h3. 主标题 <small>副标题t</small></h3>
<h4>h4. 主标题 <small>副标题</small></h4>
<h5>h5. 主标题 <small>副标题</small></h5>
<h6>h6. 主标题 <small>副标题</small></h6>

3.2.4、表格

  1. 表格样式

    """
table 优化表格布局 
table-hover 悬浮变色
table-striped 隔一行变色
table-bordered 表格边框
"""

  2. 表格颜色样式

    """
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
"""

  3. 具体示例

    <table class="table table-hover table-striped table-bordered">
	<thead>
    	<tr>
        	<th>username</th>
            <th>username</th>
        </tr>
    </thead>
    <tbody>
    	<tr class='active'>
        	<td>jason</td>
            <td>123</td>
        </tr>
    </tbody>
</table>

3.2.5、表单

  1. 直接操作：在表单里，直接在标签内加上form-control即可

  2. 具体示例

    <div class="container">
    <div class="col-md-8 col-md-offset-2">
        <h2 class="text-center">登陆页面</h2>
        <form action="">
            <p>username:<input type="text" class="form-control"></p>
            <p>password:<input type="text" class="form-control"></p>
            <p>
                <select name="" id="" class="form-control">
                    <option value="">111</option>
                    <option value="">222</option>
                    <option value="">333</option>
                </select>
            </p>
            <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
            <input type="submit">
        </form>
    </div>
</div>

// 针对报错信息 可以加has-error（input的父标签加）
<p class="has-error">
	username:
  <input type="text" class="form-control">
</p>

3.2.6、按钮

  1. 按钮样式

    <button type="button" class="btn btn-default">（默认样式）Default</button>


<button type="button" class="btn btn-primary">（首选项）Primary</button>


<button type="button" class="btn btn-success">（成功）Success</button>


<button type="button" class="btn btn-info">（一般信息）Info</button>

<button type="button" class="btn btn-warning">（警告）Warning</button>


<button type="button" class="btn btn-danger">（危险）Danger</button>

  2. 按钮颜色

    """
btn-default 默认无颜色
btn-primary 深蓝色
btn-success 绿色
btn-info    淡蓝色
btn-warning 橘色
btn-danger  红色
"""

  3. 按钮大小

    """
btn-lg 大按钮
btn-sm 小按钮
btn-xs 超小按钮
"""

  4. 具体示例

    <a href="https://www.mzitu.com/" class="btn btn-primary">点我</a>
<button class="btn btn-danger">按我</button>
<button class="btn btn-default">按我</button>
<button class="btn btn-success">按我</button>
<button class="btn btn-info">按我</button>
<button class="btn btn-warning">按我</button>


<button class="btn btn-warning btn-lg">按我</button>
<button class="btn btn-warning btn-sm">按我</button>
<button class="btn btn-warning btn-xs">按我</button>
<input type="submit" class="btn btn-primary btn-block">  
// 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

3.2.7、图片

  1. 图片样式

    <img src="..." alt="..." class="img-rounded">   # 140 x 140正方形
<img src="..." alt="..." class="img-circle">	# 140 x 140圆形
<img src="..." alt="..." class="img-thumbnail"> # 140 x 140正方形带边框

3.3、组件

3.3.1、字体图标

  1. 使用
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

  1. 外挂：http://www.fontawesome.com.cn/faicons/

  2. 具体示例

    <h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2>


    <style>
        span {
            color: greenyellow;
        }
    </style>

// 去bootstrap官网找到图标，复制来即可

3.3.2、导航条

  1. 颜色调整
<nav class="navbar navbar-inverse"> // 白色
<nav class="navbar navbar-default"> // 黑色

  1. 具体示例

    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

3.3.3、分页器

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

3.3.4、弹框

  1. 外挂：https://lipis.github.io/bootstrap-sweetalert/

  2. 具体示例

    // 是js中alter的进阶版本 优化了视觉效果
swal('你还好吗?')
undefined
swal('你还好吗?')
undefined
swal('你还好吗?','我不好，想你了!')
undefined
swal('你还好吗?','我不好，想你了!','success')
undefined
swal('你还好吗?','我不好，想你了!','warning')
undefined
swal('你还好吗?','我不好，想你了!','error')
undefined
swal('你还好吗?','我不好，想你了!','info')
undefined

3.3.5、面板

  1. 面板样式

    <div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
</div>

  2. 面板颜色

    """
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
"""

3.4、JS插件（暂不涉及）
posted @ 2020-12-11 17:10  今天捡到一百块钱  阅读(122)  评论(0)  编辑  收藏  举报