目录
一、快速入门
1.1 引入JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--第一种引入方法:内部引入:script标签内,写JS代码-->
<!--<script>-->
<!-- alert('HelloWorld!');-->
<!--</script>-->
<!--第二种引入方法:外部引入-->
<!--注意:script必须成对出现-->
<script src="js/qj.js"></script>
<!--不用显示定义type,也默认就是javascript-->
<script type="text/javascript">
</script>
</head>
<body>
<!--这里也可以存放JS代码-->
</body>
</html>
alert('HelloWorld');
1.2 浏览器控制台的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--JavaScript严格区分大小写!!-->
<script>
//1、定义变量 变量类型 变量名 = 变量值
var score=1;
//2、条件控制
if(score>60 && score<70){
alert('60~70');
}else if(score>70 && score<80){
alert('70~80');
}else{
alert('other');
}
//console.log(score) 在浏览器的控制台打印变量!
</script>
</head>
<body>
</body>
</html>
1.3 数据类型
数值、文本、图形、音频、视频......
- 变量
var a=1
- number
js不区分小数和整数,number
- 123 //整数123
- 123.1 //浮点数123.1
- 1.12e3 //科学计数法
- -99 //负数
- NaN //not a number
- Infinity //表示无限大
- 字符串
'abc'、"abc"
- 布尔值
true、false
- 逻辑运算
&&、||、!
- 比较运算!!!重要!!!
- =
- == 等于(类型不一样,值一样,也为true)
- === 绝对等于(类型一样,值一样,才为true,js中一般用===)
- 注意:NaN===NaN结果为false,NaN与所有的数值都不想等,包括其自己,只能通过isNaN(NaN)来判断这个数是否为NaN
- 浮点数问题
console.log((1/3) === (1-2/3));//结果为false
console.log(Math.abs(1/3-(1-2/3))<0.000001);//结果为true
尽量避免使用浮点数进行运算,因为会有精度的损失
- null和undefined
- null:空
- undefined:未定义
- 数组
var arr = [1,2,3,4,5,'hello',null,true];
- Java中的数组为一系列相同类型数据的组合,而JavaScript中则可以为不同类型数据的组合,因为其任何数据都使用var去定义,因此不用区分
- 取数组下标,如果越界了,就会undefined,而不会报错
- 对象
对象是大括号,数组是中括号
//Person person = new Person(1,2,3,4,5);
var Person={
name:"CShadow7",
age:3,
tags:['js','java','web','...']
}
1.4 严格检查模式strict
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提:IDEA设置了JS遵循ES6的语法
'use strict';严格检查模式,预防js的随意性导致产生的一些问题,必须写在JS代码的第一行
局部变量建议都使用let去定义
-->
<script>
'use strict';
//全局变量,需要注意使用
i=1;
//ES6中定义局部变量使用let
let i=2;
</script>
</head>
<body>
</body>
</html>
二、数据类型
2.1 字符串
- 正常字符串我们使用单引号或者双引号包裹
- 注意转义字符 \
- \n 换行
- \t tab
- \' 单引号
- \u4e2d \u#### unicode字符
- "\x41" ASCII码字符
- 多行字符串编写
'use strict';
//tab键盘上面的,esc键下面的 `
var msg=
`hello
world
你好
世界`
- 模板字符串
'use strict';
//tab键盘上面的 `
let name="CShadow7";
let age = 3;
let msg = `你好呀,${name},今天我${age}岁了`
console.log(msg);
- 字符串长度
console.log(str.length);
- 字符串的可变性,不可变
- 大小写转换
- stu.indexof('t')
- stu.substring(1,3)
2.2 数组类型详解
数组类型可以包含任意的数据类型
'use strict'
let arr=[1,2,3,4,5,6];//通过下标取值和赋值
arr[0]=1;
- 长度:可变的,若给arr.length赋值,数组大小则会发生变化,其中未定义数据为undefined
arr.length
- indexof,通过元素获得下标索引
arr.indexof(2);
1
- slice(),截取数组的一部分,返回一个新数组,类似于string中的substring()
- push(),pop()
push("a","b"):将指定元素压入数组的尾部
pop():将数组尾部的元素弹出
- unshift(),shift()
unshift("a","b"):将指定元素压入数组的头部
shift():将数组头部的元素弹出
- 数组排序:sort()
- 元素反转
- concat():这个方法并没有修改数组,仅仅是返回一个新的数组
- 连接符join():打印拼接数组,使用特定的字符串连接
- 多维数组
2.3 对象
JS对象,{}表示一个对象,键值对描述属性xxxx:xxxx,多个属性之间使用逗号隔开,最后一个属性不加逗号。JS代码键值对中的键都是字符串,值都是对象。
var 对象名={
属性名:属性值,
属性名:属性值,
属性名:属性值
}
//创建四个对象,他有四个属性!
'use strict';
let Person={
name:"CShadow7",
age:3,
email:"1758481045@qq.com",
score:0
}
- 对象赋值
- 使用一个不存在的对象属性是不会报错的,只会显示undefined
- 动态删减属性:delete()
- 动态添加属性:直接添加新的属性即可
- 判断属性值是否在对象中间!xxx in xxx!
- 判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
2.4 分支和循环
- if判断
'use strict';
let age = 3;
if(age>3){
alert("haha");
}else if(age<5){
alert("kuwa~")
}else{
alert("kuwa~")
}
- while循环
'use strict';
let age =3;
while(age<100){
age=age+1;
console.log(age);
}
- for循环
'use strict';
for (let i = 0; i < 100; i++) {
console.log(i);
}
- forEach循环
'use strict';
let arr=[1,2,3,4,5,6,7,8,9,0]
arr.forEach(function (value) {
console.log(value)
})
- for in循环
'use strict';
let arr=[1,2,3,4,5,6,7,8,9,0]
for(let num in arr){
console.log(arr[num])
}
2.5 Set和Map集合
- Map集合
'use strict';
let map = new Map([['tom',100],['jack',99],['haha',80]]);
let score = map.get('tom')
map.set('admin',70);
map.delete('tom');
- Set集合:无序不重复的集合
let set=new Set([3,1,1,1,1])//set可以去重
set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素
2.6 iterator迭代器
- for of遍历数组
//for of可以实现,但是for in只能输出下标
let arr=[1,2,3,4,5]
for (let x of arr) {
console.log(x)
}
- for of遍历map
let map = new Map([['tom',100],['jack',99],['mary',80]])
for(let x of map){
console.log(x)
}
- for of遍历set
let set = new Set([1,3,4,3,5])
for(let x of set){
console.log(x)
}
三、函数
4.1 定义函数
- 定义方式一:如果没有执行return,也会返回结果,就是undefined
<script>
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
</script>
- 定义方式二:创建一个匿名函数,可以把结果赋值给abs,可以使用abs去调用函数。注意:JS可以传递任意一个参数,也可以不传递参数。
<script>
'use strict';
let abs = function (x){
if(x>=0){
return x;
}else{
return -x;
}
}
</script>
- 参数进来是否存在问题?假设不存在参数,如何规避问题?(可以手动抛出异常)
<script>
'use strict';
let abs = function (x){
if(typeof x !== 'number'){
throw 'not a number!';
}
if(x>=0){
return x;
}else{
return -x;
}
}
</script>
- arguments:是JS免费赠送的一个关键字,代表传递进来的所有参数,是一个数组
<script>
'use strict';
let abs = function (x){
console.log('x=>'+x)
for(let i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
</script>
- arguments的问题:arguments数组包含了所有参数,但是我们有时候需要获取定义意外的参数来进行附加操作,这时候需要排除已有的参数。使用rest关键字,可以获取已经定义的参数之外的参数
<script>
'use strict';
function aaa(a,b,...rest){
console.log(a);
console.log(b);
console.log(rest);
}
</script>
3.2 变量的作用域、let和const详解
- 在JS中,var声明的变量是有作用域的,在函数体内声明的变量不可以在函数体外使用
<script>
'use strict';
function qj(){
var x = 1;
x = x+1;
}
x = x+2;//报错
</script>
- 如果两个函数使用了相同的变量名,只要在函数内部,就不会冲突
<script>
'use strict';
function qj(){
var x = 1;
x = x+1;
}
function qj2(){
var x = 1;
x = x+1;
}
</script>
- 提升变量的作用域
<script>
function a(){
var x = 'x' + y;
console.log(x);
var y = 'y';
}
a();
</script>
可以看到此处的输出为xundefined,即JS的执行引擎已经自动提升了y的声明,但是并没有提升y的赋值。这个是在JS建立之初就存在的特性,因此我们需要养成规范:将所有变量的声明都放在代码头部
- 所有的全局变量都会默认绑定在window对象中
<script>
var x = 'xxx';
alert(x);
alert(window.x)//与上一条等价
</script>
- alert函数本身也是window的变量
<script>
var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
//old_alert
window.alert = function (){
}
//发现alert失效
window.alert(123);//不弹出
//恢复alert
window.alert = old_alert;
window.alert(456);//弹出
</script>
注意:JS实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,则会报错。
- 规范
由于我们的全局变量都会绑定到window对象上,如果不同的js文件,使用了相同的全局变量会造成冲突,如何减少冲突呢???→将自己的代码全部放入自己定义的唯一空间名字中,降低全局命名的冲突
<script>
//唯一全局变量
var KuangApp = {}
//定义全局变量
KuangApp.name = 'CShadow7'
KuangApp.add = function (a,b){
return a + b
}
</script>
- 局部作用域 let
<script>
function aaa(){
for(var i = 0;i<100;i++){
console.log(i)
}
console.log(i+1);//问题,最后输出了101,为什么i出了作用域依然可以使用??
}
</script>
ES6引入let关键字用于解决局部作用域的冲突问题,因此建议使用let关键字去定义局部作用域
<script>
function aaa(){
for(let i = 0;i<100;i++){
console.log(i)
}
console.log(i+1);
}
</script>
- 常量const
<script>
const PI = '3.14'
console.log(PI);
PI = '123';//报错
</script>
3.3 方法
方法就是将函数放在对象里面,对象只有两个东西:属性和方法。this指向调用该属性和方法的对象
<script>
var CShadow7={
name:'CShadow7',
birth:'1996',
age:function (){
var now = new Date().getFullYear()
return now - this.birth;
}
}
</script>
- apply
在JS中,可以控制this的指向!
<script>
function getAge(){
var now = new Date().getFullYear()
return now - this.birth;
}
var CShadow7= {
name: 'CShadow7',
birth: '1996',
age: getAge
}
</script>
五、内部对象
5.1 Date
<script>
var now = new Date();
now.getFullYear()//年
now.getMonth()//月 0-11月,如果获取当前月份需要+1
now.getDate()//日
now.getDay()//周几
now.getHours()//时
now.getMinutes()//分
now.getSeconds()//秒
now.getTime()//时间戳
</script>
5.2 JSON对象
JSON是一种轻量级的数据交换格式,在JS中一切皆为对象,任何JS支持的类型都可以用JSON来表示。
<script>
var user={
name:'CShadow7',
age:3,
sex:'男'
}
//将对象转化为JSON
var jsonUser = JSON.stringify(user);
//将JSON转化为对象
var obj = JSON.parse(jsonUser);
</script>
六、面向对象编程
6.1 class继承
- 定义一个类的属性和方法
<script>
class student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello!')
}
}
var xiaoming = new student("xiaoming");
xiaoming.hello();
</script>
- 继承
<script>
class student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello!')
}
}
class xiaostu extends student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
mygrade(){
alert('我是一个小学生!');
}
}
var xiaoming = new student("xiaoming");
xiaoming.hello();
var xiaohong = new xiaostu("xiaohong",1);
xiaohong.mygrade();
</script>
七、操作BOM对象(重点!)
BOM:浏览器对象模型
- window:代表浏览器窗口
window.alert(1)
undefined
window.innerHeight
104
window.outerHeight
1040
window.innerWidth
1097
window.outerWidth
1920
- navigator:封装了浏览器的信息
navigator.appName
'Netscape'
navigator.appCodeName
'Mozilla'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36'
navigator.platform
'Win32'
- screen:代表屏幕
screen.width
1920
screen.height
1080
- location(重要):代表了当前页面的URL信息
location.assign('https://www.baidu.com/')//重定向页面,使所有访问网页的人会被跳转至百度
- document代表当前页面,HTML DOM文档树
document.title
'百度一下,你就知道'
document.title = 'CShadow7'
'CShadow7'
可以获取具体的文档树节点
<body>
<dl id="app">
<dt>java</dt>
<dd>javase</dd>
<dd>javaee</dd>
</dl>
<script>
var dl = document.getElementById('app')
</script>
</body>
获取cookie
劫持cookie的原理:服务器端可以设置httpOnly来保证cookie的安全
<script src="aa.js"></script>
//恶意人员通过获取你的cookie上传到他的服务器窃取你的隐私
- history:代表了浏览器的历史记录
history.back()//后退到上一页面
history.forward()//前进到下一页面
八、操作DOM对象(重点)
浏览器网页就是一个DOM树形结构
- 遍历得到DOM节点(查)
要操作一个DOM节点,首先必须先得到DOM节点。
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var h1 = document.getElementsByTagName('h1');//标签选择器
var p1 = document.getElementById('p1');//id选择器
var p2 = document.getElementsByClassName('p2');//类选择器
var father = document.getElementById('father');
var children = father.children;//获取父节点下的所有子节点
var firstchild = father.firstChild;
var lastchild = father.lastChild;
</script>
</body>
- 更新DOM节点(改)
<body>
<div id="id1"></div>
<script>
var id1 = document.getElementById('id1');
//操作文本
id1.innerText = '123';//将文本内容修改为‘123’
id1.innerHTML = '<strong>123</strong>'//将HTML文本内容修改
//操作JS代码
id1.style.color = 'red';//修改文本的颜色
id1.style.fontSize = '200px';//修改字体大小
id1.style.padding = '2em';
</script>
</body>
- 删除DOM节点(删)
先获取父节点,再通过父节点删除自己
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementById('p1');//获取p1节点
var father = self.parentElement;//获取p1子节点的父节点
father.removeChild(self);//删除子节点p1
father.removeChild(father.children[0]);//删除节点是一个动态过程
</script>
</body>
- 添加DOM节点(增)
我们获得了一个DOM节点,若该DOM节点为空,则我们可以通过innerText或innerHTML去为其增加元素;但是如果这个DOM元素不为空,我们就不可以使用上述方法,因为会产生覆盖!
追加现有标签:
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="SE">JavaSE</p>
<p id="EE">JavaEE</p>
<p id="ME">JavaME</p>
</div>
<script>
var
js = document.getElementById('js');
list = document.getElementById('list')
list.appendChild(js)
</script>
</body>
创建一个已知属性的新的标签
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="SE">JavaSE</p>
<p id="EE">JavaEE</p>
<p id="ME">JavaME</p>
</div>
<script>
var
js = document.getElementById('js');
list = document.getElementById('list')
//通过js创建一个新的节点
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = 'Hello,CShadow7';
list.appendChild(newP);
</script>
</body>
创建一个未知属性的新的标签
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="SE">JavaSE</p>
<p id="EE">JavaEE</p>
<p id="ME">JavaME</p>
</div>
<script>
var
js = document.getElementById('js');
list = document.getElementById('list')
//创建一个新的标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
list.appendChild(myScript);
</script>
</body>
九、操作表单(验证)
- 获取表单信息
<body>
<form action="post">
<p>
<span>用户名</span><input type="text" id="username">
</p>
<p>
<span>性别</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
</form>
<script>
var input_text = document.getElementById('username')
//得到输入框的值
input_text = '123';
//修改输入框的值
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
//对于单选框、多选框等固定的值,用boy_radio.value只能获取当前的值
boy_radio.checked//查看返回结果是否为true,如果为true则被选中
girl_radio.checked = true;
</script>
</body>
- 提交表单
使用MD5对密码进行加密,这样即使拦截到请求,也无法破解密码
<body>
<form action="#" method="post">
<p>
<span>用户名:</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码</span><input type="password" id="input_password">
</p>
<!--绑定事件onclick,被点击后-->
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
var uname = document.getElementById('username')
var pwd = document.getElementById('password')
console.log(uname.value)
//MD5算法
pwd.value = md5(pwd.value);
console.log(pwd.value)
}
</script>
</body>
目前使用的MD5加密密码方法,使用hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
表单绑定提交事件
onsubmit=绑定一个提交检测的函数,true,false
将这个结果return给表单,使用onsubmit接受
onsubmit=“return aaa()”
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
<p>
<span>用户名:</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码</span><input type="password" id="input_password">
</p>
<p>
<input type="hidden" id="md5_password" name="password">
</p>
<button type="submit">提交</button>
</form>
<script>
function aaa(){
alert(1);
var uname = document.getElementById('username')
var pwd = document.getElementById('input_password')
var md5pwd = document.getElementById('md5_password')
md5pwd.value = md5(pwd.value);
//可以校验判断表单内容,true就是通过提交,false就是停止提交
return true;
}
</script>
十、JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.5.1.min.js"></script>
</head>
<body>
<!--
公式:$(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
//选择器就是CSS选择器
$('#test-jquery').click(function (){
alert("hello,jquery!!")
})
</script>
</body>
</html>
10.1 Jquery选择器
<script>
//原生JS,选择器少,不好记
//id选择器
document.getElementById();
//类选择器
document.getElementsByClassName();
//标签选择器
document.getElementsByTagName();
//Jquery选择器 css中的选择器它都可以使用
//id选择器
$('#id').click()
//类选择器
$('.class').click()
//标签选择器
$('p').click()
</script>
10.2 Jquery事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.5.1.min.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border:1px solid red;
}
</style>
</head>
<body>
<!--获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
<!--当前网页元素加载完毕之后,响应事件-->
$(function (){
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
})
});
</script>
</body>
</html>
10.3 Jquery操作DOM元素
- 节点文本操作
- css操作
- 元素的显示和隐藏:本质就是display:none