文章目录

JavaScript
- 1.引入JavaScript
- 2.基本语法
- 3.数据类型
- - 字符串类型
  - 数组
  - 对象
  - 流程控制
  - Map和Set
  - 严格模式
- 4.函数
- - 定义函数
- 5.函数的作用域
- 6.方法
- 7.Date
- 8.Json
- 9.面向对象编程
- 10.操作BOM对象
- 11.操作DOM对象
- - 获得Dom节点
  - 更新节点
  - 删除节点
  - 插入节点
  - 创建节点
- 12.操作表单
- 13.JQuery
- 14.操作DOM

JavaScript

1.引入JavaScript

1.内部标签

在html的头部导入
<!--    script--><script>alert('hello');</script>

2.外部引入

test.js内容：

alert('hello')

在html头部引入script

<script src="js/hh.js"></script>

2.基本语法

<!--    JavaScript严格区分大小写--><script>//1.定义变量    变量类型    变量名 = 变量值var num = 1;//弹出这个数字alert(num);//2.条件控制//if语句和java的语法一样//在浏览器的控制台打印变量：console.log(num)</script>

3.数据类型

number
- js不区分小数和整数，可以表示以下种类的数字

123//整数123
123.1//浮点数
1.12e3//科学计数法
-99//负数
NaN//不是个数字
Infinity//表示无限大

字符串
- 'aa’或者"aa"
布尔值
- true和false
逻辑运算
- &&：两个都是真，结果为真
- ||：一个为真，结果为真
- ！：非
比较运算符
- =：普通赋值
- ==：等于（类型不一样，值一样，也会为true）所以在js中别用
- ===：类型和值都得一样

注：NaN与所有数值都不相等，包括它自己

null和undefined
- null：空
- undefined：未定义
数组
- var arr = [1,a,‘hh’]:数组内的数据类型没有规定
对象
- 对象是大括号

var person = {name : "hello",tags:['nn','aa']
}

取对象的数据
- 可以直接在控制台拿到对象的数据person，如person.name

字符串类型

1.正常字符串使用单引号或双引号包裹

2.注意转义字符\

3.多行字符串编写``:

var msg = `
aa
bb
cc`

4.模板字符串

let name = "hh"
let age = 3let msg = nihao,${name}//通过el表达式取变量的值

5.字符串长度

str.length

6.大小写转换

//注意这里是方法不是属性
str.toUpperCase

7.str.indexOf(‘x’)

获取字符x在字符串中的下标

8.substring

截取字符串：str.substring(1)//从第一个字符截取到最后一个字符；str.substring(1,2)//截取[1,2)位置上的字符

数组

数组可以包含任意的数据类型

//定义数组
var arr = [1,2,3]

1.长度

加入给arr.length赋值，数组大小就会发生变化，赋值过小元素会丢失，赋值过大则没有元素的的下标显示undefined

2.indexOf，通过元素获得下标索引，如果是arr.indexOf(1)则表示获取1的下标，如果是arr.indexOf(“1”)则表示获取元素为字符串"1"的下标

3.sice():截取Array的一部分，返回一个新的数组，用法和substring

4.push（在数组尾部添加元素），pop（弹出尾部的元素）

5.unshift（在数组头部添加元素），shift（在数组头部弹出元素）

6.sort():给数组排序

7.元素反转reverse()

8.concat()数组拼接注：不会修改数组，只是会返回一个新数组

9.连接符join

如果arr=[1,2,3]

打印拼接完的数组，或者使用特定字符串拼接：arr.join(‘-’) --> 1-2-3

10.多维数组

arr = [[1,2],[“1”,“2”]] : 2*2的数组

对象

var 对象名 = {属性名:属性值,属性名:属性值
}

js中对象：都是由{…}表示一个对象，用键值对描述对象，属性之间用,隔开，最后一个属性不加逗号。

对象赋值

person.name = "hello"

动态删减属性

delete person.name

动态增加属性，直接给新的属性赋值

person.hh = "hh"//添加属性hh

判断属性值或者方法是否在这个对象中：xxx in xxx

'name' in person//true
'toStrng' in person//true

判断属性值是否是这个对象拥有的

