JS数据类型
JS数据类型之布尔值
1.布尔值(Boolean)
在js中布尔值用用true和false来表示(都是小写)
2.(空字符串)、0、null、undefined、NaN都是false
2.1null表示这个变量的值时空(需要指定或清空一个变量时)
2.2undefined表示当声明了一个变量,但还没有赋值
'console.log()相当于python的print()'
JS数据类型之数组
'在js中也是一切皆对象'
1.对象之数组(相当于python的列表)
let l1 = [11, 22, 33]
2.forEach()
var l1 = [1, 2, 3, 4, 5]
l1.forEach(function(a){console.log(a)}) // 相当于for循环打印列表
/*
1
2
3
4
5
*/
3.splice()
var l1 = [1, 2, 3, 4, 5]
l1.splice(2,1,6) // 在2的位置(第3个)开始删除1个元素并添加6,新元素可添加可不添加
// l1 = [1, 2, 6, 4, 5]
4.map()
var l1 = [1, 2, 3, 4, 5]
l1.map(function(a){return a + 1}) // 修改数组内部所有的元素
// [2, 3, 4, 5, 6]
方法 | 说明 |
.length | 数组的大小 |
.push(ele) | 尾部追加元素 |
.pop() | 获取尾部的元素 |
.unshift(ele) | 头部插入元素 |
.shift() | 头部移除元素 |
.slice(start,end) | 切片 |
.reverse() | 反转 |
.join(seq) | 将数组元素连接成字符串 |
concat(val,...) | 连接数组 |
.sort() | 排序 |
.forEach() | 将数组的每个元素传递给回调函数 |
.splice() | 删除元素并向数组添加新元素 |
.map() | 返回一个数组元素调用函数处理后的值的新数组 |
JS数据类型之自定义对象(object)
1.自定义对象(相当于python中的字典)
1.1定义方法1:
let d1 = {'name':'barry','pwd':123}
1.2定义方法2:
let d2 = new Object()
2.在自定义对象操作数据值的方式很简单,直接使用句点符
d.name
JS常见运算符
var x=10; 赋值
var res1=x++; 先赋值后自增
var res2=++x; 先自增后赋值
== 弱等于(自动转换成相同数据类型)
=== 强等于(不自动转换)
&& 等价于python中and
|| 等价于python中or
! 等价于python中not
JS流程控制
JS流程控制之分支结构
1.单if分支
if(条件){条件成立之后执行的代码}
2.if...else分支
if(条件){条件成立之后执行的代码
}else{条件不成立之后执行的代码}
3.if...elif...else分支
if(条件1){条件1成立之后执行的代码
}else if(条件2){条件1不成立条件2成立之后执行的代码
}else{条件都不成立之后执行的代码}
JS流程控制之循环结构
1.switch
var day = new Date().getDay();
switch (day) {
case 0:
console.log('sunday');
break;
case 1:
console.log('monday');
break;
default:
console.log('...')}
2.for循环
for(let i=1;i<101;i++){console.log(i)}
3.while循环
while(条件){循环体代码}
JS函数
JS函数分类
1.普通函数定义
function 函数名(形参){
函数体代码
return 返回值
}
2.带参数的函数
function func(a, b){
console.log(a, b)
}
'参数的个数不需要一一对应,如果想限制参数个数需要使用内置关键字arguments'
function func(a, b){
if(arguments.length==2){
console.log(a, b)
}else{
console.log('参数个数不对')
}
}
3.匿名函数
function(a, b){
return a + b;
}
4.箭头函数
var f = function(v){
return v;
}
// 等同于
var f = v => 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函数名称空间与作用域
1.局部变量
在JavaScript函数内部声明的变量(使用var)是局部变量,所以只能在函数内部访问它,只要函数运行结束,本地变量就会被删除
2.全局变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它
3.变量生存周期
局部变量会在声明开始到运行结束后被删除
全局变量会在声明开始到页面关闭后被删除
4.作用域
在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层
JS内置对象
1.固定语法
var 变量名 = new 内置对象名();
2.Date日期对象
var d1 = new Date();
console.log(d1.toLocaleString());
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月(0-11)
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
2.JSON序列化对象
2.1将对象转换成JSON字符串
JSON.stringify()
2.2JOSN字符串转换成对象
JSON.parse()
3.RegExp正则对象
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
类型 | 内置函数 | 介绍 |
数据类型 | Number | 数字对象 |
数据类型 | String | 字符串对象 |
数据类型 | Boolean | 布尔值对象 |
组合对象 | Array | 数组对象 |
组合对象 | Math | 数字对象 |
组合对象 | Date | 日期对象 |
高级对象 | Object | 自定义对象 |
高级对象 | Error | 错误对象 |
高级对象 | Function | 函数对象 |
高级对象 | RegExp | 正则表达式对象 |
高级对象 | Global | 全局对象 |
BOM与DOM操作
1.BOM:浏览器对象模型
通过写js代码可以跟浏览器交互
2.DOM:文档对象模型
通过写js代码可以访问html文档的元素
3.BOM操作
3.1window的子对象
window.open() // 打开新窗口
window.close() // 关闭当前窗口
window.navigator.userAgent() // 客户端的大部分信息
window.history.forward() // 前进一页
window.history.back() // 后退一页
window.location.href // 获取当前页面的地址(URL)
window.location.href = 新网址 // 跳转到指定页面
window.location.reload() // 重新加载页面
alter() // 警告框
confirm() // 确认框
prompt() // 提示框
3.2定时器相关操作(重要)
function func1(){
alert('我什么场面没见过')
}
let t = setTimeout(func1,3000) // 3秒之后自动执行func1函数
clearTimeout(t) // 取消上面的定时任务
'每3秒自动执行func1重复3次'
var s1 = null
function showMsg(){
function func1(){
alert('这场面我真没见过')}
s1 = setInterval(func1,3000)}
function clearMission(){
clearInterval(s1)}
setTimeout(clearMission,10000)
showMsg()
4.DOM操作
4.1查找标签
document.getElementByld()
根据id值查找标签,结果直接是标签对象本身
document.getElementByClassName()
根据class值查找标签,结果是数组类型
document.getElementByTagName()
根据标签名操作标签,结果是数组类型
4.2间接查找
parentEement // 父节点标签元素
children // 所有子标签元素
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
"let divEle = document.getElementById('d1')"
4.3节点操作
let XXXEle = document.createElement('标签名') // 创建节点
XXXEle.id = 'id值' // 添加id值
XXXEle.innerText = '内部文本' // 设置文本节点的值
divEle.append(XXXEle) // 追加一个子节点
4.4属性操作
XXXEle.属性 自带的属性还可以直接.属性名来获取和设置
XXXEle。setAttribute 可以设默认属性、自定义属性
4.5文本操作
获取文本节点的值:
divEle.innerHTML
divEle.innerText
'区别在于有没有赋值符号(=)'
设置文本节点的值:
divEle.innerHTML = '<h1>嘿嘿嘿</h1>' // 能识别标签
divEle.innerText = '<h1>哈哈哈</h1>' // 不能识别标签