JavaScript?
脚本语言
创造者
2. 入门
2.1
-
内容部标签, JavaScript内容写在中
-
外部引用
<!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <title>这是标题</title> <!--script标签内写JavaScript代码--> <script src="./j1.js"> </script> </html>
2.2基本语法知识
- 注释: 和java一样 // 后面需要有空格
- JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写
3. 数据类型
3.1 var 关键词告知浏览器创建新的变量
3.2 查看数据类型:
typeof 0 // 返回 "number"
typeof 314 // 返回 "number"
typeof 3.14 // 返回 "number"
typeof (7) // 返回 "number"
typeof (7 + 8) // 返回 "number"
number
字符串
`` tab键上的
var str = `
aaaaaaa
bbbbbbb
ccccccc
`
console.log(str);
模板字符串
console.long("abc,${name}")
-
字符串操作:
str.length etc.
比较运算符
// == 等于(类型不一样,值一样会判断为 true)
// === 绝对等于(两者都要等)
// -- NaN 与所有数值都不等,包括自己
// -- 只有isNaN(NaN) 判断是否是
// != 不相等
// !=== 值不相等或类型不相等
// && || !
// 条件运算法:
// variablename = (condition)?a:b
数组 //多维数组
数组可以包含不同类型数据 (python)
-
超出数据类型,是undefined
-
注:array.length=新长度, 数组长度可变的,变小元素丢失。
-
arr.slice() 截取
-
arr.push(), pop() 尾操作
-
unshift() , shift() 对应于5,头操作
-
arr.concat(str) 返回一个新数组,不是修改原来的
对象
对象是大括号{ },若干个键值对
console.log("satart");
var person ={
name: "zz", // 键都是字符串,值任意
age: 3,
tags: [1,2,3]
}
person.age
var 对象名 = {
属性名:属性值,
...}
-
动态属性删除: delete person.age
-
添加属性 person.id = ‘1234’
-
判断对象是否包含某个属性
3.3 作用域:
局部变量用let 声明
3.4 数组循环
Array.foreach() 函数:
1--------------
let text;
arr.forEach(myf);
function myf(value){
text += "<li>"+value+"</li>";
}
console.log(text);
2------------------
arr.forEach(function (value){
.....;
})
3---------------
for (var value in arr){
myf(value)
}
3.5 Map . Set
Map 类似字典
var map = new Map([['a', 1],['b', 2]])
console.log(map.get('a'))
map.set('a',100)
console.log(map.get('a'))
Set 无序集合
var set = new Set([1,2,3,22,22]) //去除重复的
iterator 迭代次,map和set都有
3.6 遍历数组,Map,Set
var map = new Map([['a', 1],['b', 2]])
for (let i of map){ // of 是value
console.log(i);
}
var list = [1, 2, 3]
for(let j in list){ // in 是下标
console.log(j);
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KhouxSHk-1646309307287)(C:\Users\zz\AppData\Roaming\Typora\typora-user-images\image-20220225224306148.png)]
4. 函数
4.1 函数定义
function f(value){ ...... } var abs = function(x){ ...... }
参数问题
arguments
,代表传进来的所有参数function myf(value){ //会输出所有参数 console.log(value); for(let i=0;i<arguments.length;i++){ console.log(arguments[i]); } } myf(123,1,23,42);
rest
, 获取除之前已经定义的参数function myf(a,...rest){ console.log(rest); //除a 其他参数 }
4.2 全局对象 window
window.alert 既是函数又不是变量
var old = window.alert; window.alert = funcion(){ //改写 } var x =10; //x === window.x
注意:全局变量都会绑定到window,不同js使用相同全局变量会有冲突
4.2 变量作用域
作用域,常量es6 ,const PI=‘3.14’;
apply
控制js中this的指向
function getAge(){
// 获得年龄
}
var person ={
name:"aa",
age: getAge
}
getAge.apply(person,[]) // 指向person,参数为空
5. 常用对象
5.1 日期
var d = new Date()
5.2 数学
没有构造函数,都是静态 : Math.abs()
5.3 随机
Math.random();
Math.floor(Math.random() *10) // 返回0 9 整数
Math.floor(Math.random() *(max- min)) + min // 介于max,min之间 含min不含max
Math.floor(Math.random*(max - min +1))+min //包含min max
5.4 逻辑
// Boolean(1>2) false 函数判断
// 布尔也可是对象
var y = new Boolean(false);
5.5 JSON
JSON在js中,一切对象都可以用JSON字符串表示
var user = {
'name':'zz',
'age': 23
}
var jsonUser = JSON.stringify(user);
var user2 = JSON.parse(jsonUser)
console.log(user2);
console.log(jsonUser);
5.6 Ajax
- 原生Js写法, xhr异步请求
- jQuery 封装好的方法
- axios 请求
6 对象
6.1 构造使用
构造 / set get用法 static
class obj {
constructor(name){
this.name = name;
}
test(){
....
}
}
// -------------------
class one extends{
constructor(name,age){
super(name);
this.age = age;
}
}
6.2 原型链
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gUVWLrvV-1646309307289)(C:\Users\zz\AppData\Roaming\Typora\typora-user-images\image-20220301161133024.png)]
7.操作BOM对象(*)
window
window代表 浏览器窗口
window.Navigator
封装了浏览器的信息
screen
代表屏幕
代表当前URL信息
//window.location
href: 当前URL
hostname:
pathname: 当前页面的路径或文件名
protocal: 协议
port:
window.location.assign(new) // 加载新文档
document
代表当前页面
获取具体文档树结点
var s = document.getElementById('id')
//获取cookie
document.cookie
history
history.back()
history.forward()
8. DOM
- 增
- 删
- 查
- 改
8.1 获取结点方法
var n1 = document.getElementsByTagName('h1');
let n2 = document.getElementById('p1');
let n2 = document.getElementsByClassName('className');
var father = document.getElementById('father');
var childrens = father.children;
father.firstChild
father.lastChild
8.2 更新结点
-
更新文本
var d1 = document.getElementById('d1'); d1.innerHtml = '<p>开始</p>'; d1.innerText = 'start!';
-
更新样式 css
let n2 = document.getElementsByClassName('className'); n2.style.
8.3 删除节点
步骤:先找到删除的父节点,通过父节点
var son = document.getElementById('son');
var father = son.parentElement;
father.removeChild(son);
// 删除是动态过程
father.child // 会发生变化
8.4 插入节点
9. 表单操作
10. jQuery
公式: $(selector).action()
选择器就是css选择器
$(document).ready(function () {
console.log("这是加载完毕事件");
});
$(function () {
console.log("这是加载完毕事件");
});
11.扩展
layer 弹窗组件
Element-ui