前端（五）

目录

• 运算符
  • 算术运算符
  • 比较运算符
  • 逻辑运算符
• 流程控制
  • if判断
  • switch
  • while
  • do/while
  • for循环
• 三元运算符
• 函数
  • 无参函数
  • 有参函数
  • 返回值参数
  • 匿名函数
  • 箭头函数
• 自定义对象
• 内置对象
  • Date对象
  • 小练习:2017-12-27 11:11 星期三
  • JSON对象
  • 正则对象
• BOM操作(了解)
• DOM操作
  • 直接查找
  • 间接查找

运算符

算术运算符

var x=10;
var res1=x++;  // 先赋值后自增1  10
var res2=++x;  // 先自增1后赋值  12

比较运算符

弱等于:自动转换类型
'5' == 5  '结果是true js会自动转换成相同数据类型比较值是否一样'
强等于:不转换类型,必须完全一样才为true
'5' === 5  '结果是false'

逻辑运算符

&&与  ||或  !非

流程控制

if判断

if...else if...else分支// 单if
if(条件){
      // 条件成立执行的分支代码块
    }
// if else分支
if(条件){
	// 条件成立执行的分支代码块
}else{
	// 条件不成立执行的分支代码块
}
// if...else if...else分支
if(条件1){
	// 条件1成立执行的分支代码块
}else if(条件2){
	// 条件1不成立条件2成立执行的分支代码块
}else{
	// 条件1和2都不成立执行的分支代码块
}

switch

var n1 = 1;
switch (n1) 
{
	case 0:
		console.log("干饭");
		break;  # 如果不加break会基于当前位置一直往下运行
	case 1:
		console.log("睡觉");
		break;
	case 2:
		console.log("玩耍")
	default:  # 没有对应条件统一执行default子代码
		console.log("无所事事!!!")
}

while

while (条件)
{
    // 需要执行的代码
}

do/while

do
{
    // 需要执行的代码
}
while (条件);

至少会执行一次

for循环

for(初始值;循环条件;每次循环之后的操作){
    // 循环体代码
}

三元运算符

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

函数

函数定义:
function 函数名(参数1,参数2){
函数体代码
return 返回值
}
1.function 定义函数的关键字
2.函数名的命名参考变量名 并且js推荐使用驼峰体(Myfunc\MyFunc)
3.参数可写可不写
4.return返回值
函数调用:
函数名加括号 有参则传参即可

无参函数

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

有参函数

function f2(a, b){console.log(a,b)}
f2()  # 可以调用 相当于传了两个undefined
f2(1)  # 可以调用 
f2(1,2)  # 可以调用
f2(1,2,3,4,5)  # 可以调用
function f2()
{
	console.log(arguments)
	if (arguments.length === 0){
		console.log('什么参数都没传')
	}else if(arguments.length === 1){
		console.log('传了一个参数')
	}else{
		console.log('传了多个参数')
	}
}

js中的函数提供了有个内置关键字arguments:接收所有参数
实参的集合（不是数组，但是类似数组，有length，也可以用下标找到其中的数据）
当函数参数个数无法确定的时候，用arguments

返回值参数

return不支持返回多个数据

匿名函数

var ff = function ()
{
	console.log(123)
}
// ff可以看成函数名

箭头函数

var f = v => v;
	// 等同于(箭头左边是形参右边是返回值)
var f = function(v)
{
	return v;
}
var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2)
{
	return num1 + num2;  
    //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
作用域(与python一致)

自定义对象

自定义对象(相当于python里面的字典)

var d1 = {'name':'jason','age':18}
// python字典取值操作js中的自定义对象都有,并且自定义对象还可以直接通过句点符取值,更像一个对象
// 取值操作
d1.name  # jason
// 循环取值
for(var i in d1)
{
	console.log(d1[i])
}
// 定义自定义对象还有一种标准格式(自定义对象 内置对象 第三方对象)
var d2 = new Object()  // 相当于生成了空字典

内置对象

Date对象

var d1 = new Date()
d1.toLocaleString()  // 2022/4/28 10:47:01
d1.toLocaleDateString()  // 2022/4/28
d1.toLocaleTimeString()  // 10:47:01

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

小练习:2017-12-27 11:11 星期三

const WEEKMAP = {  
  0:"星期天",
  1:"星期一",
  2:"星期二",
  3:"星期三",
  4:"星期四",
  5:"星期五",
  6:"星期六"
};  //定义一个数字与星期的对应关系对象


function showTime() 
{
	var d1 = new Date();
	var year = d1.getFullYear();
	var month = d1.getMonth() + 1;  //注意月份是从0~11
	var day = d1.getDate();
	var hour = d1.getHours();
	var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  //三元运算
    var week = WEEKMAP[d1.getDay()];  //星期是从0~6
    var strTime = `
    ${year}-${month}-${day} ${hour}:${minute} ${week}
    `;
    // var strTime = year + '-' + month + '-' + day + '-' + hour + '-' + minute + '-' + week
    console.log(strTime);
};
showTime();

JSON对象

// js中如何序列化反序列化
JSON.stringify();
JSON.parse();

正则对象

// 创建正则表达式的两种方式
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('jason123')  // true
// 括号内什么都不写 就相当于写了undefined
reg2.test()  //  true

// 验证
var reg3 = /undefined/
reg3.test('jason666')  // false
reg3.test('undefined')  // true
reg3.test()  // true

// 全局匹配
//  在正则表达式的最后添加一个字母g
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg3.lastIndex  // 0
reg3.test('jason666')  // true
reg3.lastIndex  // 8
reg3.test('jason666')  // false

BOM操作(了解)

window.open('https://www.baidu.com','','width=400,height=400')
/* 
打开子页面 
	子页面的操作其实可以通过一些手段传递给父页面(父子联动)
关闭页面
	window.close()  
*/
window.navigator.appVersion
window.navigator.userAgent


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


window.location.href  // 获取页面的url地址
window.location.reload()  // 刷新页面
window.location.href = url  // 跳转到指定页面
// window可以省略不写

// 弹框系列
alert("你看到了吗？")  // 警告
confirm('要不要敲老赵的天灵盖')  // 确认
// 获取用户是点击取消还是确认 返回false和true
prompt('你还有什么要交代的吗')  // 提示
// 获取用户输入的内容 也可以通过第二个参数添加默认内容
   
// 计时器
// 单次定时
var t = setTimeout(showMsg,9000)  // 9秒钟之后自动执行showMsg
clearTimeout(t)  // 取消定时器
// 循环定时
var s = setInterval(showMsg,3000)  // 每隔3秒执行一次
clearInterval(s)  // 取消定时器
  
function showMsg() 
{
	alert(123)
}
var t = setInterval(showMsg,3000)
function clearMsg() 
{
	clearInterval(t)
}
setTimeout(clearMsg, 9000)
// 轮播图会用到计时器

由于DOM是操作页面上的HTML代码 但是HTML页面加载顺序是从上往下
所以如果想要我们的代码能够正常执行 必须要先等待html页面加载完毕

解决的措施之一:
将script标签写在body内最下方

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  // 上一个兄弟标签元素
// 方法得出的标签对象还可以继续点击上述方法