Day52 前端开发 JS 函数 BOM DOM

Day52 前端开发 JS 函数 BOM DOM

1、JS数据类型

1.1、JS数据类型之布尔值（boolean）

bollean 布尔值

1. True
2. False
   1. （空字符串）
   2. 0
   3. null
   4. undefined
   5. NaN

null 与 undefined 的区别
null可以理解为曾经拥有过 现在暂时空了

undefined可以理解为从来没拥有过

1.2、JS数据类型之对象（object）

JS中也是一切皆对象
所有事物都是对象：字符串、数组、函数····

1.2.1、数组

就是python中的列表

//直接 生成
let l1 = [12,'kk',22,44,55]
typeof l1
'object'
1
2
3
4

forEACh
类似于for循环

forEach(function(Value,index,arr){value,index,arr})

l1.forEach(function(a){console.log(a}))
1
2
3

splice

li = [11,22,33,44,654,781]
l1.splice(2,1,'kk')
l1
(6) [11, 22, 'kk', 44, 654, 781]
1
2
3
4

map

li = [11,22,33,44,654,781]

l1.map(function(value){return value + 1})
(6) [12, 23, 'kk1', 45, 655, 782]
1
2
3
4

1.2.2、Js类型之自定义对象（）

自定义对象相当于 python中的字典

自定义对象 定义方式

