数据类型
Number
(js不区分小数和整数)
整数、浮点数、科学计数法(1.123e3)、负数、NaN(不是一个数字)、Infinity(表示无限大)
字符串
‘abc’,“abc”
布尔值
true,false
逻辑运算
-
&&:两个都为真,结果为真
-
||:一个为真,结果为真
-
!:真为假,假为真
比较运算符
-
=:赋值
-
==:等于(类型不一样,值一样,也会判断为true)
-
===:绝对等于(类型一样,值一样,结果为true)常用
注意:NaN===NaN:NaN与所有的数值都不相等,包括自己,只能通过isNaN(NaN)来判断这个数是否是NaN
null和undefined
- null :空
- undefined:未定义
数组
属性类型可以不同
var arr = [1,2,3,'hello',null,true]
注意:如果下标越界会出现undefined
对象
数组使用中括号,对象使用大括号
var person = {
name: "lb",
age: 18,
tags: ['java','js','wed','...']
}
注意:对象里的每个属性以逗号结尾,最后一个不用加
严格检查模式
- ’use strict’;严格检查模式,预防JavaScript的随意性导致产生的一些问题(需设置ES6语法)
- 必须写在JavaScript的第一行
- 局部变量建议使用 let 定义
<script>
'use strict';
let i = 1;
</script>
字符串
-
使用单引号或者双引号,定义后不可变
-
转义字符\
\' \n \t \u4e2d //Unicode字符 中 \x41 //Ascll字符
-
多行字符串编写
var msg = ` hello world !!!`
-
模板字符串
<script> let name = "lb"; let age = 18; let msg = `hello,${name} , ${age}`; </script>
-
字符串长度
<script> var student = "student"; console.log(student.length); console.log(student[1]); </script>
-
大小写转换:方法
console.log(student.toUpperCase()) //student转化为大写 console.log(student.toLowerCase()) //STUDENT转化为小写
-
student.indexOf('t'); //提取指定下标
-
substring
student.substring(1); //从第一个字符串截取到最后一个字符串 student.substring(1,3); //[1,3)包头不包尾
数组
- 使用中括号括起来
- Array可以包含任意的数据类型
- 赋值后,数组大小和值可以改变,如果长度改变过小,会数据丢失
常用方法
-
arr.indexOf(2); //通过元素获得下标索引
-
slice(); //截取Array的一部分,返回一个新数组
-
push(); pop(); 尾部
push(); //压入到尾部 pop(); //弹出尾部的一个元素
-
unshift(); shift(); 头部
unshift(); //压入到头部 shift(); //弹出头部的一个元素
-
排序 sort()
-
元素反转reverse()
对象
{…}表-示一个对象,键值对描述属性XXX: XXX,多个属性值之间使用逗号隔开,最后一个不加逗号;其中所有的键都是字符串,值是任意对象
//定义一个person对象,四个属性
var person = {
name: "hello",
age: 18,
sex: '女',
score: 0
}
注意:使用一个不存在的对象属性不会报错,只会出现undefined
-
动态的删减属性:delete
delete person.name //删除name属性
-
动态的添加,直接给新的属性添加值
person.email = "***@qq.com"
流程控制
forEach循环
var age = [12,5,215,121,515,15,1]
//函数
age.forEach(function (value) {
console.log(value)
})
Map和Set
ES6的新特性
-
Map:
<script> 'use strict'; var map = new Map([['x',98],['y',65],['z',56]]); var name = map.get('y'); //通过key获得value值 map.set('w',10); //添加元素'w' map.set('y',66); //修改 map.delete('z'); //删除元素'z' console.log(name); </script>
-
Set:无序不重复
<script> 'use strict'; let set = new Set([3,6,6,6,6]); //去除重复的 set.add(1); //添加元素1 set.delete(6); //删除元素6 console.log(set); console.log(set.has(1)); //set.has();判断集合里面是否包含此元素 </script>
-
for…of 和 for…in
var arr = ([['张三',98],['李四',65],['麻子',56]]); //for...of 打印具体的值 for (let x of arr){ console.log(x); } //for...in打印下标 for (let y in arr){ console.log(y) }
-
遍历Map和Set
//遍历map和set var map = new Map([['张三',98],['李四',65],['麻子',56]]); for (let x of map) { console.log(x) } var set = new Set([1,2,3]); for (let y of set) { console.log(y) }
-
函数
定义函数
定义方式一
var abs = function (x) { if (x >= 0) { return x; }else { return -x; } }
<script>
function abs(x) {
if (x>=0){
return x;
}else {
return -x;
}
}
</script>
注意:一旦执行到return代表函数结束,返回结果;如果没有执行return,函数执行完也会返回结果,结果就是undefined。
定义方法二
var abs = function (x) {
if (x >= 0) {
return x;
}else {
return -x;
}
}
/*
//调用函数
abs(66) //传递参数为66
*/
- JavaScript可以传任意个参数,也可以不传参数
- 问题:不存在参数如何规避:手动抛出异常
var abs = function (x) {
//手动抛出异常
if (typeof x !== 'number'){
throw 'Not a Number';
}
if (x >= 0) {
return x;
}else {
return -x;
}
}
arguments
arguments
代表传递进来的所有的参数(可以打印出所有的元素),是一个数组
var abs = function (x, y) {
console.log("x=" + x + "y=" + y);
//遍历
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if (x >= 0){
return x;
} else {
return -x;
}
}
rest(ES6)
含义:获取除了已经定义的参数之外的所有参数
function aaa(a, b, ...rest) {
console.log("a=" + a);
console.log("b=" + b);
console.log(rest);
}
注意:rest参数只能写在最后面,必须用…标识
变量的作用域
JavaScript中的var定义变量是有作用域的,若在函数体中声明,则函数体外不能使用。
内部函数可以访问外部函数的成员,反之则不行
内部函数变量和外部函数的变量重名,就近原则
<script>
abs();
function abs() {
var x = 1;
abb();
// 内部函数可以访问外部函数的成员,反之则不行
function abb() {
var y = x + 1; //2
}
var z = y + 1; //Uncaught ReferenceError: y is not defined
}
</script>
全局函数
变量定义在函数外
//全局变量
x = 1;
function f() {
console.log(x);
}
f();
console.log(x);
全局对象window
var x = '***';
alert(x);
alert(window.x); //默认所有的全局变量,都会自动绑定在window对象下
注意:alert()这个函数本身也是一个window变量;
JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,会报错:RefrenceError。
规范
由于我们定义的全局变量都会绑定到window上,所以如果不同的js文件,使用了相同的全局变量,就会冲突,而把自己的代码全部放入自己定义的唯一空间名字中,会降低全局命名冲突的问题。
//唯一全局变量
var test = {};
//定义全局变量
test.name = 'xiaoming';
test.add = function (a, b) {
return a + b;
}
所有的变量定义都放在函数的头部,便于代码维护
局部作用域 let
//问题实例 使用var定义变量
function acc() {
for (var i = 0; i < 10; i++) {
console.log(i)
}
console.log(i+1); //i出了作用域还可使用
}
//使用let定义
function acc() {
for (let i = 0; i < 10; i++) {
console.log(i)
}
console.log(i+1); //Uncaught ReferenceErron: i is not defined
}
常量 const
在ES6之前,把变量全部使用大写字母命名就是常量
方法
定义方法
方法就是把函数放在对象的里面,对象只有两个东西:属性和方法
<script>
var abc = {
name: '石头',
birth: 1999,
//方法
age: function () {
var now = new Date().getFullYear();
return now - this.birth;
}
}
</script>
//属性
abc.name
//方法 注意:调用方法一定要带括号
abc.age()
把上面代码拆开:
<script>
function getAge() {
var now = new Date().getFullYear();
return now - this.birth;
}
var abc = {
name: '石头',
birth: 1999,
age : getAge
/* age: function () {
var now = new Date().getFullYear();
return now - this.birth;
}*/
}
</script>
//注意:如果单独调用getAge会使用window对象,且会报:NaN,因为this始终指向调用他的人,而window中并没有birth
注意:this始终指向调用他的对象
apply
作用:在js中可以控制this指向
<script>
function getAge() {
var now = new Date().getFullYear();
return now - this.birth;
}
var abc = {
name: '石头',
birth: 1999,
age : getAge
}
getAge.apply(abc,[]); //this指向了abc,参数为空
</script>
//调用getAge.apply(abc,[])和abc.age()输出一样
内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
Date
基本使用
var date = new Date();
date.getFullYear(); //年
date.getMonth(); //月
date.getDate(); //日
date.getHours(); //时
date.getMinutes(); //分
date.getSeconds(); //秒
date.getDay(); //星期几
date.getTime(); //时间戳 1605661454569
console.log(new Date(1605661454569));
转换
date.toLocaleString(); //本机时间
date.toGMTString(); //北京时间
JSON
- JSON(JavaScript Object Notation,JS对象简谱)是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
- 有效地提升网络传输效率。。
任何JS支持的类型都可以用JSON表示:
格式:
- 对象用 {}
- 数组用 []
- 所有的键值对都是用key:value
JSON字符串和JS对象的转化:
<script>
var user = {
name: "xiao",
age:3,
sex:'女'
}
//对象转化为JSON字符{"name":"xiao","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user)
//JSON 字符串转化为对象 参数为json字符串
var obj = JSON.parse('{"name":"xiao","age":3,"sex":"男"}');
</script>
JSON和JS区别:
var obj = {a:'hello',b:'helloo'};
var json = '{"a":"hello","b":"helloo"}'
面向对象编程
原型继承
<script>
var Studet = {
name: "haha",
age: 3,
run: function () {
console.log(this.name + " run...");
}
};
var Bird = {
fly: function () {
console.log(this.name + " fly...");
}
};
var xiaoming = {
name: "xiaoming"
};
//原型对象: 此刻小明的原型是 Student
xiaoming._proto_ = Student; //此刻xiaoming可以调用Student属性
//此刻小明的原型是Bird
xiaoming._proto_ = Bird;
</script>
class继承
class关键字是在ES6引入的
1、定义一个类,属性,方法
<script>
//定义一个学生的类
class Student{
constructor(name){
this.name = name;
}
hello(){
alert('hello')
}
}
var xiaoming = new Student("xiaoming");
var zhangsan = new Student("zhangsan");
xiaoming.hello()
</script>
2、继承
<script>
//定义一个学生的类
class Student{
constructor(name){
this.name = name;
}
hello(){
alert('hello')
}
}
//继承Student
class XiaoStudet extends Student{
constructor(name,grade){
super(name);
this.grade = grade;
}
myGrade(){
alert('XiaoStudet')
}
}
var xiaoming = new Student("xiaoming");
var zhangsan = new Student("zhangsan");
xiaoming.hello()
</script>
操作BOM对象(重点)
BOM:浏览器对象模型
window
window代表浏览器窗口
window.alert(1)
undefined
window.innerHeight
258
window.innerWidth
919
window.outerHeight
994
window.outerWidth
919
//浏览器窗口大小
navigator (不建议使用)
navigator封装了浏览器的信息,一般不会使用,因为会被人修改
screen
screen代表屏幕尺寸
screen.width
1920
screen.height
1080
location (重要)
location代表当前页面的URL信息
host: "www.baidu.com" //代表主机
href: "https://www.baidu.com/" //当前指向的位置
protocol: "https:" //协议
reload: ƒ reload() //重新加载、刷新网页
//设置新的地址
location.assign('https://blog.csdn.net/weixin_46649583')
document (内容:DOM)
document代表当前的页面,HTML是用DOM文档树展示的
document.title
"百度一下,你就知道"
document.title='狗蛋'
"狗蛋"
//可以更改标题
获取具体的文档树结点
<dl id="app">
<dt>Java</dt>
<dt>JavaSE</dt>
<dt>JavaEE</dt>
</dl>
<script>
var dl = document.getElementById("app");
</script>
获取cookie
document.cookie
"_guid=111872281.88375976493059340.1578110638877.133; monitor_count=1"
服务器端可以设置cookie: httpOnly:用来防止恶意人员获取你的cookie
history (不建议使用)
history代表浏览器的历史记录
history.back() //后退
history.forward() //前进
操作DOM对象 (重点)
核心
浏览器网页就是一个DOM树形结构
- 更新:更新Dom节点
- 遍历Dom节点:得到Dom节点
- 删除:删除一个Dom节点
- 添加:添加一个新的节点
要操作一个Dom节点就必须要先获得这个Dom节点
获得DOM节点
//对应css选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementsById('p1');
var p2 = document.getElementsByClassName(p2');
var father = document.getElementsById('father');
var childrens = father.children; //获取父节点下的所有子节点
这是原生代码,尽量用Jquery。
更新DOM节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
</script>
操作文本
- id1.innerText=‘123’ 修改文本的值
- id1.innerHTML='123’可以解析HTML文本标签
操作JS
id1.style.color = 'red'; //属性使用字符串包裹
id1.style.fontSize='20px'; //- 转 驼峰命名
id1.style.padding = '2em';
删除节点
删除节点的步骤:先获取父节点,在通过父节点删除自己
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self=document.getElementById('p1');
var father = p1.parentElemet;
father.removeChild(self)
//删除是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
注意:删除多个节点时,children是在时刻变化的,删除节点的时候一定要注意。
创建和插入DOM节点
追加:
<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('is');
var list = document.getElementById('list');
list.appendChild(js); //把id="js"追加到后面
</script>
创建一个新的标签,实现插入
<script>
var js = document.getElementById('is'); //已经存在的节点
var list = document.getElementById('list');
//通过JS创建一个新的节点
var newP = document.createElement('p'); //创建一个p标签
newP.id = 'newP';
newP.innerText = 'Hello';
//与<p id="newP">Hello</p>相同
//创建一个标签节点(通过这个属性,可以设置任意的值)
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript')
</script>
操作表单(form)
- 文本框 text
- 下拉框
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- …
表单的目的:提交信息
获得要提交的信息
<form action="#" method="post">
<p>
<span>用户名:</span><input type="text" id="username"/>
</p>
<!--多选框的值,就是定义好的value-->
<p>
<span>性别:</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="women" id="girl">女
</p>
</form>
<script>
var input_text = document.getElementById('username');
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
//得到输入框的值
input_text.value
//修改输入框的值
input_text.value = '123'
//对于单选框,多选框等固定的值,boy_radio.value只能取到当前的值
boy_radio.checked; //查看返回的结果,是否为true,如果为true,则被选中
girl_radio.checked = true; //赋值
</script>
表达提交验证及前端密码MD5加密
MD5工具类(在线)连接:MD5工具类
<!--
表单绑定提交事件
οnsubmit=绑定一个提交检测的函数, true, false
将这个结果返回给表单,使用onsubmit接收
οnsubmit="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>
<input type="hidden" id="md5-password" name="password"/>
<!--绑定事假 onclick 被点击-->
<button type="submit">提交</button>
</form>
<script>
funciton 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
JQuery库里面存在大量的JavaScript函数。
获取JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--方法一:CDN引入-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js">
</script>
<!--方法二:导入-->
<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<a href="" id="test-jquery">点击</a>
<script>
//选择器就是css的选择器
$('#test-jquery').click(function () {
alert('hello.jquery');
})
</script>
</body>
</html>
使用公式:$(selector).action(事件函数)
- selector:选择器
- action():事件
选择器
//原生js,选择器少,麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementsById();
//类
document.getElementsByClassName();
//jQuery css中的选择器他全部都能用
$('p').click(); //标签选择器
$('#id').click(); //id选择器
$('.class').click(); //class选择器
文档工具站连接:工具站
事件
鼠标事件、键盘事件、其他事件
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--方法一:CDN引入-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js">
</script>
<!--方法二:导入-->
//<script src="lib/jquery-3.4.1.js"></script>
</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>
操作DOM
节点文本操作:
<body>
<ul id="test-ul">
<li class="js">Java</li>
<li name="py">Python</li>
</ul>
<script>
$('#test-ul li[name=python]').text(); //获得值
$('#test-ul li[name=python]').text('设置值'); //设置值
$('#test-ul').html(); //获得值
$('#test-ul').html('<strong>设置值</strong>'); //设置值
</script>
</body>
css操作:
$('#test-ul li[name=python]').css({"color","red"})
元素的显示和隐藏:本质:display : none;
$('#test-ul li[name=python]').show() //显示
$('#test-ul li[name=python]').hide() //隐藏