HTML基础（4）
运算符
# 1.算术运算符
+ 加法；- 减法； * 乘法； / 除法； % 取余；
# 自增 ++
var x=10;
var res1=x++; '先赋值后自增1'
var res2=++x; '先自增1后赋值'
# 2.比较运算符
弱等于:自动转换类型
'5' == 5 '结果是true js会自动转换成相同数据类型比较值是否一样'
强等于:不转换类型
'5' === 5 '结果是false'
# 3.逻辑运算符
逻辑运算符用来确定变量或值之间的逻辑关系
x=6 and y=3,
&& 和 (x < 10 && y > 1) 为 true
|| 或 (x == 5 || y == 5) 为 false
! 非 !(x == y) 为 true
流程控制
选择结构
# 1.if语句；
语法：
if(条件){
条件为true时，执行的代码段
}
# 2.if...else语句；
语法：
if(条件){
条件为true时，执行的代码段
}else{
条件为false时，执行的代码段
}
# 3. if ...else if..else语句；
语法：
if(条件1){
当条件1为true时，执行的代码段
}else if(条件2){
当条件2为true时，执行的代码段
}else{
当条件都不满足时，执行的代码段
}
# 4.if语句嵌套；
语法：
if条件1(){
if(){
}else{
}
}else{
}
# 5.switch语句；
' // 优点：只判断一次,效率更高；更严谨，判断相等时使用的是全等在判断'
语法：
switch(要判断的变量){
case 值1:
变量跟值1相等时执行的代码段
break;# 如果不加break会基于当前位置一直往下运行
case 值2:
变量跟值2相等时执行的代码段
break;
.....
default: # 没有对应条件统一执行default子代码
当所有值跟变量不相等时执行的代码
}
循环结构
# 1.while 先判断条件是否成立在执行
语法：
while(条件){
当条件为true时，重复执行的代码段；
改变变量
}
# 2.do..while 不管条件是否成立，都会执行一次
语法：
do{
代码段
改变变量
}while(条件)
3.for
语法：
for(初始值;条件;初始值的变化){
当条件为true时，执行的代码段
}
执行流程：初始值；判断条件；输出；初始值的变化
# 循环打印0到9的数字
for (var i=0;i<10;i++) {
console.log(i);
}
"""
使用for循环打印出数组内所有的元素
var l1 = [11, 22, 33, 44, 55]
for(var i=0;i<l1.length;i++){
console.log(l1[i])
}
"""
三元运算符
# 语法结构：
条件 ？ 操作1 ： 操作2。 如果条件为真，执行操作1，否则执行操作2
python中的三元运算
res = 11 if 1 > 2 else 22
'''if后面的条件成立则使用if前面的值 不成立则使用else后面的值'''
js中的三元运算
res = 1 > 2 ? 11 : 22
'''问号前面的条件成立则使用冒号左边的值 否则使用冒号右边的值'''
# 三元运算一般情况下都不推荐嵌套使用!
函数
# 函数定义:
function 函数名(参数1,参数2){
函数体代码
return 返回值
}
1.function 定义函数的关键字 相当于python中的def
2.函数名的命名参考变量名 并且js推荐使用驼峰体(Myfunc\MyFunc)
3.参数可写可不写
4.return返回值
函数调用:
函数名加括号 有参则传参即可!!!
# 函数返回值
当 JavaScript 到达 return 语句，函数将停止执行。
如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者
'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) # 可以调用
'''js中的函数提供了有个内置关键字arguments:接收所有参数'''
function f1(){
console.log(arguments)
if (arguments.length === 0){
console.log('什么参数都没传')
}else if(arguments.length === 1){
console.log('传了一个参数')
}else{
console.log('传了多个参数')
}
}
函数的返回值
# 函数返回值
当 JavaScript 到达 return 语句，函数将停止执行。
如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者
'return不支持返回多个数据'
# 计算两个数的乘积，并返回结果
var x = myFunction(7, 8); // 调用函数，返回值被赋值给 x
function myFunction(a, b) {
return a * b; // 函数返回 a 和 b 的乘积
}
# 56
箭头函数
# 5.箭头函数(drf中vue框架会再次接触)
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只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
自定义对象
# 基本概念
根据JS的对象扩展机制，用户可以自定义JS对象，这与Java语言有类似的地方。
与自定义对象相对应的是JS标准对象，例如Date、Array、Math等等
# 对象初始化器方式
格式：objectName = {property1:value1, property2:value2,…, propertyN:valueN}
var d1 = {'name':'jason','age':18}
python字典取值操作js中的自定义对象都有 并且自定义对象还可以直接通过句点符取值 更像一个对象
取值操作
d1.name # jason
循环取值
for(var i in d1){
console.log(d1[i])
}
定义自定义对象还有一种标准格式(自定义对象 内置对象 第三方对象)
var d2 = new Object() # 相当于生成了空字典
# 构造函数方式
格式如下：function User(name,age){
this.name=name;
this.age=age;
this.canFly=false;
}
var use=new User();
内置对象
Date 对象
# Date 对象
Date 对象用于处理日期与时间。
创建 Date 对象： new Date()
var f = Date()
f.toLocaleString()
'Thu Apr 28 2022 16:54:14 GMT+0800 (中国标准时间)'
f.toLocaleDateString()
'2022/4/28'
f.toLocaleTimeString()
'16:59:39'
# 小练习:
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();
2022-4-28 17:02 星期四
| Date对象方法 |
描述 |
| getDate() |
获取日 |
| getDay () |
获取星期 |
| getMonth () |
获取月（0-11） |
| getFullYear () |
获取完整年份 |
| getHours () |
获取小时 |
| getMinutes () |
获取分钟 |
| getSeconds () |
获取秒 |
| getMilliseconds () |
获取毫秒 |
| getTime () |
返回累计毫秒数(从1970/1/1午夜) |
JSON对象
JSON 是用于存储和传输数据的格式
JSON 通常用于服务端向网页传递数据
# js中如何序列化反序列化
JSON.stringify()
JSON.parse()
# 代码示例：
var f = 222
JSON.stringify(f)
'222'
JSON.parse(f)
222
正则对象
# 1. 定义正则两种方式
1. var reObj1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}$");
2. var reObj2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}$/
# 2. 常用方法
reObj1.test("将要被校验的字符串")
# 3. 正则的匹配模式
1. g --> 全局
"Alexdashabi".replace(/a/g, "呵呵")
2. i --> 不区分大小写
"Alexdashabi".replace(/a/i, "呵呵")
// RegExp对象 ---> Python re模块
// 生成RegExp对象
'''
注意点：
1.正则表达式中间一定不可以有空格
2.test()不传值相当于传了一个undefined进去，然后test()就把这个undefined当成是“undefined”来判断
3.JS正则的两种模式1. g表示全局 2. i忽略大小写'''
正则对象的全局匹配
'''当正则表达式使用了全局模式（g）的时候，并且你还让它去检测一个字符串，此时会引出来一个
lastIndex, lastIndex会记住上一次匹配成功的位置，并把下一次要开始校验的位置记住'''
# 代码示例：
var r = /alex/g;
console.log(r.test("alex")); // true
console.log(r.lastIndex); // 打印出4， lastIndex(0-3)
console.log(r.test("alex")); // false ,因为是从lastIndex=4开始校验的
console.log(r.lastIndex); // 打印出0， lastIndex(0-3)
console.log(r.test("alex")); //true 同理
console.log(r.lastIndex);
console.log(r.test("alex")); // false
BOM操作
浏览器对象模型（Browser Object Model (BOM)）
它使 JavaScript 有能力与浏览器进行“对话”
所有浏览器都支持 window 对象。它代表浏览器的窗口
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员
全局变量是 window 对象的属性
全局函数是 window 对象的方法
BOM-窗口操作
# window.open();
window.open('https://www.baidu.com','','width=400,height=400')
# window.innerHeight;
获取浏览器的高度
# window.innerWidth;
获取浏览器的宽度
# window.close()
关闭当前窗口
BOM-history对象
# window.history
对象包含浏览器历史
# history.back()
等同于在浏览器点击后退按钮
# history.forward()
等同于在浏览器中点击前进按钮
BOM-Navigator对象
# window.navigator
对象包含有关访问者的信息
#navigator.platform
mac ，Windows
#navigator.cookieEnabled
属性返回 true，如果 cookie 已启用，否则返回 false：
#navigator.product
属性返回有关浏览器的版本信息：
#navigator.userAgent
属性返回由浏览器发送到服务器的用户代理报头（user-agent header）：
#navigator.language
属性返回浏览器语言：
BOM- location对象
# window.location
对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面
# window.location.reload()
刷新页面
# 常用属性和方法：
console.log(location.href); //获取URL
// console.log(location.href="URL"); // 跳转到指定页面
// console.log(location.reload()); //重新加载页面
BOM-弹出框
JavaScript 有三种类型的弹出框：警告框、确认框和提示框。
# 警告框
// 当警告框出现后，用户需要点击确定按钮才能继续进行操作。
// 语法：
// alert("你看到了吗？");
# 确认框（了解即可）
// 当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
// 如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
// 语法：
// confirm("你年满18岁了吗？");
# 提示框（了解即可）
// 提示框经常用于提示用户在进入页面前输入某个值。
// 当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
// 如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
//语法：
// prompt("请在下方输入","你的答案");
BOM-计时器
# 计时的概念
通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件
# setTimeout() 语法
'''单次定时'''
var s=setTimeout("alert(123)",5000) //第一个参数是你要执行的语句是什么，第二个参数是你要等多少秒之后执行（毫秒）
clearTimeout(t) # 取消定时器
# setInterval()
'''循环定时'''
console.log(setInterval(foo,1000));//这是每隔1秒钟执行一次函数，
// setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
clearInterval() # 取消定时器
'''由于DOM是操作页面上的HTML代码 但是HTML页面加载顺序是从上往下
所以如果想要我们的代码能够正常执行 必须要先等待html页面加载完毕
解决的措施之一:
将script标签写在body内最下方'''
DOM操作
通常，通过 JavaScript，您需要操作 HTML 元素。
为了达成此目的，您需要首先找到这些元素。有好几种完成此任务的方法：
通过 id 查找 HTML 元素
通过标签名查找 HTML 元素
通过类名查找 HTML 元素
通过 CSS 选择器查找 HTML 元素
通过 HTML 对象集合查找 HTML 元素
'''直接查找'''
# 通过标签名查找标签
document.getElementsByTagName('div') # 数组套标签对象
# 通过class值查找标签
document.getElementsByClassName('c1') # 数组套标签对象
# 通过id值查找标签
document.getElementById('d1') # 标签对象本身
'''间接查找'''
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
# 方法得出的标签对象还可以继续点击上述方法
浙公网安备 33010602011771号