js学习

昨日回顾—温故而知新

溢出属性overflow

用于处理超过盒子高宽的内容

overflow:hidden：隐藏文本内容，overflow: auto\scroll; 提供滚动条查看

定位属性

静态定位static
相对定位relative
绝对定位absolute
固定定位fixed

z-index属性

前端界面其实是一个三维坐标系，z轴指向用户；动态的定位属性弹出的分层界面，我们也称之为模拟态

层数高的会遮挡在层数低的页面之上

z-index: 11;  /* 11层级 */
position: fixed;  /* 固定定位 */

JavaScript简介

js是一门前端语言，属于解释型语言，由于本身开发时间较短和后期补丁过多，js中有很多不符合逻辑的地方

变量与注释

// 单行注释

/*多行注释*/

分号结束   console.log('hello world');

在js中定义变量需要使用关键字声明


全局变量
var 变量名 = '变量值'

局部变量
let 变量名 = '变量名'

常量声明
const 常量名 = 常量值

数据类型

查看数据类型的方式：typeof

数值类型 Numbe
字符类型 string
字符的拼接 +
统计长度 length
移除空白 trim()、trimLeft()、trimRight()
切片操作 substring(start,stop)、slice(start,stop)
大小写转换 .toLowerCase()、.toUpperCase()
切割字符串目标.split(' ', 检索值)

布尔类型

js中布尔值是全小写

true false

布尔值为false的 0 空字符串 null undefined NaN

"null的意思是空 undefined的意思是没有定义"

对象

相当于列表、字典、对象

Array

数组 = 列表 var 变量名1 = [1, 2, 3 ]

今日内容

运算符

算术运算符

数据在进行运算的时候，会尽量转为数字在进行运算（内置帮我们去转的，属于隐式转换）符合Number的规律，一旦遇到字符串表示拼接将另一边数据也转为字符串：

++ ：不管++在前还是++在后都表示自身加1，++在前表示先自身加1，然后再进行运算，++在后表示先进行运算然后再自身加1
-- ：不管--在前还是--在后都表示自身减1，--在前表示先自身减1，然后再进行运算，--在后表示先进行运算然后再自身减1

'5' == 5 弱等于:自动转换类型
=== 绝对等于 !== 绝对不等于

逻辑运算符

&&与：表示且的的关系，都为真才为真，一假即假
||或：表示或者的关系，都为假才为假，以真即真
! 非：取反

if判断

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

  4.switch语法
  	var 变量名 = 1;
    switch (n1) {
      case 0:
      console.log("1");
      break;  # 如果不加break会基于当前位置一直往下运行
      case 1:
      console.log("2");
      break;
      case 2:
      console.log("3")
    default:  # 没有对应条件统一执行default子代码
      console.log("4")
    }

while循环

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

for循环

for(初始化变量;条件表达式;操作表达式){
	//循环体
}

三元运算符

语法结构：**条件表达式 ? 表达式1 : 表达式2

问号前面的条件成立则使用冒号左边的值否则使用冒号右边的值

函数

数据格式:
function 方法名(){
    //要执行的代码
  	return 返回值
}

1.无参函数
function f1(){}
2.有参函数
function f1(形参1，形参2){}
f2()  # 可以调用 相当于传了两个undefined
f2(实参1)  # 可以调用 
f2(实参1,实参2)  # 可以调用
f2(实参1,实参2,实参3)  # 可以调用
 '''js中的函数提供了有个内置关键字arguments:接收所有参数'''
console.log(arguments)

3.返回值参数
	return不支持返回多个数据

4.匿名函数
(function(){
    console.log("匿名函数自执行");
})();

5.箭头函数(drf中vue框架会再次接触)；
function foo(x,y) { 
 return x + y; 
} 
// 等于
var foo = (x,y) => x + y;

https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.joqng.com%2Fzb_system%2FweixinImg.php%3FimgUrl%3Dhttp%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz%2FiaelMVEiaorWdzRGoCURhBERickiaGOeSaQm9LibEy1qmN1iblbIQx9SuJwlc4iaT3Y9M6az9BY7NjepHsXKcia7ibLSw4w%2F0%3Fwx_fmt.gif&refer=http%3A%2F%2Fwww.joqng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653740905&t=0e6987e572c78bf3e68daf6a1120d452

自定义对象

对象的展示形式就是一个{}，里面的属性和方法均是键值对

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

python 字典用点取值

内置对象

# 内置对象可以看成是python中的内置方法 内置模块等提前写好直接调用

# 1.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}
    `;
    console.log(strTime)
};

showTime();

json对象

JSON.stringify()  # 序列化
JSON.parse()  # 反序列化

正则对象

创建正则表达式 var 变量名 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;  # 推荐使用(简化)

使用正则 变量名.tese('需要筛选的数据')

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

BOM操作

Browser Object Model是指浏览器对象模型，它使 JavaScript

弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小
页面的前进、后退

属性名称	说明
history	有关客户访问过的URL的信息
location	有关当前 URL 的信息

基本方式

方法名称	说明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式

DOM操作

前端开发始终绕不过的就是操作DOM，在Vue，Angular，React等框架出现后，我们通过操作数据来控制DOM（绝大多数时候），越来越少的去直接操作DOM。


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

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

今日小结

学习js也算是重温了一边代码

posted @ 2022-04-28 20:31 Eason辰阅读(49) 评论(0) 收藏举报

刷新页面返回顶部

Eason_chen

js学习

js学习

昨日回顾—温故而知新

溢出属性overflow

定位属性

z-index属性

JavaScript简介

变量与注释

数据类型

布尔类型

对象

今日内容

运算符

算术运算符

逻辑运算符

三元运算符

函数

自定义对象

内置对象

json对象

正则对象

BOM操作

DOM操作

今日小结

公告