person.hasOwnProperty('toString')//false
person.hasOwnProperty('name')//true

流程控制

if判断

（和java一毛一样）

循环
- while和for循环，内部的变量最好使用let来定义，let定义的是局部变量，出了循环就失效了。
- foreach循环，arr.forEach(function(value){console.log(value)})
- forIn循环，for(var index in arr){}:每次循环会得到一个index下标，要去取值则要使用arr[index]
- forOf循环，for(var value ofarr){}:每次循环会得到一个数组的值，遍历Map和Set只能用forOf这个不能用forin

Map和Set

Map：

var map = new Map([['a',10],['b',20]]);
map.get('a');//就能获取到10
map.set('c',30)//添加键值对
map.delete('1')//删除键值对

Set：无序不重复集合

var set = new Set([3,1,1,1]);//set集合里面只有两个元素3和1
set.add(2)//添加
set.delete(1)//删除
set.has(1)//是否包含1，返回true

严格模式

因为平常创建的变量都是默认为全局变量

<!--    'use strict':严格检查模式，预防JavaScript的随意性导致产生的一些问题必须要写在第一行，局部变量的话就不用var定义改用let--><script>'use strict';let i = 1;</script>

4.函数

定义函数

定义方式一：

function 函数名(参数){函数体
}

一旦执行到return代表函数结束，直接返回结果!

如果没有执行return，函数执行完也会返回结果，也就是undefined

定义方式二：

var 函数名 = function (参数) {函数体
}

调用函数

