JavaScript
引入js的方式
数据类型
number: 整数,浮点数,NaN,Infinity(无限大)
字符串 : ‘abc’,“abc”
布尔值 :true,false
逻辑运算 :&& || !
比较运算 : ==(类型不同值相同,true)
===(类型不同值相同,false)
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 a=[1,1.1,true,"hello",'world'];
对象:{大括号}
var person={
name:"ym",
age:2,
id:50
}
严格检查模式
'use strict'//严格检查模式(IDEA需要设置支持ES6语法),必须写在js的第一行
//局部变量建议使用let去定义
数据类型
字符串
- 正常字符串用单引号或双引号包裹
- 转义字符
\'
\n //换行
\t //tab键
\u4e2d //unicode编码,中,\u####
\x41 //A,Ascii字符
- 多行字符串编写
var msg=`hello,world,llala`
- 模板字符串
let name="ym";
let age=2;
let msg1=`你好呀,${age}岁的${name}`;
- 字符串长度 str.length
- 字符串长度不可变
- 大小写转换
var str="AAAsss"
str.toUpperCase();
str.toLowerCase();
- 获取匹配元素的下标
str.indexOf("d");
- 截取字符串
str.substring(i); //从第i个元素开始截取,截取到最后一个元素
str.substring(i,j) //从第i个元素截取到第j个元素的前一个元素,即[前包后不包)
数组
Array可以包含任意数据类型的元素
var array=[1,2,3,5,"3","1"];
- 长度
array.length;1//6,数组长度可变
- indexOf下标索引
array.indexOf(5); //3
- arr.slice(i,j)数组截取后返回新的数组
array.slice(2,5); //[3, 5, "3"],类似于String中的substring(i,j)
-
push() :向尾部添加元素
pop() :从尾部弹出元素
array.push(6,7); //[1, 2, 3, 5, "3", "1", 6, 7]
array.pop(); //[1, 2, 3, 5, "3", "1", 6]
array.pop(); //[1, 2, 3, 5, "3", "1"]
-
unshift() :向头部添加元素
shift() :从头部弹出元素
array.unshift("a"); //["a" 1, 2, 3, 5, "3", "1"]
array.unshift("b") //["b", "a", 1, 2, 3, 5, "3", "1"]
array.shift(); //"b"
array.shift(); //"a"
array.shift(); //1
- 排序sort()
array.sort(); // [1, "1", 2, 3, "3", 5]
- 元素反转reverse()
array.reverse(); //[5, "3", 3, 2, "1", 1]
- 拼接concat()
array.concat([111,222,333]);
(9) [5, "3", 3, 2, "1", 1, 111, 222, 333]
array
(6) [5, "3", 3, 2, "1", 1]
返回一个新的数组,但不会改变原来的数组
- 连接符join,打印拼接数组,使用特定的字符串连接
// [5, "3", 3, 2, "1", 1, "a", "b"];
array.join(';')
// "5;3;3;2;1;1;a;b"
- 多维数组
var arr=[[11,22],[44,55],[6,7]];
// arr[2][1]=7;
对象
//定义了一个person对象,他有三个属性
var person={
name:"ym",
age:2,
email:"2953616124@qq.com"
}
// {}表示一个对象,键值对描述属性,多个属性之间用逗号,最后一个属性不加逗号
js中,所有的键都是字符串,值是任意对象
1,对象赋值
person.name
"ym"
person.name="ymm"
"ymm"
person.name
"ymm"
2,使用一个不存在的对象属性,不会报错 undefined
person.score
undefined
3,动态的删除对象属性 delete
person
{name: "ymm", age: 2, email: "2953616124@qq.com"}
delete person.name
true
person
{age: 2, email: "2953616124@qq.com"}
4,动态的添加对象属性
person.id=123
123
person
{age: 2, email: "2953616124@qq.com", id: 123}
5,判断属性是否在这个对象中
'id' in person
true
6,判断一个属性是否是这个对象自身拥有的 hasOwnProperty
'toString' in person
true
person.hasOwnProperty('toString')
false
person.hasOwnProperty('id')
true
流程控制
if判断
while循环
for循环
forEach循环
var score=[1,3,2,4,5,3,2,4];
score.forEach(function(i){
console.log(i)
})
//1 3 2 4 5 3 2 4
for in
for(var num in score){
console.log(num);//索引
console.log(score[num])
}
//0 1 2 3 4 5 6 7
//1 3 2 4 5 3 2 4
for of
for(var num of score){
console.log(num);//值
}
Map和Set
Map:
let map = new Map([['tom',60],['jerry',70],['any',80]]);
let tom = map.get('tom');//通过键获取值,60
map.set('aimi',90);//设置键值对
map.delete('tom');//删除键值对
Set:无序不重复的集合
let set = new Set([1,1,3,3,5,7,'q',"a"]);
set.add(9);//添加
set.delete(5);//删除
set.has(1);//true,判断set是否包含某元素
//0: 1
//1: 3
//2: 7
//3: "q"
//4: "a"
//5: 9
iterator
遍历Map和Set
let map = new Map([['tom',60],['jerry',70],['any',80]]);
for(let m of map){
console.log(m);
}
//["tom", 60]
//["jerry", 70]
//["any", 80]
let set = new Set([1,1,3,3,5,7,'q',"a"]);
for(let s of set){
console.log(s);
}
//1 3 5 7 q a
函数
定义函数
定义方式一
//绝对值函数abs()
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
//执行到return就代表函数结束,返回结果
//如果没有执行return,函数执行完也会返回结果
定义方式二
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
调用函数
abs(10) //10
abs(-333) //333
参数问题:js可以传任意个参数,也可以不传参数
假设不存在参数
var abs = function(x){
if(typeof(x)!='number'){
throw 'not a number';//手动抛出异常
}
if(x>=0){
return x;
}else{
return -x;
}
}
abs();
//VM658:3 Uncaught not a number
arguments
arguments是js免费赠送的关键字,是一个数组,代表传递进来的所有参数
var abs = function(x){
console.log("x=>"+x);
for(var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
abs(2,1,5,6,7)
//x=>2
// 2
// 1
// 5
// 6
// 7
2
问题:arguments包含了所有的参数,但是有时需要排除已有的参数,用多余的参数进行操作,
rest
之前:
if(arguments.length>1){
for(var i=1;i<arguments.length;i++){
//...
}
}
ES6引入的新特性,获取除了已经定义的参数之外的所有参数
function test(a,b,c,...rest){
console.log('a=>'+a);
console.log('b=>'+b);
console.log('c=>'+c);
console.log(rest);
}
test(2,4,1,2,5.6)
// a=>2
// b=>4
// c=>1
// [2, 5.6]
rest只能写在参数列表的最后面,用…表示(类似于可变长参数)
变量作用域
在js中,var定义的变量有作用域
假设变量在函数体内声明,则在函数体外不可以使用
function test(){
var x=1;
x=x+1; // x=2
}
x=x+2 //Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名,变量名只要在函数内部,就不冲突
function test(){
var x=1;
x=x+1;
}
function test2(){
var x=1;
x=x+1;
}
内部函数可以访问外部函数的成员,反之不行
function test(){
var x=1;
function test2(){
var y=x+1; //y=2
}
var z=y+1; //Uncaught ReferenceError: y is not defined
}
内部函数的变量和外部函数的变量重名
function test(){
var x=1;
function test2(){
var x=2;
console.log('inner'+x);
}
console.log('outer'+x);
test2();
}
test(); // outer1 inner2
函数查找变量从自身函数开始查找,由’内’向’外’,假设外部存在同名的函数变量,则内部函数会屏蔽外部函数的变量.
所有的变量定义都放在函数的头部,不要乱放,便于代码维护
function test(){
var x,y,z,a;
//.....
}
全局变量
x=1;
function test(){
console.log(x);
}
test();// 1
console.log(x);// 1
全局对象window
var x='aaa';
alert(x);
window.alert(x);
window.alert(window.x);
默认所有的全局变量都绑定在window对象下
js中,任何变量(函数也可视为变量),假设没有在函数作用域范围内找到,就会向外查找,如果在全局作用域都没有找到,就会报错 RefrenceError
由于所有的全局变量都绑定在window上,如果不同的js文件使用了相同的全局变量,就会冲突
规范:把自己所有的代码放入自己定义的唯一空间名字中,降低全局命名冲突的问题
//唯一全局变量
var test={
};
//定义全局变量
test.name="ym";
test.add=function(a,b){
return a+b;
}
test.name;// "ym"
test.add(3,9);// 12
局部作用域 let
function test(){
for(var i=0;i<3;i++){
console.log(i);
}
console.log(i+10)
}
test();// 0 1 2 13
//问题来了,i出了作用域还能使用!!!
ES6 let关键字,解决了局部作用域冲突问题
function test(){
for(let i=0;i<3;i++){
console.log(i);
}
console.log(i+10)
}
test();//0 1 2 Uncaught ReferenceError: i is not defined at test
用let定义局部作用域的变量
常量 const
在ES6之前,定义常量:
//用大写字母命名的量就是常量,如下
var PI='3.14';
在ES6引入了常量关键字 const
const PI='3.14';
console.log(PI); //3.14
PI='111';
console.log(PI);//Uncaught TypeError: Assignment to constant variable.
方法
定义方法
对象有 : 属性,方法
方法就是把函数放在对象里面
var person={
name:'ym',
birth:2020,
age:function(){
var now=new Date().getFullYear();
return now-this.birth;
}
}
person.name;
person.age();
this代表什么?把上面的代码拆开看看
function getAge(){
var now=new Date().getFullYear();
return now-this.birth;
}
var person={
name:'ym',
birth:2020,
age:getAge
}
person.age();//1
getAge();//NaN
this无法指向,this默认指向调用它的那个对象
apply
在js中通过apply()控制this的指向
function getAge(){
var now=new Date().getFullYear();
return now-this.birth;
}
var person={
name:'ym',
birth:2020,
age:getAge
}
getAge.apply(person,[]);//this指向了person对象,参数为空
内部对象
标准对象
typeof 123
"number"
typeof NaN
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof [123]
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
Date
基本使用
<script>
var date = new Date();//Wed Mar 31 2021 15:42:22 GMT+0800 (中国标准时间)
date.getFullYear();// 年,2021
date.getMonth();// 月,2,0~11月
date.getDate();// 日,31
date.getDay();// 星期几,3
date.getHours();// 时,15
date.getMinutes();// 分,40
date.getSeconds();// 秒,8
date.getTime();// 时间戳,全世界统一,从1970.1.1.0:00:00开始到现在的毫秒数,1617176542168,
console.log(new Date(1617176542168));//时间戳转为时间 ,Wed Mar 31 2021 15:42:22 GMT+0800 (中国标准时间)
date.toLocaleString();// "2021/3/31下午3:42:22"
date.toGMTString();// "Wed, 31 Mar 2021 07:42:22 GMT"
</script>
Json
json是什么
-
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
-
它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。
-
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
-
易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
在js中一切皆对象,任何js支持的类型都可以用json来表示(number,string,function,……)
格式
-
对象 { }
-
数组 [ ]
-
键值对 key:value
js对象和json字符串的转换
<script>
var student={
name:'ym',
id:123,
age:1
}
//把student对象转为json字符串,stringify()
var JsonStu = JSON.stringify(student);
//把json字符串转为student对象,stringify()
var stuObj = JSON.parse(JsonStu);
</script>
js对象和json字符串
var obj={name:'ym',age:1};
var json="{"name":"ym","age":1}";
面向对象编程
类:模板
对象:具体的实例
原型对象 xm.__ proto __=stu;
var stu={
name:'ym',
age:1,
run:function(){
console.log(this.name+" can run");
}
}
stu.run();// ym can run
var xm={
name:"xiaoming"
}
xm.name;
//原型对象,xm的原型时stu
xm.__proto__=stu;
console.log(xm.run());//xiaoming can run
function Stu(name){
this.name=name;
}
//给Stu新增一个方法
Stu.prototype.hello=function(){
console.log(('hahha'));
}
var xm = new Stu("xiaoming");
console.log(xm.name);// "xiaoming"
xm.hello();// hahha
class关键字,在ES6引入
定义一个Student类,属性,方法
class Student{
constructor(name) {
this.name=name;
}
run(){
console.log(this.name+" can run");
}
}
var xh = new Student("xiaohong");
console.log(xh.name);//xiaohong
xh.run();//xiaohong can run
继承
class xiaoStudent extends Student{
constructor(name,grade) {
super(name);
this.grade=grade;
}
}
var tom = new xiaoStudent("tom",2);
console.log(tom.grade+"年级的"+tom.name);//2年级的tom
tom.run();//tom can run
原型链
操作BOM对象(重点)
bom:浏览器对象模型
浏览器介绍
js的诞生就是为了能够在浏览器中运行
- IE 6~11
- Chrome
- Safari
- FireFox
三方
- QQ浏览器
- 360浏览器
1,window对象
window 代表 浏览器窗口
2,navigator
navigator封装了浏览器对象
3,screen
screen.width
1280
screen.height
720
4,location
location 代表 当前页面的url信息
location
ancestorOrigins: DOMStringList {length: 0}
assign: ƒ assign()
hash: ""
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/?tn=88093251_33_hao_pg"
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"
reload: ƒ reload()
replace: ƒ replace()
search: "?tn=88093251_33_hao_pg"
toString: ƒ toString()
valueOf: ƒ valueOf()
Symbol(Symbol.toPrimitive): undefined
__proto__: Location
5,document
document 代表 当前页面
获取文档树节点
<dl id="app">
<dt>java</dt>
<dd>class</dd>
</dl>
<script>
var d = document.getElementById("app")
</script>
6,history
history代表浏览器的历史信息
history.back()//回退
history.forword()//前进
操作DOM对象
核心
浏览器网页就是一个Dom树形结构
- 更新Dom节点
- 遍历Dom节点
- 删除D节点
- 添加Dom节点
要操作一个Dom节点,就必须先获得这个Dom节点
获得Dom节点
document.getElementsByTagName("h1");
document.getElementById("p1");
document.getElementsByClassName("p2");
更新Dom节点
<div id="id1">
</div>
<script>
var id1=document.getElementById("id1");
</script>
- 操作文本
id1.innerText="abc";
id1.innerHTML="<strong>abc</strong>";
- 操作css
id1.style.fontSize='50px';
id1.style.color='red';
删除节点
删除节点的步骤:先获取父节点,再通过父节点删除自己
father.removeChild(self);
插入节点
获得某个Dom节点
如果这个Dom节点是空的,可通过innerHTML增加一个元素
如果这个Dom节点已经存在元素了,就不能这样了
append追加
<body>
<p id="js">js</p>
<div id="list">
<p id="se">javaSE</p>
<p id="ee">javaEE</p>
<p id="me">javaME</p>
</div>
<script>
let js = document.getElementById("js");
let list = document.getElementById("list");
let list2 = list.appendChild(js);
//创建新的节点后插入list中
let newP = document.createElement("p");
newP.id="newP";
newP.innerText="hello,world";
list.appendChild(newP);
let newA = document.createElement("a");
newA.innerText="点击跳转到百度";
newA.setAttribute("href","https://www.baidu.com");
list.appendChild(newA);
</script>
把节点追加到指定节点的前面
<p id="js">js</p>
<div id="list">
<p id="se">javaSE</p>
<p id="ee">javaEE</p>
<p id="me">javaME</p>
</div>
<script>
let js = document.getElementById('js');
let me = document.getElementById("me");
let list = document.getElementById("list");
list.insertBefore(js,me);
</script>
操作表单
表单
text,passowrd,radio,checkbox,select,hidden,button,submit,reset
表单的目的:提交信息
获取要提交的信息
document.getElementsByTagName(“input[0]”).value=“123”
“123”
document.getElementsByTagName(“input[0]”).value
“123”
提交表单,MD5加密,优化表单
<!--
表单绑定提交事件、οnsubmit="return aaa()"
onsubmit绑定一个提交检测函数,true,false
-->
<form action="https://www.baidu.com" method="get" onsubmit="return aaa()">
<p>
<span>用户名:</span>
<input type="text" name="username" id="username"/>
</p>
<p>
<span>密码:</span>
<input type="password" id="input_password"/>
</p>
<!-- 密码框隐藏 -->
<input type="hidden" name="password" id="md5_password">
<button>提交</button>
</form>
<script>
function aaa(){
let username = document.getElementById("username");
let input_password = document.getElementById("input_password");
// input_password.value = md5(input_password.value);//提交的瞬间密码变长
md5_password.value = md5(input_password.value);
// return false;//检验不通过则不提交
return true;
}
</script>
jQuery
jQuery库
引入jQuery
<script src="lib/jquery-3.4.1.min.js"></script>
公式:
$(selector).action()
事件
鼠标移动事件mousemove
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.4.1.min.js"></script>
<style>
#id1{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<script>
//页面加载完成之后
$(function () {
$("#id1").mousemove(function (e) {
$("#mouseXY").text("x:"+e.pageX+" y:"+e.pageY);
})
})
</script>
</head>
<body>
mouse: <span id="mouseXY"></span>
<div id="id1">
移动鼠标查看坐标
</div>
</body>
</html>
节点文本操作
$("#id1").text("123");//设置文本
$("#id1").text();//获得文本
$("#id1").html("123");//设置文本
$("#id1").html();//获得文本
css操作
$("#python").css("color","red");
显示与隐藏(display)
$("#python").show();
$("#python").hide();
小技巧
巩固js(看jQuery源码,看游戏源码)
巩固html,css(扒网站,修改看源码)