JavaScript
弱脚本语言。
引入JavaScript
写JS的方式：
- 写在HTML里面
<head>
<!--在script标签内，写JS代码-->
<script>
alert("Hello,world");
</script>
</head>
- 写在.js里面
<head>
<!--外部引入，script必须成对出现-->
<script src="js/xx.js"></script>
</head>
js/xx.js：
alert("Hello,world");//弹窗
基本语法
JS严格区分大小写
注释
//+空格+内容
定义变量
没有类型的概念。
var 变量名 = 变量值;
打印变量
console.log(xx);//在浏览器的控制台打印变量
数据类型
数值，文本，图形，音频，视频…
number：js不区分小数和整数，NaN–不是一个数字，Infinity–无限大
字符串：‘abc’，“abc”
比较运算符：
==：等于(类型不一样，值一样，也会判断为true)
=== ：绝对等于(类型一样，值一样，判断为true)
注意：
NaN === NaN：返回false，只能使用isNaN(NaN)来判断
尽量避免使用浮点数损失，存在精度损失
数组
js数组中元素类型可以不相同
创建数组：
- var arr = [1,2,3,“ll”,null,true]; //推荐使用
- new Array(1,2,3,“ll”,null,true);
注意：数组越界返回是undefined未定义
对象
对象是大括号，数组是中括号。
var person = {
name : "xxx",
age : 3,
tags : ['js','java']
}
person.name//取对象的值
严格检查模式
在ES6中使用let作为变量类型，设置为局部变量
'use strict';//严格检查模式，预防javaScript的随意性导致产生的一些问题，必须写在js的第一行
数据类型
字符串
正常字符串使用’‘和""进行包裹，注意转移字符\，并使用’'和""进行包裹。
\'
\n
\u4e2d // \u#### Unicode字符
\x41 //Ascii字符
多行字符串
//tab 上面的符号`
var msg = `hell
oo
ni
`
模板字符串
let str = "xx";
let mas = `hello,${str}`;//使用el表达式
字符串长度
str.length
字符串元素打印
str[0]
字符串元素不可变
大小写和下标
//是方法
str.toUpperCase();
str.toLowerCase();
str.indexOf('t');
截取
substring(1,3); //包含前面不包含后面
substring(1); //从第一个字符串截取到最后一个字符串
数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5];
//长度
arr.length
//直接复制
arr[0]=0;
arr.length = 6;//数组大小可变
arr = [1,2,3,4,5,empty];
arr[5] //输出undefined
indexOf(元素)：通过元素获得下标索引，不存在则返回-1
注意：字符串"1"和数组1是不一样的
slice() ：截取Array的一部分，返回一个新的数组，类似于String中的substring
push：放入元素到尾部，pop：丢掉尾部的元素
unshift()：放入元素到头部，shift()：弹出一个头部元素
sort()：排序
reverse()：元素反转
concat(xx)：拼接xx到数组中 arr.concat(xx)，concat没有修改数组，只是返回了一个新数组。
join()：打印拼接数组，使用特定的字符串拼接
fill(1)：将数组中全部填充为1
多维数组
var arr = [[1,2],[3,4];
对象
若干个键值对，键是字符串，值是任意对象。
var 对象名 = {
属性名:属性值,
属性名:属性值
}
var person = {
name:"Bob",
age:12
}
//赋值
person.name = "ethan"
使用一个不存在的对象属性，不会保存，只会返回undefined
删除属性
delete person.name
动态的添加
直接给新的属性添加值即可
person.email = "xxx@qq.com"
判断存在
'age' in person //返回true
//继承
'toString' in Person //返回true
//判断一个属性是否是这个对象自身拥有的
person.hasOwnProperty('toString') //返回false
流程控制
if，while，for和java一致
数组循环
var arr = [1,2,3,4,5];
//函数
arr.forEach( function (value) ){
console.log(value); }
//forin
for( var num in arr ){
console.log(num); //遍历出来的是索引，属性名
console.log(arr[num]);//遍历出来的是值
}
Map和Set
ES6新特性
Map
var map = new Map([["tom",100],["java",10]]);
var age = map.get("tom");//通过key获得value
map.set('admin',100);//admin=>100
map.delete("tom");
Set
无序不重复的集合
var set = new Set([3,2,1,1,1]); //结果为[3,2,1]
set.add(5);
set.delete(1);
console.log(Array.from(set))//输出set所有元素
console.log(set.has(3));//set是否包含3
iterator
var arr = [1,2,3,4,5];
for( let num of arr ){
console.log(num); //遍历出来的是值
}
var map = new Map([["tom",100],["java",10]]);
for( let num of map ){ //遍历map
console.log(num);
}
var set = new Set(3,2,1,1,1); //结果为3,2,1
for( let num of set ){ //遍历set
console.log(num);
}
函数
JavaScript中,函数实际上是Function类型的实例,也就是说函数就是对象*。
定义
方式一：
绝对值函数
function abs(x){
if(x >= 0){
return x;
}else{
return -x;
}
}//使用abs()返回NaN，没有执行return，会返回undefined
方式二：
var abs = function(x){ } //匿名函数
参数问题：JS可以传递任意个参数亦可以不传参数
var abs = function(x){
if (typeof x !== 'number'){
throw 'Not a number'; //手动抛出异常，解决参数问题
}
if(x >= 0){
return x;
}else{
return -x;
}
} //匿名函数
arguments
arguments是一个JS赠送的关键字，代表传递进来的所有参数，是一个列表。即参数有几个，一般使用于隐藏参数。
var abs = function(x,){
for (var i = 0; i<argument.length; i++){
console.log(argument[i]); //打印所有传递的参数，包括第一个
}
} //匿名函数
rest
rest获取除了已定义的参数值外地所有参数~。rest参数只能写在最后面，必须用…表示。
var abs = function(x,b,...rest){
console.log(rest);
} //匿名函数
变量作用域
局部变量和Java一样，会覆盖全局变量，即就近原则使用。外部不能访问内部。
默认所有的全局变量，都会自动绑定在window对象下。
alert()：弹出窗函数也是window变量。
var alert1= window.alert();
alert1(12);//可以弹出12
window.alert = function(){ } //alert()失效了
//恢复
window.alert()=alert1;
window.alert(12)//可以弹出12
JS实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有在函数作用返回内找到，只能向外查找，如果在全局作用域没有找到，报错*ReferenceError。
唯一全局变量
由于全局变量都是在window变量上，但多个js文件要使用相同全局变量，需要减少冲突。
//唯一全局变量
var XX = {};
//定义全局变量
XX.name = 'xx';
XX.add = function(a,b) { };
把自己的代码全部放入在自己定义的唯一空间名字中。
局部作用域 let
常量 const
const PI = '3.14';
方法
定义方法
方法就是把函数放在对象里面，对象只有两个对象：属性和方法
//方法一
var xx{
name:"xx",
birth:2000,
age:funtion(){
var now = new.Data().getFullYear();
return new - this.birth;
}
};
//方法二
function gerAge(){
var now = new.Data().getFullYear();
return new - this.birth; //this默认指向调用它的那个对象
};
var xx{
name:"xx",
birth:2000,
age:getAge
};
//属性
xx.name;
//调用
xx.age()//方法一定要带括号
//调用
getAge(xx,[])//this指向了xx，参数为空，此时可以使用getAge，因为可以获取xx的birth
apply()
apply用来指定this指向的对象
内部调用
typeof [] //"object"
typeof NaN //"number"
typeof undefined //"undefined"
Date
var now = new Date();
now.getFullYear();//年
now.getMonth();//月 0~11月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳
now = new Date(now.getTime());
now.toLocalString();//注意调用是一个方法不是一个属性
now.toGMTString();
JSON
Json是一种轻量级的数据交换格式。JSON本身就是一个格式化的字符串
是一种比较理想的数据交换语言。有效提升网络传输效率。
在JS中一切皆为对象，任何js支持的类型都可以用JSON表示
格式：
- 对象：{ }
- 数组：[ ]
- 键值对：key:value
{name:'xx'}; //对象
var user = {name:'xx' , age:3};//对象
//对象转换为json字符串
var Jsonuser = JSON.stringify(user);//结果：'{"name":"xx","age":"3"}'
//json字符串转化为对象，参数为json字符串
var obj = JSON.parse("{'name':'xx','age':'3'}");
Ajax
原生的js写法 xhr异步请求
面向对象
类：模板
对象：具体的实例
JS的区别
原型
引用其他的对象的属性，进行使用，先复制再修改
//对象.__proto__ = 原型对象
var Student = {
name:"xx",
run:function(){
xxx
}
};
var YY = { name:"YY"};
YY.__proto__ = user;//YY的原型是Student
YY.run() //可以运行
class继承
ES6之前
function Student(name){
this.name = name;
}
//添加一个hello方法，只能给其原型添加一个方法
Student.prototype.hello = function(){alert('xx')}
ES6之后
//定义一个学生的类，属性，方法
class Student{
constructor(name){
this.name = name;
}
hello(){
alert('xx')
}
}
//使用
var xx = new Student("xxx");
xx.hello();
//继承
//原型指向Student
class newStudent extends Student{
constructor(name,grade){ //constructor是一个构造方法，用来接收参数
super(name);
this.grade = grade;
}
myGrade(){
alert('xx')
}
function newStudent(name,age){ //构造函数和实例化构造名相同且大写（非强制，但这么写有助于区分构造函数和普通函数）
}
}
var xx = new newStudent("xxx",22);
Student.prototype === xx.__proto__ //显示原型==隐式原型
本质：查看对象原型。
原型链
每一个对象都有自己的原型对象
BOM*
浏览器对象模型
windows
浏览器窗口
- window.innerHeight
- window.outerHeight
Navigator
封装浏览器的信息
- navigator.appName
- navigator.appVersion
- navigator.userAgent
screen
屏幕尺寸
- screen.width
- screen.height
location*
- host：主机
- herf：主页
- protocol：协议
- reload：重新加载，刷新网页
- location.assign(‘https://xxxx.com’)：重写定位，设置新地址
document
当前页面，HTML DOM文档树
-
title：标题
-
document.getElementById(“xx”)//获取id===xx的页面，获取具体的文档树节点
<body> <dl id="xx"> <dt>xxx</dt> <dd>yyy</dd> </dl> </body> <script> var dl = document.getElementById("xx"); </script>
获取具体的文档树节点 ，可以动态的添加删除节点，可以动态修改页面
获取cookie
客户端的本地的信息，一般为用户账号密码信息
document.cookie
服务器端可以设置：cookie:httpOnly，保证安全性
history
浏览器历史记录，不建议使用
- history.back()
- history.forward()
DOM
文档对象模型，动态操作CSS，进行更改网页
浏览器网页就是Dom树形结构，要操作Dom节点，就先获取的这个Dom节点(标签等等)
获取
//对应css选择器
var h1 = document.getElementById("h1");
var id = document.getElementById("id");//id=id
var father = document.getElementById("father");//class=father
//class返回的是一个数组
//可以获取父节点下面的所有子节点
father.children
father.firstchildren
father.lastchildren
更新
h1.innerText='222';//修改文本的值
h1.innerHTML='222';//解析HTML文本标签
h1.style.color = 'red'//设置颜色
h1.style.fontSize = '200px'//字体大小，_ 转 驼峰命名
h1.style.padding = '2em'//内边距
删除
步骤：先获取父节点，再通过父节点删除自己
var self = document.getElementById('p1');//因为class返回的是一个数组，因此需要self[0].xxxx进行获取父节点。如果是Id选择器则可以直接获取
var father = p1.parentElement;
father.removeChild(self);
//删除是一个动态的过程，child是时刻变化的
father.children = [1,2,3,4]
father.removeChild(father.children[0]);//删除1
father.removeChild(father.children[0]);//删除2
father.removeChild(father.children[1]);//删除4
插入
获取某个Dom节点，如果这个节点为空，通过innerHTML可以添加一个元素，但是这个Dom节点已经有元素了，就会产生覆盖。
var js = document.getElementById('js')//已存在节点
var list = document.getElementById('list')
list.appendChild(js);
var new = document.createElement('p');//创建一个新的p标签
new.id = 'newp';
new.innerText = 'xxxx';
var myScript = document.createElement('script');//创建一个新标签
//添加类型===<script type='text'></script>
myScript.setAttribute('type','text');//通过这个属性可以设置任意值
//获得元素
//为body设置颜色方式1
var body = document.getElementByTagName('body');//得到的是数组
body[0].style.backgroud = 'red';
//为body设置颜色方式2
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
//直接再网页的里面进行设置
myStyle.innerHTML = 'body{background-color:chaetreuse; }';
document.getElementByTagName('head')[0].appendChile(myStyle);
insert
var ee = document.getElementById('ee')//
var js = document.getElementById('js')//
var list = document.getElementById('list')//ee的父节点
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
操作表单
目的：提交信息
//输入框
var input = document.getElementById('username');
input.value//获取值
input.value = 'xxx';//更改值
var b_radio = document.getElementById('boy');//性别单选框
var g_radio = document.getElementById('girl');
//对于单选框，多选框固定的值，value只能获取当前的值
b_radio.checked;//查看返回结果，true则选中
提交表单
<script src="https//cdn.bootcss.com/blueimp-md5/2.10.0/js/md5/min.js"> //MD5工具类 网站
</script>
<form actiom= "#.html" method = "post" >
<input type="text" id="username" name="username">
<input type="password" id="password" name="password">
<!--绑定事件onchlik，点击-->
<botton type="submit" onchlik="xxx()">upload</botton>
</form>
<script>
function xxx(){
var input = document.getElementById('username');
var pwd = document.getElementById('password');
//MD5 算法
pwd.value = md5(pwd);
}
</script>
高级提交，前端提交修改
<script src="https//cdn.bootcss.com/blueimp-md5/2.10.0/js/md5/min.js"> //MD5工具类 网站
</script>
<!--表单绑定提交事件
onsubmit，绑定一个提交检测的函数，将结果返回给表单，使用onsubmit 接收
-->
<form actiom= "#.html" method = "post" οnsubmit="return xxx()">
<p>
<input type="text" id="username" name="username">
</p>
<p>
<input type="password" id="input-password" >
</p>
<input type="hidden" id="md5-password" name= "password">
<!--绑定事件onchlik，点击-->
<botton type="submit" >upload</botton>
</form>
<script>
function xxx(){
var input = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
//MD5 算法
md5pwd.value = md5(pwd.value);
return true;//通过提交，false阻止提交
}
</script>
jQuery
工具类，库，存在大量的JS函数。
CDN jQuery：在线链接
公式： ( s e l e c t o r ) . a c t i o n ( ) ， (selector).action()， (selector).action()，(选择器).事件(事件函数)
var input = document.getElementById('username');
id.click(funcion(){ alert('x'); });
//与上面操作一致
$('username').click(funcion(){ alert('x'); } )
选择器
$('p').click() //标签选择器
$('#id').click() //id选择器
$('.class').click() //class选择器
文档工具站：https://jquery.cuishifeng.cn/
事件
当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标。
鼠标点击事件
<head>
<style>
#divMove{
width:500px;
height:500px;
border:1px solid red;
}
</style>
</head>
<body>
mouse:<span id="mouseMove"></span>
<div id="divMove">xxx<x/div>
<script>
//当网页元素加载完，响应事件
//$(document).ready(function(){ });
$(function(){ });//===$(document).ready(function(){ });
$(function(){
$('#divMove').mousemove(function(e){
$('#mouseMove').text('x'+e.pageX + 'y' +e.pageY)
})
});
</script>
</body>
操作DOM
节点文本
//<ul id="ul1"> <li name="python"></li> </ul>
$('ul1 li[name="python"]').text() //获得值
$('ul1 li[name="python"]').text('设置值') //设置值
$('ul1').HTML('<strong>123</strong>') //设置值
CSS操作
$('ul1 li[name="python"]').css({"color","red"}) //获得值
元素的显示和隐藏
本质：display:none;
$('ul1 li[name="python"]').show()
$('ul1 li[name="python"]').hide()
ajax
$('#from').ajax({ url: "xx.html", context:xxx,success:function(){ }
});
小技巧
- 巩固JS看jQuery源码，或者游戏源码
- 巩固HTMl，或者CSS，扒网站，改动
1030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
