JS运算符，流程控制，函数，内置对象，BOM与DOM

运算符

1.算数运算符

运算符	描述
+	加
-	减
*	乘
/	除
%	取余(保留整数)
++	递加
- -	递减
**	幂

var x=10;

var res1=x++; '先赋值后自增1' 10

var res2=++x; '先自增1后赋值' 12

2.赋值运算符

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

3、比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

弱等于:自动转换类型

'5' == 5 '结果是true js会自动转换成相同数据类型比较值是否一样'

强等于:不转换类型

'5' === 5 '结果是false'

4、逻辑运算符

运算符	描述
&&	逻辑与
||	逻辑或
!	逻辑非

5、类型运算符

运算符	描述
typeof	返回变量的类型
instanceof	返回 true，如果对象是对象类型的实例

流程控制

if语句

JS语言提供了俩种分支结构语句1.if语句 2.switch语句

if 语法结构

    <script>
        // 1.if的语法结构 if如果的意思
        if (条件表达式 返回的值是布尔值 ) {
            // 执行语句
        }
           2.执行思路：如果if条件表达式为 真 则执行大括号里面的语句 如果if条件表达式为 假 则不
执行里面语句直接跳过，执行if下面语句。这里的语句可以理解为一个行为把就是做了什么事情，可以做很多很多行为
    </script>

if else (双分支语句)语法结构

    <script>
        // 1.语法结构 if 如果  else 否则
        if (条件表达式) {
            // 满足条件时，执行的语句
        } else {
            // 不满足条件时，执行的语句
        }
        // 2.执行思路 如果 if 条件表达式为真则执行语句1 否则语句2
        // if里面的语句1 和else里面的语句2 最终只能执行一个语句
        // 3.注意else后面不跟小括号
    </script>

if else if else（多分支语句)语法结构

    <script>
        //  1.多分支语句 就是用来利用多个条件来选择不同的z语句执行 得到的结果不同 实现多选一的过程
        //  if else if 语法结构
        if (条件表达式1) {
            // 执行语句1
        } else if (条件表达式2) {
            // 执行语句2
        } else if (条件表达式3) {
            // 执行语句3
        } else {
            // 最后的语句
        }
        // 2.执行思路 如果条件表达式 1 满足条件 就执行 语句1 执行完毕后，退出整个if语句
        // 如果条件表达式1 不满足条件 就执行条件表达式2 满足的话 就执行语句2.然后退出整个if语句
        // 如果都不满足则执行最后else的语句
        // 注意点 里面的表达式条件可为多个 是多选一的过程
    </script>

分支流程控制switch语句

switch也是多分支语句 它用于基于不同的条件来执行不同的代码，当要针对变量设置一系列特定值的选项
时，就可以使用switch。

    <script>
        // 1.switch 语句 也是实现多选一的过程
        // 语法结构
        switch (表达式) {
            case value1:
                // 执行语句1
                break;
            case value2:
                // 执行语句2
                break;
            case value3:
                // 执行语句3
                break;
            default:
                // 执行最后的语句
        }
        // 2.执行思路 利用我们表达式的值 和case 后面的选项值相匹配 如果匹配上，就执行case里面的语句 如果都没有匹配上 就执行default里面的语句
        // 注意：最后的双逗号别忘记写了
        // 3.举个例子
        var num = 3
        switch (num) {
            case 1:
                break;
            case 2:
                break;
            case 3:
                break;
            default:
                // 如果都没有执行这里面的
        }
        // 4.switch注意点
        // 我们经常吧switch里面的表达式写出变量形式
        // num里面的值和case后面的值必须是全等关系 也包括数据类型也要一致 如num===3 严格判断的
        // break(结束的意思) 如果当前的case里面没有break 则不会退出 switch继续执行下一个case 直到遇见了break才会退出
    </script>

switch语句和if else if语句区别

    一般情况下他们俩是可以互相替换的
    switch…case语句通常处理case比较确定值得情况下，而if…else…语句更加灵活一些，常用于范围判断(大于、等与蒙个范围)
    switch语句进行条件判断后是直接跳到相对应执行语句上的效率高一些，而if…else是一条一条进行判断的
    当分支比较少时，if…else语句的执行效率比switch语句高
    当分支比较多时，switch语句的执行效率比较高，而且结果更清晰

for循环

for(初始化变量; 条件表达式; 操作表达式 ){
	//循环体
}
//比如：输出10句“我想吃泡面”
// 基本写法
for(var i = 1; i <= 10; i++){
  console.log('我想吃泡面~');
}
// 用户输入次数
var num = prompt('请输入次数:')；
for ( var i = 1 ; i <= num; i++) {
  console.log('我想吃泡面~');
}

双重for循环

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
	for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
		需执行的代码;
	}
}

