1.快速入门
1.1引入JavaScript
1.1.1内部引入
<script>alert("hello,world");</script>
1.1.2.外部引入
zxf.js
alert("hello,world");
helloword.html
<script src="js/zxf.js"></script>
注意! html5对标签极为严格,script标签必须成对出现
1.2.基本语法入门
1.2.1.变量和条件判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
// 1.定义变量 变量类型 变量名 = 变量值
var score = 71;
// 2.条件控制
if (score>=60){
alert("及格")
}else {
alert("不及格")
}
// console.log(score) 在浏览器控制台打印变量
</script>
<body>
</body>
</html>
1.2.2.浏览器控制台打印变量
1.2.3.浏览器Debug调试
1.3.数据类型
number
123 //整数
123.1 //浮点数
1.123e3 //科学计数法
-80 //负数
NaN //not a number 不是一个数
Infinity //表示无限大+*
字符串
'abc' ''abc''
布尔值
true false
逻辑运算
&&
||
!
比较运算符
= 赋值
== 等于(类型不一样,值一样,也会返回true)
=== 绝对等于(类型一样并且值一样,返回true)
所以在js中不用== 进行比较
注意:
- NaN这个值与所有的数值都不相等,包括本身
- 只能通过isNaN(NaN)来判断这个数是否为NaN
浮点数问题
尽量避免使用浮点数进行比较
可以用绝对值相减小于一个无限接近于0的数来判断是否相等
null和undefined
null 空
undefined 未定义
数组
java中数组必须存放相同类型的值,而JS不需要这样
var arr = [1,2,null,"hello"];
如果数组下表越界了就会报undenfiend
对象
var person = {
name: "张筱枫",
age: 22,
tags: ["js","java","ssm"]
}
取对象的值
1.4 严格检查格模式strict
"use strict" 严格检查模式,预防由于JavaScript的随意性而导致的一些问题
- 必须写在第一行
- Idea需要设置支持es6的语法
局部变量都使用let进行定义
使用之后运行直接报错。
2.数据类型详解
2.1.字符串
1.正常字符串使用单引号或者双引号包裹
2.转义字符 \
\'
\n
\t
\u4e2d unicode字符
\\x41 Ascll字符
3.多行字符串编写
tab上面的`
let msg = `
早上好
今天天气不错
`
4.模板字符串
let name = '张筱枫'
let msg = `早上好,${name}`
5.字符串长度
str.length
6.字符串的可变性,不可变
7.一些字符串的方法
2.2.数组
let var arr = [1,2,3,4,5]
1.长度
注意:假如给arr.length赋值,数组大小就会发生变化,如果赋值过小,元素就会丢失
2.indexOf ,通过元素获取下标索引
3.slice(),截取Array中的一部分,返回一个新数组。类似substring
4.push() 压入元素,pop()弹出元素 尾部操作
5.unshift()压入元素 shift()弹出元素 头部操作
6.排序sort()
7.元素反转reverse
8.concat()
注意:concat并没有改变原有的数组,只是返回了一个新的数组
9.连接符join
打印拼接字符,使用特定的字符串连接
10.多维数组
2.3.对象
对象定义
var person ={
name:"张筱枫",
age:22,
email:"1342486395@qq.com",
score:100
}
js中{…}表示一个对象,属性和属性值通过键值对的形式描述,多个属性之间用逗号隔开,最后一个属性不加逗号
JavaScript中所有的对象的键都是字符串,值可以是任意对象
1.对象赋值
2.使用一个不存在的属性,不会报错
3.动态删减一个属性 delete
4.动态增加一个属性
5.判断属性是否在这个对象中
6.判断一个属性是否是自身所拥有的
2.4.流程控制
1.if判断
var score = 71;
if (score>=60){
alert("及格")
}else {
alert("不及格")
}
2.while循环
let i=0;
while (i<100){
i++;
console.log(i);
}
3.for循环
for (let i = 0; i <100 ; i++) {
console.log(i);
}
4.数组遍历
forEach循环
let arr = [1,561,561,56,156,1,561,56,1,561,53];
arr.forEach(function (value) {
console.log(value)
})
for in循环
let arr = [1,561,561,56,156,1,561,56,1,561,53];
for (let index in arr){
console.log(arr[index])
}
for of 循环
for (let xin arr){
console.log(x)
}
2.5.Map和Set
ES6新特性
1.Map
//定义一个Map
let hero = new Map([["伊泽瑞尔","射手"],["拉克丝","法师"],["佐伊","法师"]])
console.log(hero.get("伊泽瑞尔"));//获取键对应的值
hero.set("vn","射手");//添加或修改元素
hero.delete("佐伊")//删除元素
console.log(hero)
2.Set 无序不重复的集合
let set = new Set([1,2,3,3,])
console.log(set)
set.add(4)//添加一个元素
set.delete(2)//删除一个元素
console.log(set.has(1))//判断是否有这个元素
2.6.遍历集合
let hero = new Map([["伊泽瑞尔","射手"],["拉克丝","法师"],["佐伊","法师"]])
for (let x of hero){
console.log(x)
}
let set = new Set([1,2,3,4])
for (let x of set){
console.log(x)
}
3.函数
3.1.定义函数
定义方式一
function abs(x) {
if (x>0){
return x;
}else {
return -x;
}
}
定义方式二
var abs = function (x) {
if (x>0){
return x;
}else {
return -x;
}
}
一旦执行打return代表函数结束,返回结果
如果没有执行return,也不会报错,返回undefined或者NaN
参数问题:JavaScript可以传递任意个参数,也可以不传递参数
参数是否存在问题
假设不存在参数,如何规避
function abs(x) {
if (typeof x!=="number"){
throw "Not a Number";
}//手动抛出异常判断参数是否存在
if (x>0){
return x;
}else {
return -x;
}
}
arguments
arguments是一个数组,代表传递进来的所有参数
function abs(x) {
console.log("x>"+x);
for (let i = 0; i <arguments.length ; i++) {
console.log(arguments[i])
}
if (x>0){
return x;
}else {
return -x;
}
}
rest
ES6 新特性,获取除了已定义的参数以外的参数
function abs(x,...rest) {
console.log("x>"+x);
console.log(rest)
if (x>0){
return x;
}else {
return -x;
}
}
rest参数只能写在最后面,必须用…标识
3.2.变量的作用域
var是有作用域的
假设在函数体中声明,则在函数外不可以使用
内部函数可以访问外部函数的成员,反之则不行
function zxf() {
var x=1;
x=x+1;
}
x=x+2;
提升变量的作用域
function zxf() {
var x = "x" +y;
console.log(x)
var y = "y";
}
结果:xundefined
说明js执行引擎,自动提升了y的声明,但是不会提升y的赋值
所以养成规范,所有变量的定义都放在函数的头部便于代码维护
function zxf() {
var x,y,z;
x="x";
y="y";
z="z";
}
全局函数
//全局变量
x= 1;
function f() {
console.log(x)
}
console.log(x)
全局对象window
var msg = "欢迎你";
alert(msg);
alert(window.x);
window.alert(x);
alert这个函数本身也是一个window变量
JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用域范围内找到,就会向外查找,如果全局作用域都没有找到,报错ReferenceError
规范
由于所有变量都会绑定到window上,如果不同的js文件定义了相同的变量就会产生冲突
//唯一全局变量
var FengApp={};
//定义全局变量
FengApp.name = "张筱枫";
FengApp.add=function (a,b) {
return a+b;
}
所以需要把自己的代码全部放到自己定义的唯一明明空间中,降低全局变量冲突问题。
局部作用域 let
function f() {
for (var i = 0; i <10 ; i++) {
console.log(i)
}
console.log(i)//问题:这里的i仍然可以使用
}
ES6新特性 let关键字 解决局部变量冲突问题
function f() {
for (let i = 0; i <10 ; i++) {
console.log(i)
}
console.log(i)//Uncaught ReferenceError: i is not defined
}
定义局部变量时尽量都使用let定义
常量 const
在ES6之前,这样定义常量:只要用大写字母定义的就是常量,建议不要修改这样的值
在ES6之后,引入const关键字定义常量
const PI ="3.14";//只读常量
console.log(PI);
PI="123";
console.log(PI)//TypeError: Assignment to constant variable.
3.3.方法
方法就是把函数放到对象里面,对象只有两个东西:属性和方法
let person = {
name: "张筱枫",
birth: 1998,
age:function () {
let now = new Date().getFullYear();
return now - this.birth;
}
}
//调用属性
person.name
//调用方法,一定要加()
person.age()
将上述代码拆开
function getAge() {
let now = new Date().getFullYear();
return now - this.birth;
}
let person = {
name: "张筱枫",
birth: 1998,
age:getAge
}
this是无法指向的,默认指向调用它的那个对象
apply
apply在js中可以控制this指向
function getAge() {
let now = new Date().getFullYear();
return now - this.birth;
}
let person = {
name: "张筱枫",
birth: 1998,
age:getAge
}
getAge.apply(person,[]);
4.内部对象
4.1 Date时间类
let date = new Date();//标准事件
date.getFullYear();//年
date.getMonth();//月
date.getDate();//日
date.getDay();//星期几
date.getHours();//时
date.getMinutes();//分
date.getSeconds();//秒
date.getTime();//时间戳
new Date(date.getTime());//时间戳转为事件
date.toLocaleDateString();//转换为本地时间
4.2.JSON
在JavaScript中,一切皆对象,任何js支持的类型都可以用json来表示
格式:
- 对象用{}
- 数组用[]
- 键值对用 key:value
let person = {
name:"张筱枫",
age:22,
sex:"男"
}
//将person对象转换为json字符串
let s = JSON.stringify(person);
//将json字符串转换为对象
let person1 = JSON.parse(s);
5.面向对象编程
5.1.class继承
1.定义一个类
class Student{
constructor(name) {
name = this.name;
}
hello(){
alert("hello")
}
}
let s1 = new Student("小明");
s1.hello();
2.继承
class Student{
constructor(name) {
name = this.name;
}
hello(){
alert("hello")
}
}
class Student1 extends Student{
constructor(name,age) {
super(name);
this.grade=age;
}
run(){
alert("run..");
}
}
let s1 = new Student("小明");
let s2 = new Student1("小红",2);
s2.run();
本质:查看对象原型
6.操作BOM对象(重点)
6.1.window
window代表浏览器窗口
window.innerHeight
754
window.outerHeight
824
window.innerWidth
507
window.outerWidth
1536
6.2.screen
screen代表屏幕
screen.width
1536
screen.height
864
6.3.location
代表当前页面的url信息
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign("https://blog.youkuaiyun.com/qq_43601784")
6.4.document
代表当前的页面 HTML,文档树
document.title
"百度一下,你就知道"
获取具体的文档树节点
<dl id="dd">
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
</dl>
<script>
let elementById = document.getElementById("dd");
</script>
获取cookie
document.cookie
"BIDUPSID=C3C549769A716B3F0FAFA74D23F90541; PSTM=1596446785; BAIDUID=C3C549769A716B3F6E878D8C70EC6BA6:FG=1; COOKIE_SESSION=0_0_0_0_1_0_1_0_0_0_0_0_0_0_0_0_1596446786_0_1596446786%7C1%230_0_1596446786%7C1; BD_HOME=1; delPer=0; BD_CK_SAM=1; PSINO=3; BD_UPN=12314753; H_PS_645EC=6b61Jg3nDKjVkELSocgM0CW08T7i9xJqdS7NQDe9JQnbR4qgv8EM9bOtBDk; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_PSSID=7540_32606_1436_7546_32328_31253_7610_32675_7626_32116_7565_26350"
6.5.history
代表浏览器的历史记录
history.back() //后退
history.forward() //前进
7.操作DOM对象(重点)
7.1.核心
浏览器网页就是一个Dom树形结构。
- 更新:更新Dom节点
- 遍历:得到Dom节点
- 删除:删除Dom节点
- 添加:添加Dom节点
要操作Dom节点,需要先获得这个Dom节点
7.2.获得Dom节点
<body>
<div id="father">
<h1>标题</h1>
<p1 id="p1">1</p1>
<p2 class="p2">2</p2>
</div>
<script>
let father = document.getElementById("father");
let h1 = document.getElementsByTagName("h1");
let p2 = document.getElementsByClassName("p2");
let p1 = document.getElementById("p1");
let children = father.children; // 获取父节点下的所有子节点
// father.firstChild;
// father.lastChild;
</script>
</body>
7.3.更新节点
<div id = "div">
</div>
<script>
let div = document.getElementById("div");
</script>
操作文本的值
div.innerText='123'
div.innerHTML='<strong>123</strong>'
操作js
div.style.color='red'
div.style.fontSize='200px'
div.style.padding = '2em'
7.4.删除节点
删除节点步骤:先找到要删除节点的父节点,再通过父节点删除自己
<div id="father">
<h1>标题</h1>
<p1 id="p1">1</p1>
<p2 class="p2">2</p2>
</div>
<script>
let p1 = document.getElementById("p1");
let father = p1.parentElement;
father.removeChild(p1);
//删除是一个动态的过程
father.removeChild(father.children[0]);
</script>
注意:在删除节点时,children的节点是不断变化的、
7.4.插入节点
追加插入节点
<p id="js">JavaScript</p>
<div id="list">
<p id="javase">javase</p>
<p id="javaee">javaee</p>
<p id="javame">javame</p>
</div>
<script>
let js = document.getElementById("js");
let list = document.getElementById("list");
list.appendChild(js);
</script>
通过js创建一个新的标签
<script>
let js = document.getElementById("js");//已经存在的节点
let list = document.getElementById("list");
list.appendChild(js);
//通过js创建一个节点
let newP = document.createElement('p');
newP.id = "newP";
newP.innerText = "Spring";
list.appendChild(newP);
</script>
insert插入
<script>
let js = document.getElementById("js");//已经存在的节点
let javase = document.getElementById("javase");
let list = document.getElementById("list");
list.insertBefore(js,javase);//insertBefore(newNode,targetNode)
</script>
8.操作表单(重要)
判断输入内容是否为空
<body>
<script>
let name = document.getElementById('name');
function x(x) {
if (x.textContent==null||x.textContent.replace(/^ +| +$/g, '') == '') {
alert("不能为空")
}
}
</script>
<form action="">
<span id="name_tip">用户名</span><input onblur="x(name)" type="text" id="name"><span id="test" style="color: red"></span>
</form>
</body>
9.jQuery
jQuery里存在大量的JavaScript函数
jQuery文档
链接: https://www.runoob.com/jquery/jquery-tutorial.html
9.1.jQuery初步使用
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
${selector}.事件(function(){
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<a href="" id="test-jQuery">点我</a>
<script>
$('#test-jQuery').click(function () {
alert("hello,jQuery");
})
</script>
</body>
</html>
9.2.选择器
$('.class')//类选择器
$('#id')//id选择器
$('p')//标签选择器
9.3.事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
<!--获取当前鼠标的坐标-->
<body>
mouse : <span id="mouseMove"></span>
移动鼠标
<div id="divMove"></div>
<script>
//当网页加载完成后,响应事件
$(function () {
$('#divMove').onmousemove(function (e) {
$('#mouseMove').text("x:"+e.pageX + "y:"+e.pageY)
})
});
</script>
</body>
</html>
9.4.操作DOM
节点文本操作
$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text("PYTHON");//设置值
css操作
$('#test-ul li[name=python]').css("color","red");
显示和隐藏
$('#test-ul li[name=python]').show();//显示
$('#test-ul li[name=python]').hidden();//隐藏