目录
1.什么是JavaScript?
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
2.JS快速入门
1.引入JavaScript
1.1、内部引入
<script>
alert('hello world');
</script>1.2、外部引用
<script src="xxx.js"></script>2.基本语法入门
<!--javascript严格区分大小写-->
<script>
//1.定义变量 变量类型 变量名=变量值;
var age = 18;
var name = "xxxx";
//支持if语句
//console.log(age) 再浏览器的控制态输出变量
</script>2.1、基本类型
数值、文本、图形、音频...
number：js不区分小数和整数
字符串：
布尔值：
逻辑运算：&& || ！
比较运算符：= ==等于(类型不一样，值一样也会判断为true) ===绝对等于
注意：
1.NaN与所有值都不相等，包括它自己 NaN===NaN 为false，只能通过isNaN(NaN)来判断是否为NaN。
2.不要用==来比较，一般用===
数组：js数组中不一定要相同类型的对象
var arr = [1,2,'name',null];对象：大括号，逗号隔开
var Student {
name:"xxx",
age:15,
arr:[1,2,3]
}2.2、严格检查模式
<!--用let定义局部变量-->
<script>
'use strict'//严格检查模式，卸载第一行
let i=1;
</script>3.数据类型
3.1、字符串
1.支持单引号和双引号
2.多行字符串用 ``
let s=`ab
c
def`3.模板字符
let name="xxx";
let s=`yyy,${name}`;3.2、数组
数组可以包含任意数据类型
1.给arr.length赋值可以改变数组大小
2.arr.indexof(x) 获取通过元素获取下标
3.slic() 截取数组的一部分，返回新数组，和substring()类似
4.pop() 弹出 push()压入 在尾部操作
5.unshift()压入 shift()弹出 在头部操作
6.sort() 排序 reverse()反转
7.arr.concat([1,2,3]) arr连接[1,2,3]
8.arr.join(-) 用 - 连接各个元素
3.3、对象
var 对象名{
属性名：属性值，
属性名：属性值
}
1.使用一个不存在的对象不会报错， 显示 undefined
2.动态删减属性：delete 对象名.属性
3.动态添加：直接给新的属性赋值就好了 对象名.新属性=xxx
4.判断对象是否有某个属性 对象名.hasOwnProperty('xxx')
3.4、流程控制
1.if判断、while循环、 和其它语言一致
2.arr.forEach(function(value){ console.log(value) })输出arr数组里的元素
for i in arr{ console.log( arr[i] ) }//i是索引
3.Map和Set
Map:类似字典 可用get()通过key获得value，用set()增添或修改值
Set:无序不重复真的值 add()//添加 delete()//删除 has()//包含
3.5、iterator
用 for ... of... 遍历 Map和Set 例：for( let x of map )
4.函数及面向对象
4.1函数定义及变量作用域
函数定义：
function 函数名(参数){ return 返回值; }
arguments代表传递进来的所有参数，是一个数组
获取剩余的参数
function f(a,b,...x) {
console.log("a="+a);
console.log("b="+b);
console.log("剩下的参数="+x);
}
变量的作用域：
1.var定义的变量作用域：若在函数体内只能用于函数体
2.若内部函数与外部函数的变量重名：会先从函数自身开始由内向外查找
3.全局对象(window)，默认所有的全局变量都会自动绑定在window对象下
4.如果不同的js文件使用了相同的全局变量就会相互冲突,
解决方法：把自己的代码放入全部放入自己命名的唯一空间中，降低全局命名冲突问题
var global_variable={};//唯一全局变量
global_variable.name = "xxx";
global_variable.add = function (a,b) {
return a+b;
}局部作用域：let
常量关键字：const
4.1方法
在函数里面，方法内部也可使用this，this无法指定，默认指向调用它的那个对象
可以用apply控制this的指向：
方法名.apply(类名,[]) this指向对象名，参数为空
4.2对象
var D = new Date();
D.getFullYear();
D.getMonth();
D.getTime();//获取时间戳，全国统一，从1970年开始算起4.3json
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。json详情请点击这里
任何js支持的类型都可以用json来表示
json字符串和js对象相互转换：stringify和parse
// json字符串和js对象的转化
var student = {
name: "张三",
age: 18,
hight: 180
}
//对象转化为json字符串
var jsonS = JSON.stringify(student);
//字符串转换为对象
var Student = JSON.parse('{"name": "张三", "age": 18, "hight": 180}');注意：json里面是字符串
5.面向对象编程
5.1 class继承(和Java区别不大)
//定义一个学生类
class Student{
name;
constructor(name) {
this.name=name;
}
}
var s = new Student("张三");
//用extends继承
class zhangsan extends Student{
height;
constructor(name,height) {
super(name);
this.height=height;
}
}
var Z = new zhangsan("张三",180);4.2闭包
4.3箭头函数
4.6原型链继承
6.操作Bom元素
BOM：浏览器对象模型
window:代表浏览器窗口
window.innerHeight();
window.outerHeight();
localtion:代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/?tn=15007414_5_dg"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新的地址：
location.assign('网址名')
document:代表当前的页面
获取具体的文档书节点：document.getElementByIdI('节点名')
获取本地信息：document.cookie
有一些病毒就是劫持cookie来窃取你的本地信息上传到他的服务器
服务器端可以设置：cookie:httpOnly
history:代表浏览器的记录
history.back(); history.forward();
7.操作Dom元素
Dom：文档对象模型
浏览器网页就是一个Dom树形结构
获得Dom节点：
documment.getElementsByTagName('标签名');
getElementsById('id名');
getElementsByclassName('类名');
father.children//获取父节点下的所有子节点，father可用上述三种发放获得
更新节点：
<div id="123">
<p>asfasf</p>
</div>
<script>
var div1 = document.getElementById('123')//修改文本的值
div1.innerText="用innerText改变值"
div1.innerHTML='<strong>qwer</strong>'//解析HTML文本标签
div1.style.color='red';
div1.style.fontSize='100px';
</script>删除节点：先获取父节点，再通过父节点删除自己的一回合
var self = document.getElementById('123');
var father = self.parentElement;
father.removeChild(self);
father.removeChild(father.children[0])//删除是一个动态的过程，第0个删除后，第一个会变为第0个插入节点：( appendChild() )
<p id="s">student</p>
<div id="p">
<p id="t">teacher</p>
<p id="d">doctor</p>
</div>
<script>
var c = document.getElementById("s");
var lis = document.getElementById("p");
lis.appendChild(c);
</script>增加节点：(createElement)
var newp = document.createElement('p')//创建一个p标签
newp.id = '新标签'
newp.innerText='这是新标签'
lis.appendChild(newp)8.操作表单
1.获取表单的信息，可以通过id或class获得元素，再通过 .value 来获得该表单某个元素的值
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post" > <!--表单提交:onsubmit="return output()"-->
<p>用户名：
<input type="text" id="username" name="username">
</p>
<p>密码：
<input type="password" id="pwd">
<input type="hidden" id="md5-password" name="password">
</p>
<button type="submit" onclick="output()">提交</button>
</form>
<script>
function output() {
var Uname = document.getElementById('username')
var pwd = document.getElementById('pwd')
var md5pwd = document.getElementById('md5-password')
console.log(Uname.value)
//pwd.value = md5(pwd.value)//md5算法加密
md5pwd.value = md5(pwd.value)//可以隐藏域名框里面的一长串字符串
console.log(pwd.value)
}
</script>
</body>9.JQuery(要导入本地JQuery文件)
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<a href="" id="test-JQuery">点击弹出</a>
<script>
//公式：
$('#test-JQuery').click(function () {
alert('hello world');
})
</script>JQuery API速查表：点我跳转
显示鼠标坐标
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.5.1.js"></script>
<style>
#div1{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
mouselocal:<span id="p"></span>
<div id="div1">
显示坐标
</div>
<script>
//当网页元素加载完毕后开始响应事件
$(function () {
$('#div1').mousemove(function (e) {
$('#p').text('x:'+e.pageX+'y:'+e.pageY)
})
});
</script>
1594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