//打印五行五列星星
var star = '';
for (var j = 1; j <= 3; j++) {
	for (var i = 1; i <= 3; i++) {
		star += '☆'
	}
	// 每次满 3个星星 就 加一次换行
	star += '\n'
}
console.log(star);
//核心逻辑：
//1.内层循环负责一行打印五个星星
//2.外层循环负责打印五行

for 循环小结

    1.for 循环可以重复执行某些相同代码
    2.for 循环可以重复执行些许不同的代码，因为我们有计数器
    3.for 循环可以重复执行某些操作，比如算术运算符加法操作
    4.随着需求增加，双重for循环可以做更多、更好看的效果
    5.双重 for 循环，外层循环一次，内层 for 循环全部执行
    6.for 循环是循环条件和数字直接相关的循环

while循环

while (条件表达式) {
	// 循环体代码
}

//使用while循环，完成从盒子里取球的动作，每次取一个，共6个球。
	var i=1 ;
        while(i<=6){
            console.log('这是去除的第'+i+'球');
            i++;
        }

do...while

do {
	// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

//使用do…while语句，输出1-6这6个数字。
	var i=1 ;
        do{
            console.log('这是去除的第'+i+'球');
            i++;
        }while(i<=6)

三元表达式

python中的三元运算
	res = 11 if 1 > 2 else 22
  '''if后面的条件成立则使用if前面的值 不成立则使用else后面的值'''
js中的三元运算
	res = 1 > 2 ? 11 : 22
 	'''问号前面的条件成立则使用冒号左边的值 否则使用冒号右边的值'''
# 三元运算一般情况下都不推荐嵌套使用!

函数

function 函数名 () {
    函数体..
}

1.无参函数

function f1(){console.log(111)}
f1()

2.有参函数

function f2(a, b){console.log(a,b)}
f2()  # 可以调用 相当于传了两个undefined
f2(1)  # 可以调用
f2(1,2)  # 可以调用
f2(1,2,3,4,5)  # 可以调用

 '''js中的函数提供了有个内置关键字arguments:接收所有参数'''
  function f2(){
    console.log(arguments)
    if (arguments.length === 0){
      console.log('什么参数都没传')
    }else if(arguments.length === 1){
      console.log('传了一个参数')
    }else{
      console.log('传了多个参数')
    }
  }

3.返回值参数

function f3(){return 111}
f3()
return不支持返回多个数据

4.匿名函数

  使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数
function (a, b) {
   console.log(a + b);
}

函数表达式

  使用function关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量，叫函数表达式。

  函数也是一种数据类型, 属于Object对象类型中的一种
var fun = function(a, b) {  // 匿名函数
   console.log(a + b);
};
fun(12, 13);

5.箭头函数

    箭头函数是ES6新增的语法，提供了一种更加简洁的函数书写方式，类似于匿名函数，并且简化了函数定义。

完整写法

完整写法类似于匿名函数，省略了function关键字。
var s = (a,b) => {
    console.log(a, b); // 1 2
    return a + b;
}
s(1,2);

// 相当于
var s = function(a,b) {
    console.log(a, b); // 1 2
    return a + b;
}
s(1,2);

省略小括号

当参数只有1个时，可以省略小括号，当没有参数或者两个以上的参时不能省略小括号。
var s = a => {
    console.log(a); // 1
    return a + a;
}
s(1);

// 相当于
var s = function(a) {
    console.log(a); // 1
    return a + a;
}
s(1);

省略大括号

当函数体只有一行语句时，可以省略{}，并且会自动return这条语句的返回值。

var cmp = (a, b) => a - b;

// 相当于
var cmp = function(a, b) { return a - b; };

省略小括号与大括号

当满足上述两个条件时，小括号与大括号可以全部省略。
var s = a => a * 2;
console.log(s(1)); // 2

// 相当于
var s = function(a) { return a * 2; }
console.log(s(1)); // 2

自定义对象

方式1：定义了person对象（有参）

function Person(name,age){//this代表person对象
  //追加属性
  this.name = name;
  this.age = age;
  //追加方法
  this.say = function(){
    alert("调用了say方法");
  }
}

//创建对象
var p = new Person( "eric",20);

方式2：定义了person对象（无参）

function Person(){
}

//创建对象
var p =new Person();
//追加属性
p.name ="张三";
p.age = 20;
//追加方法
p.say = function(){
  alert("调用了张三的say功能");
}

方式3：创建Object对象：在js中object对象代表了所有对象，是一个模板对象

var p = new Object();
//追加属性
p.name ="李四";
p.age=20;
//追加方法
p.say = function(){
  alert("调用了李四的say功能");
}

json方式

var p = {
  //追加属性
  "name" :"王五",
  "age": 25,
  //追加方法
  "say" :function(){
    alert("调用了王五的say方法");
  }
};

内置对象

Date对象

var date1 = new Date()
date1.toLocaleString()    '2022/4/28 下午4:18:13'
date1.toLocaleDateString()   '2022/4/28'
date1.toLocaleTimeString()   '下午4:18:13'

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

JSON对象

JSON.parse()

JSON.parse()方法

    作用：用于将一个 JSON 字符串转换为JavaScript 对象。

    要求:字符串满足JSON字符串，否则就会转换失败。

var text = '{ "sites" : [' +
	'{ "name":"Runoob" , "url":"www.runoob.com" },' +
	'{ "name":"Google" , "url":"www.google.com" },' +
	'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

obj = JSON.parse(text);

JSON.stringify()

JSON.stringify()方法

    作用：将 JavaScript 值转换为 JSON 字符串。

var test = {"nihao":"123"};
JSON.stringify(test);

正则对象

# 创建正则表达式的两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;  # 推荐使用(简化)

reg2.test('abc123')   true
'''括号内什么都不写 就相当于写了undefined'''
reg2.test() 	true

全局匹配
在正则表达式的最后添加一个字母g
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;

修饰符	含义
g	表示全文搜索匹配,不添加,搜索到第一个匹配停止
i	表示忽略大小写进行匹配,默认大小写敏感
m	表示进行多行搜索匹配

常用正则表达式

验证字母：/^[a-zA-Z]+$/
验证长度为3的字符：/^.{3}$/
验证由26个英文字母组成的字符串：/^[A-Za-z]+$/
验证日期YYYY-MM-DD：/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/
验证邮编：/^\d{6}$/
验证日期格式YYYY-MM-DD hh:mm:ss：/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/
验证整数：/^[-+]?\d*$/
验证小数：/^[-\+]?\d+(\.\d+)?$/
验证中文：/^[\u0391-\uFFE5]+$/
验证邮箱：/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
验证手机号：/^1[3456789]\d{9}$/
验证身份证：/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/

BOM操作

BOM对象

window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性:
  document 对象，文档对象；
  location 对象，浏览器当前URL信息；
  navigator 对象，浏览器本身信息；
  screen 对象，客户端屏幕信息；
  history 对象，浏览器访问历史信息；

window对象常用的方法

弹框类的方法。前面省略window

alert('提示信息')
confirm("确认信息")
prompt("弹出输入框")
open("url地址"，“打开的方式（可以是-self或-black）”，“新窗口的大小”）注：如果url为空，则默认打开一个空白页面，如果打开方式为空，则默认为新窗口方式打开页面。返回值为：返回新打开窗口的window对象
  window.open('https://www.baidu.com','','width=400,height=400')
close()  关闭当前的网页。 注：存在兼容性问题  FF：禁止设置关闭浏览器的代码
                                        Chrome：默认直接关闭
                                        IE：询问用户

window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

定时器，清除定时器。

setTimeout(函数，时间) 只执行一次
setInterval(函数，时间) 无限执行

clearTimeout/clearInterval(定时器名称) 清除定时器

location对象

window.location对象：用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。在编写时可不使用 window 这个前缀。

window.location.href 获取页面的url地址
window.location.href = url  # 跳转到指定页面
window.location.reload()  # 刷新页面

hash 返回#号后面的字符串，不包含散列，则返回空字符串。
host 返回服务器名称和端口号
pathname 返回目录和文件名。 /project/test.html
search 返回？号后面的所有值。
port 返回URL中的指定的端口号，如URL中不包含端口号返回空字符串
portocol 返回页面使用的协议。 http:或https:

navigator对象

window.navigator 对象包含有关访问者浏览器的信息。在编写时可不使用 window 这个前缀。

navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。
navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
userAgent是最常用的属性，用来完成浏览器判断。

screen对象

window.screen 对象包含有关用户屏幕的信息。

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

document.write(screen.availHeight+screen.availWidth);//获取屏幕的宽度和高度之和

history对象

window.history 对象包含浏览器的历史。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

history.back() - 加载历史列表中的前一个 URL。返回上一页。
history.forward() - 加载历史列表中的下一个 URL。返回下一页。
history.go(“参数”) -1表示上一页，1表示下一页。

window.history.forward():返回下一页
window.history.back():返回上一页
window.history.go(-1/1):返回上一页或下一页、
window.history.go("www.baidu.com")；

DOM操作

Document Object Model是指文档对象模型，通过它可以操作HTML文档的所有元素
但是HTML页面上有很多相同的标签 所以我们在操作HTML标签之前还要先学会如何查找标签(js查找标签)

'''直接查找'''
# 通过标签名查找标签
document.getElementsByTagName('div')  # 数组套标签对象
# 通过class值查找标签
document.getElementsByClassName('c1')  # 数组套标签对象
# 通过id值查找标签
document.getElementById('d1')  # 标签对象本身

'''间接查找'''
parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素
# 方法得出的标签对象还可以继续点击上述方法