函数名(参数)
//可以传入任意参数，不传都行
所有可以手动抛出异常：if (typeof x !== "number"){//传入参数类型不为数字throw 'Not a Number'; }

arguments关键字

arguments表示一个数组，里面存着所有的参数

var abs = function (x){for (var i = 0;i<arguments.length;i++){console.log(arguments[i]);//取出参数}}

rest
- 获取除了已经定义的参数之外的所有参数
- rest参数只能写在最后面，必须用**…**标识

function abc(a,b,...rest){console.log("a=>"+a);console.log("b=>"+b);console.log(rest);}//调用
abc(1,2,3,4,5)
//则a=1，b=2，rest=3,4,5

5.函数的作用域

在JavaScript中，var定义变量实际是有作用域的

假设在函数体中声明，则在函数外不可以使用（一定要实现的话可以研究一下闭包）

function a() {var x = 1;x = x + 1;
}
x = x +2;// Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部就不冲突

function a() {var x = 1;x = x + 1;
}function b() {var x = 'a';x =x + 1;
}

内部函数可以访问外部函数的成员，反之则不行

function c() {var x = 1;function d() {var y = x + 1;}var z = y + 1;//外部函数不能访问内部变量Uncaught ReferenceError: y is not defined
}

假设内部函数和外部函数的变量重名

function c() {var x = 1;function d() {var x = 'a';console.log('inner:'+x);//outer:a}console.log('outer:'+x);//outer:1d();
}
c();

假设在JavaScript中函数查找变量从自身函数开始，由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function a() {var x = 'x' +y; //xundefinedconsole.log(x);var y = "y";
}
a();

结果：//xundefined

说明：JavaScript执行引擎，自动提升了y的声明，但是不会提升y变量的赋值；

所以一般会把所有的变量定义都放在函数的头部。

全局函数

var x = 'xxx';
alert(x);
alert(window.x); //默认所有的全局变量，都会自动绑定在window对象下

alert()这个函数本身也是一个window对象

var x = 'xxx';window.alert(x);var old_alert= window.alert;//old_alert(x); 使用old_alert(x)也可以成功输出window.alert(123);window.alert = function () {}
window.alert(123); //发现alert失效了window.alert =  old_alert;//恢复window.alert(456);

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错RefrenceError

由于我们所有的全局变量都会绑定到window上，如果不同的js文件，使用了相同的全局变量，就会发生冲突，这时解决的方法就是定义唯一的全局变量

var jackApp = {};//唯一全局变量jackApp.name = 'yangdi';//定义全局变量jackApp.add = function (a,b) {return a + b;
}

局部作用域 let

function aaa() {for (var i = 0; i < 100; i++) {console.log(i);}console.log(i+1);//101 发现问题i出了for循环的作用域还可以使用
}

常量 const
- 在ES6之前，怎么定义常量：只有全部用大写字母命名的变量就是常量；
- 引入了关键字const

6.方法

定义方法

方法就是把函数放进方法内部，对象里只有属性和方法。

var zhangsan = {name : '张三',birth : 2000,age : function () {let now = new Date().getFullYear();return now - this.birth;}
}
//属性
zhangsan.name
//方法，一定要带（）
zhangsan.age()

拆开写法：

function getAge() {let now = new Date().getFullYear();return now - this.birth;
}var zhangsan = {name : '张三',birth : 2000,age : getAge()
}
//zhangsan.age() 可以·
//getAge()  NaN window，因为函数里面的this无法指向

在JavaScript中可以使用apply控制this指向

function getAge() {var now = new Date().getFullYear();return now - this.birth;
}var zhangsan = {name : '张三',birth : 2000,age : getAge
}
zhangsan.age();getAge.apply(zhangsan,[]); //this指向了zhangsan，参数为空

7.Date

常用方法：

var data = new Date();
data.getFullYear();//年份
data.getMonth();//月份 0~11
data.getDate();//天
data.getDay();//星期几
data.getHours();//小时
data.getMinutes();//分钟
data.getSeconds();//秒
data.getTime();//时间戳  全世界统一，从1970.1.1  0：00：00开始
console.log(data = new Date(1616589902676));//转为标准时间

8.Json

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript中一切皆为对象，任何JavaScript支持的类型都可以用JSON表示

格式：

对象都用{}
数组都用[]
所有的键值对都是用 key：value

var user = {name:'zhangsan',age:3,sex:'男'
}
//对象转化为json字符串  {"name":"zhangsan","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);console.log(jsonUser);
//转换字符串为对象
var obj = JSON.parse('{"name":"zhangsan","age":3,"sex":"男"}');
//{name: "zhangsan", age: 3, sex: "男"}

JSON和对象的区别

var obj = {a:‘hello’,b:‘hellob’};

var json = ‘{“a”：“hello”,“b”:“hellob”}’

9.面向对象编程

类：模板
对象：具体的实例

var xiaoming = {name:"xaioming",age : 3,run : function () {console.log(this.name+"  run....")}}var xiaozhang = {name: "xiaozhang"}//原型对象xiaozhang.__proto__ = xiaoming; //小张的原型是小明var bird = {fly : function () {console.log(this.name+"   fly....")}}//小张的原型是bird
xiaozhang.__proto__ = bird;

class继承

1.定义一个类，属性、方法

//在<script>标签中定义一个学生的类
class Student{constructor(name) {//有参构造方法this.name = name;}hello (){alert("hello");}
}var xaioming = new Student("xiaoming");
var xaiohong = new Student("xiaohong");
xaioming.hello();

2.继承类

class Student{constructor(name) {this.name = name;}hello (){alert("hello");}
}class xiaoStudent extends Student{constructor(name,grade) {super(name);this.grade = grade;}MYGrade(){alert("我是一名小学生")}
}var xiaoming = new Student("xiaoming");
var xiaohong = new xiaoStudent("xiaohong,1");
xiaoming.hello();

查看对象原型

10.操作BOM对象

BOM：浏览器对象模型

window

window.alert("坚持")//弹窗弹出坚持
undefined
window.innerHeight
760
window.innerWidth
491
window.outerHeight
864
window.outerWidth
1536
//通过window获得浏览器窗口大小

Navigator

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36"
navigator.platform
"Win32"

screen

screen.width
1920
screen.height
1080

location

location代表当前页面的URL信息

location.host   //"www.baidu.com"  主机
location.href   //"https://www.baidu.com/"   当前指向的位置
location.protocol   //"https:"   协议
location.reload()   //刷新网页
//设置新的地址
location.assign('https://www.kuangstudy.com/')

document

document代表当前的页面， HTML DOM文档树

document.title//获取网页标题
"百度一下，你就知道"
document.title=('无敌')//修改网页标题
"无敌"

获取具体的文档树节点

<dl id="app"><dt>javaSE</dt><dt>javaEE</dt><dt>javaME</dt>
</dl><script>var dl =  document.getElementById('app');
</script>

history

history.back()//后退
history.forward()//前

11.操作DOM对象

核心

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点

获得Dom节点

<body><div id="father"><h1>标题一</h1><p id = "p1">p1</p><p class = "p2">p2</p></div><script>//对应css选择器var father = document.getElementById('father');var h = document.getElementsByTagName('h1');var p1 = document.getElementById('p1');var p2 = document.getElementsByClassName('p2');var childrens = father.children;//获取父节点下的所有子节点</script></body>

更新节点

1.先获取节点：

<body><div id="id1"><!--一个空标签--></div><script>var id1 = document.getElementById('id1');</script>
</body>

2.更新节点：

id1.innerText='1233'
> "1233"
id1.innerHTML='<strong>123</strong>  <!--可以解析html文本标签-->
"<strong>123</strong>"

3.进行css操作

id1.style.color = 'yellow';
id1.style.fontsize = '20px';

删除节点

1.先获取父节点

var father = 待删节点.parentElement;

2.通过父节点删除自己

father.removeChild(待删节点名称);
<!--删除节点是一个动态变化的，相当于是栈，删掉一个，后面的会补到前面的节点中去-->
father.removeChild(father.children[0]);

插入节点

我们获得了某个 Dom 节点，假设这个 Dom 节点是空的，我们通过 innerHTML 就可以增加一个元素了，但是这个 Dom 节点已经存在元素了，会产生覆盖，所以要通过追加操作

<body><p id="js">JavaScript</p><!--现在我们想把这个标签添加到 div中--><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');//获取要追加的节点var list = document.getElementById('list');//获取要插入到的节点中list.appendChild(js);//将要追加的节点插入到list节点后面</script>
</body>

创建节点

 var newP = document.createElement('p');//创建一个p标签newP.id = 'newP';//设置标签idnewP.innerText = 'Hello,Kuangshen';//设置标签内容//创建一个标签节点var myScript = document.createElement('script');//添加script标签myScript.setAttribute('type','text/javascript');//原本没有type这个属性，所以可以添加这个属性
//获取的节点就是<script type='text/javascript'></script>

插入到节点前面

<body><!--现在我们想把这个JavaScript添加到div中JavaEE的前面--><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 ee = document.getElementById('ee');var js = document.getElementById('js');var list = document.getElementById('list');//要包含的节点.insertBefore(newNode,targetNode)list.insertBefore(js,ee);</script>
</body>

12.操作表单

表单操作

<body><form 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 = "woman" id = "girl"/>女</p></form><script>var input_text = document.getElementById("username");//修改输入框的值input_text.value  = "value";//获取多选框的按钮var boy_radio = document.getElementById("boy");var girl_radio = document.getElementById("girl");//对于单选框、多选框等等固定的值，boy_radio.value只能取到当前的值var boySelected = boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中。girl_radio.checked = true;//赋值//打印输入框的值console.log(input_text.value);</script>
</body>

提交表单

<!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>
<!--表达绑定提交事件οnsubmit= 绑定一个提交检测的函数，true，false将这个结果返回给表单，使用onsubmit接收action表示提交到哪里,#表示当前页
--><form action = "#" method = "post" onsubmit = "return aaa()"><p><span>用户名：</span><input type="text" id = "username" name = "username"/></p><p><span>密码：</span><input type="password" id = "password" /></p>//隐藏起来，对原输入没有影响，但是提高表单的安全性<input type = "hidden" id = "md5-password" name = "password"><!--绑定事件 onclick 被点击--><button type = "submit" onclick="aaa()">提交</button></form><script>function aaa(){alert(1);var username = document.getElementById("username");var pwd = document.getElementById("password");var md5pwd = document.getElementById("md5-password");//MD5算法：对输入的密码进行加密//pwd.value = md5(pwd.value);md5pwd.value = md5(pwd.value);//可以校验判断表单内容，true就是通过提交，false就是阻止提交return true;}</script></body>
</html>

13.JQuery

新建一个jQuer的测试页面

就代表 j Q u e r y ， ( ) 内是选择器，公式：就代表jQuery，()内是选择器，公式：就代表jQuery，()内是选择器，公式：(selector).action()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--导入jQuery--><script src="lib/jquery-3.6.1.js"></script>
</head>
<body><a href="" id="test-jquery">点我</a><script>//选择器就是css选择器，#+id$('#test-jquery').click(function(){alert('hello,jQuery!');});</script></body>
</html>

选择器

//原生js，选择器少，麻烦不好记
//标签
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();//jQuery css中的选择器它全部都能用！
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click;//class选择器

事件

鼠标事件、键盘事件、其他事件

mousedown()(jQuery)----按下
mouseenter()(jQuery)
mouseleave()(jQuery)
mousemove()(jQuery)----移动
mouseout()(jQuery)
mouseover()(jQuery)
mouseup()(jQuery)

<!DOCTYPE html>
<html lang = "en">
<head><meta charset = "UTF-8"><title>Title</title><script src="lib/jquery-3.6.1.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>//当网页元素加载完毕之后，响应事件//$(document).ready(function(){})$(function(){$('#divMove').mousemove(function(e){$('#mouseMove').text('x:'+e.pageX+"y:"+e.pageY)})});</script>
</body>
</html>

14.操作DOM

节点文本操作

<!DOCTYPE html>
<html lang = "en">
<head><meta charset = "UTF-8"><title>Title</title><script src="lib/jquery-3.6.0.js"></script>
</head>
<body><ul id="test-ul"><li class="js">JavaScript</li><li name="python">Python</li></ul><script>//document.getElementById('');原本得这样写，太麻烦//用JQuery$('#test-ul li[name=python]').text();//获得值，li后面[]中可以通过部分属性去绑定对应的标签$('#test-ul li[name=python]').text('设置值');//设置值$('#test-ul').html();//获得值，.html则里面可以用html的语法$('#test-ul').html('<strong>123</strong>');//设置值</script>
</body>
</html>

操作css

$('#test-ul li[name=python]').css({"color","red"});

元素的显示和隐藏：本质 display:none

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();

前端学习—JavaScript相关推荐

前端学习——JavaScript抽屉，手风琴，购物车特效案例
一. JavaScript案例介绍这篇我们通过一些JavaScript案例来完成对JavaScript中BOM对象和DOM对象的理解首先我们会学到三种常用的JavaScript案例特效分别是手 ...
前端学习-JavaScript基础（ES6）
简介: ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版. ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并 ...
前端学习-JavaScript基础（正则表达式）
正则表达式正则表达式在很多程序设计语言都有,大同小异,尤其是在Python爬虫的使用很多,我也就跟他们学习爬爬图片,小视频啥的,咳咳都是学习资料.在JavaScript中,使用比较多的是表单验证,字 ...
前端学习-JavaScript基础
一.初识JavaScript 官网: https://www.w3.org/standards/webdesign/script 说明: JavaScript语法规范是ECMAScript,ECMAS ...
前端学习——JavaScript原生实现购物车案例
一. 购物车案例 1.1 案例介绍今天我们来写另外一个购物车案例,说实话对于我来说这个是花了将近三个小时的时间然后才做出来的,里面可能还存在一些我没有发现的问题,但是能完成基本的功能,对于一些基本的 ...
前端学习----JavaScript
目录 day one 1.1,JavaScrip-脚本语言 1.2,输出 1.3,应用举例 1.4,基础了解 1.5,数据类型 1.6,类型转换 1.7,运算符 1.8,流程控制语句 Day tw ...
前端学习JavaScript基础阶段
初识javascript JavaScript介绍是一种运行在客户端(浏览器)的编程语言,实现人机交互效果.作用: 网页特效表单验证数据交互服务端编程(node.js)组成: ECMAScri ...
前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型其实就是操作 html 中的标签的一些能力我们可以操作哪些内容获取一个元素 ...
前端开发经验：当初我是如何学习JavaScript
以前,我总幻想着10天精通JavaScript,一个月精通PHP等之类.最近我才发现这个想法很愚蠢.所以我现在学习JavaScript教程已经不再强迫自己说一个月学完,两个月精通的.下面分享一下我是如 ...

前端学习—JavaScript