let d1 ={'name:'jason','pwd':123}
         
let d2 = new object()
1
2
3

获取 键值的方式

d1 点健的方式 获取值

d1.name
'jason'
1
2

2、运算符

自增 ++
加号位置的不同 其运算的流程也不同

var x=10
var res1=x++;  //加号 值 后面 那么 就是先赋值 在进行自增
//res1=10 x=11

var res2=++x; //加号在值前面 那么就是 先自增 在赋值
//res= 12 x=12
1
2
3
4
5
6

弱等于 与强等于
== 弱等于 js会自动 转换成相同数据类型
===强等于 不会自动转换 等于python中的==

逻辑运算符

3、流程控制

3.1、分支结构

1. 单if分支

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

2. if ··· else 分支

   if(条件){
       条链成立之后执行的代码
   }
   else{
       条件不成立之后执行的代码
   }
   1
   2
   3
   4
   5
   6

3. if ··· elif ···else 分支

   if(条件1){
       条件1成立之后执行的代码
   }
   else if(条件2){
       条件1不成立条件2成立执行的代码
   }
   else{
       条件不成立之后执行的代码
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9

switvh 语法

var day = new Date().getDay();
switch (day) {
    case 0:
        console.log('周日');
        break;
    case 1:
        console.log('周一');
        break
    default:
        console.log("...")
}
1
2
3
4
5
6
7
8
9
10
11

3.2、循环结构

for循环

for(let i=1;i<101;i++){
    console.log(i)
}
1
2
3

打印数组内所有数据值

l1 = [11,22,33,44,55,66,77,88,'kk']
for(let i=0;i<l1.length;i++){
    console.log(l1[i])
}
1
2
3
4

while循环

while(条件){
      循环体代码
      }
1
2
3

4、函数

函数语法结构

function 函数名（形参）{
    函数体代码
    return 返回值
}

function func(a,b){
    console.log(a,b)
}
1
2
3
4
5
6
7
8

参数的个数 不需要一一对应 如果想要限制参数个数需要使用内置关键字 arguments

function func(a,b){
    if(arguments.length===2){
        console.log(a,b)
    }else{
        console.log('参数个数不足')
    }
}
1
2
3
4
5
6
7

匿名函数

function(a,b){
    return a +b;
}
1
2
3

箭头函数

var f = function(v){
    return V;
}
var f = V => V; //箭头前面 为形参 箭头指向的是返回值
1
2
3
4

var f = () => 5;

var f = function(){return 5}
1

var f =(num1,num2) => num1 + num2;

var f = function(num1,num2){
    return num1+num2
} //js return中只能返回一个值，如果想返回多个值需要自救手给他们包一个数组或对象
1
2
3

5、js内置对象

类似于python中的内置函数名或内置模块
固定语法

var 变量名 = new 内置对象名();
1

5.1、Date日期对象

let Dobj = new Date();
dobj
Thu Aug 25 2022 18:38:32 GMT+0800 (中国标准时间)

dobj.toLocaleString()
'2022/8/25 18:38:32'
1
2
3
4
5
6

Date 对象的方法

5.2、JSON 序列化对象

JSON直接 使用

对象转换成JSON格式字符串
JSON.stringify

let d1 = {name: 'kk', pwd: 123};
let sd1 = JSON.stringify(d1)

'{"name":"kk","pwd":123}'
1
2
3
4

JSON格式字符串 转换成对象
JSON.parse

sd1 = '{"name":"kk","pwd":123}'
let d2 = JSON.parse(sd1)

{name: 'kk', pwd: 123}
1
2
3
4

5.3、RegExp 正则

定义正则表达式
两种方法

//方法一
let reg1 = new RegExp("^[a-zA-z][a-zA-Z0-9]{5,11}");

//方法二
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
1
2
3
4
5

正则表达式中 不能有空格

**当在匹配的括号里什么都不写时 自动匹配 undefined **

6、BOM

BOM：浏览器对象模型
通过写js代码可以跟浏览器交互

打开 一个网页窗口

window.open('http://www.baidu.com','','height=100px,width=100px,left=500px')
1

关闭网页窗口
只能关 自己写的打开的页面

window.close()
1

客户端绝大部分信息
userAgent 作为游览器的标识

window.navigtor.userAgent
1

6.1、history对象

控制网页前进 或 返回上一页
history.forward()
history.back()

//控制网页 前进一页
window.history.forward()

//控制网页返回上一页
window.history.back()
1
2
3
4
5

6.2、location对象

查看当前网址 或跳转 至某网址
location.href

//查看当前网址
window.location.href
'https://fanyi.youdao.com/'

//跳转至 某网页
window.location.href='www.baidu,com'
1
2
3
4
5
6

刷新网页 重新加载
location.reload()

window.location.reload()
1

6.3、弹出框

确认框
confirm()
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

confirm('要爆炸了！！')
//用户点确定 返回True 点取消返回False
1
2

警告框
alert()

alert('真的要爆炸了！！')
1

提示框
当提示框出现后 用户需要输入值 然后点击确认或取消按钮 才能继续操作prompt

prompt("你在干神魔？")
//用输入确认 那么 返回值 为输入的值 如果用户点击取消，那么返回值为null
1
2

6.4、计时器

定时任务
setTimeout()

function func1(){
        alert('爆炸时间到！！')
    }
let t = setTimeout(func1,3000)
1
2
3
4

循环定时任务
setInterval()

function func1(){
        alert('爆炸时间到！！')
    }

let t1 =setInterval(func1,3000)
1
2
3
4
5

停止循环定时任务

//可以 关停 循环定时任务
clearInterval(t1)
1
2

验证 停止 循环定时任务

var s1 = null
    function showMsg() {
        function func1(){
            alert('爆炸了！')
        }
	t1 = setInterval(func1, 3000)}
    function clearMission(){
        clearInterval(s1)
    }
setTimeout(clearMission, 9000) //定时当 九秒后 调用函数 停止 循环定时
showMsg()  //启动 函数里的循环 定时任务
1
2
3
4
5
6
7
8
9
10
11

7、DOM

HTML DOM树

7.1、DOM操作查找标签(节点)

7.1.1、直接查找标签

JS操作html和css操作html学习套路一致 那是先学如何查找标签

代码准备

<body>
<div id="d1">divdiv>
<div class="c1">divdiv>
<div>divdiv>
<p class="c1">p>
<span id="d2">spanspan>
body>
1
2
3
4
5
6
7

根据id 查找 标签
结果是标签本身

document.getElementById('d1')

<div id="d1">div</div>
1
2
3

根据class 查找标签
结果是数组

document.getElementsByClassName('c1')

HTMLCollection(2) [div.c1, p.c1]
1
2
3

根据 标签类型 获取标签
结果是数组

document.getElementsByTagName('div')

//HTMLCollection(3) [div#d1, div.c1, div, d1: div#d1]
1
2
3

**涉及到DOM的操作 的JS代码应该放在文档的body标签 内部的最下方 **

7.1.2、间接查找标签

代码准备

<body>
<p>111p>
<p>222p>
<div id="d1">
  div
  <p>div>p
  <span>div>p>spanspan>
  p>
  <span>div>spanspan>
  <p>div>pp>
div>
<span>333span>
<span>5555span>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

存储标签

let div1Ele = document.getElementById('d1')
div1Ele

<div id="d1">
  div
  <p>div&gt;p
  <span>div&gt;p&gt;span</span>
  </p>
  <span>div&gt;span</span>
  <p>div&gt;p</p>
</div>
1
2
3
4
5
6
7
8
9
10
11

获取 该标签的父标签

document.getElementById('d1').parentElement
div1ELe.parentElement

<body>
<p>111</p>
<p>222</p>
<div id="d1">
  div
  <p>div&gt;p
  <span>div&gt;p&gt;span</span>
  </p>
  <span>div&gt;span</span>
  <p>div&gt;p</p>
</div>
<span>333</span>
<span>5555</span>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

获取所有的子标签

div1Ele.children

HTMLCollection(3) [p, span, p]
1
2
3

获取 第一子标签

div1Ele.firstElementChild

<p>div&gt;p
  <span>div&gt;p&gt;span</span>
</p>
1
2
3
4
5

获取最后一个子标签

div1Ele.lastElementChild

<p>div&gt;p</p>
1
2
3

获取下一个兄弟标签

div1Ele.nextElementSibling

<span>333</span>
1
2
3

获取上一个兄弟标签

div1Ele.previousElementSibling

<p>222</p>
1
2
3

7.2、DOM操作 操作节点

创建标签对象

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

给标签添加属性

aEle.href = 'https://www.baidu.com'  //给a标签添加 href属性
1

给标签添加文本

aEle.innerText = '前往百度主页'  //给给 a标签 添加 文本

<a href="https://www.baidu.com">前往百度主页</a>
1
2
3

让创建 的标签添加至文档流中（页面上）
该方式为动态创建 临时有效

div1Ele.append(aEle)  //通过查找到的标签 点 append 添加 创建好的a标签 值末尾

div1Ele.insertBefore(aEle,div1Ele.firstElementChild)  //添加至指定节点的前面
1
2
3

7.2.1、属性操作

设置标签的自定义属性
setAttribute

//setAttribute 标签可以定义 默认属性也可以定义自定义属性
img1.setAttribute('src','111.png')

img1.setAttribute('aaa','kkk')  
1
2
3
4

• 通过点的形式定义的 属性 只能是默认属性

7.2.2、文本操作

获取标签内所有文本与标签（可以创建子标签）
innerHTML

div1Ele.innerHTML

'\n  div\n  前往百度主页
div>p\n  div>p>span\n  
\n  div>span\n  
div>p
\n'  //不同的标签通过撬棍 符分割

//创建子标签
div1Ele.innerHTML= '
 这是innerHTML
'
div1Ele
<div id="d1"><h3> 这是innerHTML</h3></div>
1
2
3
4
5
6
7
8

获取标签内文本
innerText

div1Ele.innerText

'div 前往百度主页\n\ndiv>p div>p>span\n\ndiv>span\n\ndiv>p'
1
2
3