JavaScript快速入门
1.快速入门
1.1引入JavaScript
1.内部标签
<script>
//...
</script>
2.外部引入
qj.js
alert('hello,world');
引入
<script src="js/qj.js">
</script>
测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script标签内写js代码-->
<!-- <script>
alert('hello,world');
</script>
-->
<!--外部引入-->
<!--script必须成对标签-->
<!--javascript不用显示定义type，默认就是javascript-->
<script src="js/qj.js">
</script>
</head>
<body>
</body>
</html>
2.基本语法入门
<!--JavaScript严格区分大小写-->
<script>
//1.定义变量 var 变量名 =变量值
var score=88;
var name='张三';
console.log(name);//控制台输出
//2.条件控制
if(score>60 && score<70){
alert("60~70");
}else if(score>70 && score<80){
alert("70~80");
}else {
alert("other");
}
/**
* 多行注释
*/
</script>
3.数据类型
数值，文本，图形，音频，视频。。。
变量
var _$ =值
number
js不区分小数和整数,Number
123//整数
123.1//浮点数
1.123e3//科学计数法
-99//负数
NaN//not a number
Infinity//无限大
字符串
‘abc’ “abc”
‘\n’
布尔值
true , false
逻辑运算
&& 两个都为真结果为真
|| 一个为真结果为真
！取反
比较运算符
=赋值
==等于（类型不一样，值一样，，会判断为true）
===绝对等于（类型一样值一样，结果为true）
注意：NaN===NaN，这个与所有的数值都不相等，包括自己，只能通过isNaN判断
浮点数问题
<script>
console.log((1/3)===(1-2/3));
</script>
尽量避免使用浮点数进行运算，存在精度问题
console.log(Math.abs(1/3-(1-2/3))<0.000000000001);
null和undefined
- null空
- undefined未定义
数组
Java的数组必须是相同类型的对象，js不需要
//保证代码的可读性，尽量使用[]
var arr=[1,,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,5,'hello',null,true);
取数组下标越界，就会报undefine
对象
数组是中括号，对象是大括号
每个属性需要逗号隔开，最后一个不需要
var person={
name: "qinjiang",
age: 3,
tags: ['js','java','web','...']
}
取对象的值
person.name
4.严格检查模式
'use strict';//严格检查模式，预防JavaScript的随意性导致产生的一些问题
//局部变量建议使用let定义
//全局变量
var i=1;
//ES6 let
let a=2;
'use strict’必须写在JavaScript的第一行
5.数据类型
5.1字符串
1.正常字符串使用单引号，或者双引号包裹
2.注意转义字符\
\'
\n
\r
\u4e2d Unicode字符
"\x41" Ascll
3.多行字符串
var msg=`
hello
world
`
4.模板字符串
let name="zhangsan";
let age=3;
let msg=`你好啊，${name}`;
5.字符串长度
console.log(str.length)
6.字符串的可变性，不可变
7.大小写转换
msg.toLocaleUpperCase();
msg.toLocaleLowerCase();
8.msg.indexOf();获取指定下标
9.msg.substring(1);从到一个截取到最后
msg.substring(1,2);//[1,2)
5.2数组
Array可以包含任意的数据类型
var arr=[1,2,3,4,5,6];
1.长度
arr.length;
注意：假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失
2.indexof
arr.indexOf();
字符串的“1”和数字1是不同的
3.slice（）截取Array的一部分，返回一个新数组
arr.slice(1,3);[1,3)
4.push(),pop()
push压入到尾部
pop弹出尾部的一个元素
5.unshift(),shift()头部
unshift：压入头部
shift：弹出头部的一个元素
6.排序
arr.sort()
7.元素反转
arr.reverse()
8.concat()数组拼接
arr.concat(1,2,3)//并没有修改数组，只是返回一个新数组
9.连接符join()
打印拼接数组，使用特定字符串连接
arr.join('-');
10.多维数组
arr[[12],[3]];
arr[1,1];
数组：存储数据（如何存，如何取，方法可以自己实现）
5.3对象
若干个键值对
let 对象名={
属性名: 属性值,
属性名: 属性值,
属性名: 属性值
};
let person={
name: "wushuang",
age: 3,
sex: 1,
score: 99
};
Js中对象，{…}表示一个对象。键值对描述属性xxx: xxx,多个属性之间使用逗号隔开，最后一个属性不加逗号
JavaScript中所有的键都是字符串，值是任意对象
1.对象赋值
person.name="wushaung"
'wushaung'
2.使用一个不存在的对象属性，不会报错
undefined
3.动态的删减属性，通过delete删除对象的属性
delete person.name
true
person
{age: 3, sex: 1, score: 99}
4.动态的添加，直接给新的属性添加值即可
person.a="aa"
5.判断属性值是否在这个对象中 xxx in xxx
'age' in person
true
'toString' in person
true
继承的父类的方法也可以找到
6.判断一个属性是否是这个对象自身的
person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
false
5.4流程控制
if判断
var age=3;
if(age>3){
alert("hh");
}else {
alert("ww");
}
while循环，避免死循环
var age=3;
while (age<100){
age +=1;
console.log(age);
}
do{
age +=1;
console.log(age);
}while(age<100)
for循环
var age=3;
for (let i = 0; i < 100; i++) {
console.log(i);
}
forEach循环 5.1
var age=[1,2,3,4,5,6,7,8];
//函数
age.forEach(function (value) {
console.log(value)
})
for in
var age=[1,2,3,4,5,6,7,8];
for(var num in age){
console.log(age[num])
}
出的是索引
5.5Map和Set
Map:
//学生的成绩，学生的名字
var map=new Map([['tom',100],['jack',90],['haha',80]]);
var name=map.get('tom'); //通过key获取value
map.set('admin',123456);//新增或者修改
console.log(name);
map.delete //删除一个元素
Set:无序不重复
var set=new Set([3,1,1,1,1,1]);//set可以去重
set.add(2); //添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素
5.6iterator es6
通过for…of获取值
for…in获取下标
var arr=[3,4,5];
for (var x of arr){
console.log(x);
}
遍历map
var map=new Map([['tom',100],['jack',90],['haha',80]]);
for(let x of map){
console.log(x)
}
遍历set
var set=new Set([1,2,3,4,5,6,7]);
for(let x of set){
console.log(x)
}
6.函数
6.1，定义函数
定义方式一
绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到return，代表函数结束，返回结果
如果没有执行return，函数执行完也会返回结果，结果就是undefined
定义方式二
var abs=function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
调用函数
abs(10)
abs(-10)
参数问题：JavaScript可以传任意个参数，也可以不传递参数
参数进来是否存在的问题：假设不存在参数，先判断
function abs(x){
if(typeof x!='number'){
throw 'not a number';//手动抛出异常来判断
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments
arguments是一个JS免费赠送的关键字
多个参数时，可以通过arguments遍历出来
代表传递进来的所有参数，是一个数组，可以拿到隐藏的参数
function abs(x){
if(arguments.length>1){
console.log(arguments[1]);
}
if(typeof x!='number'){
throw 'not a number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
问题：arguments会包含所有的参数，有时候只想使用除当前参数来进行操作，需要排除当前已有的参数。
rest
获取除了已经定义的参数之外的所有参数…
以前：
function aaa(a, b) {
console.log("a=>"+a);
console.log("b=>"+b);
if(arguments.length>2){
for (let i=2;i<arguments.length;i++){
console.log(arguments[i]);
}
}
}
现在：
function aaa(a, b,...rest) {
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest参数只能写在最后，必须用…标识
6.2，变量的作用域
JavaScript中，var定义变量实际是有作用域的
假设在函数体中声明，则在函数体外不可使用~（闭包）
function qj() {
var x=1;
x=x+1;
}
x=x+1;//Uncaught ReferenceError: x is not defined
如果两个函数使用相同的变量名，只要在函数内部，就不影响
function qj() {
var x=1;
x=x+1;
}
function qj2() {
var x=1;
x=x+1;
}
内部函数可以访问外部函数的成员，外部不能访问内部
function qj() {
var x=1;
x=x+1;
function qj2() {
var y=x+1; //2
}
var z=y+1; //Uncaught ReferenceError: y is not defined
}
内外函数变量同名，由内向外查找，假设外部存在，同名的函数变量，内部函数会屏蔽外部函数的变量
function qj() {
var x=1;
x=x+1;
function qj2() {
var x='a'; //2
console.log('inner'+x);
}
qj2();
console.log('outer'+x);
}
提升变量的作用域
// 'use strict'
function qj() {
var x='x'+y;
console.log(x);
var y='y';
}
结果：xundefined
说明：Js执行引擎，自动提升y的声明，但是不会提升变量y的赋值
定义变量先声明再赋值,所有的变量都放在头部，不用乱放，便于维护
var x,y,z,h;
全局函数
'user strict'
//全局变量
var x=4;
function f() {
console.log(x);
}
f();
console.log(x);
全局对象windows
var x='xxx';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象中
alter()这个函数，本身也是window的一个变量
// 'user strict'
var x='xxx';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象中
var old_alter= window.alert;
//old_alter(x);
window.alert=function () {
};
//发现alter（）失效
window.alert(123);
//恢复
window.alert=old_alter;
window.alert(456);
JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数范围内找到，就会向外查找，如果没有在全局作用域中找到，就会报错ReferenceError
规范：
由于所有的全局变量都会绑定到window上，如果不同的js文件，使用了相同的全局变量，减少冲突
//唯一全局变量
var WuShuang={};
//定义全局变量
WuShuang.name='无双';
WuShuang.add=function (a,b) {
return a+b;
}
把自己的代码全部放到自己定义的唯一空间命名中，降低全局命名冲突的问题
局部作用域
function aaa() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);//i 出了作用域还能用
}
使用let关键字，解决局部作用域冲突
function aaa() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);//i 出了作用域还能用
}
建议使用let
常量const
在ES6，只有用全部大写命名的就是常量，建议不要修改
var PI='3.14';
console.log(PI);
PI='222';
console.log(PI);
发现可以改变这个值
const PI='3.14';//只读变量
console.log(PI);
PI='222';//直接报错
6.3，方法
定义方法：方法就是把函数放到对象的里边，对象只有两个东西，属性和方法
var wushuang={
name: '无双',
birth: 2001,
age: function () {
//今年-出生
var now=new Date().getFullYear();
return now-this.birth;
}
}
//属性
wushuang.name
//方法，一定带()
wushuang.age()
this.始终指向调用它的人
拆开上代码
function getAge() {
//今年-出生
var now=new Date().getFullYear();
return now-this.birth;
}
var wushuang={
name: '无双',
birth: 2001,
age: getAge()
}
this是无法指向的，默认指向调用它的对象
apply
在js中控制this指向的对象
function getAge() {
//今年-出生
var now=new Date().getFullYear();
return now-this.birth;
}
var wushuang={
name: '无双',
birth: 2001,
age: getAge
};
getAge.apply(wushuang,[]);//this指向了wushuang，参数为空
7.内部对象
标准对象
typeof 123
'number'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof aa
'undefined'
7.1,Date
基本使用
var now =new Date(); //Wed Jun 22 2022 14:18:38 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getMinutes();//秒
now.getTime();//时间戳 1970 1.1 0：00：：
转换
new Date(1655878718669);//时间戳转换为时间
now.toLocaleString()//获取本地时间，注意调用的是方法，不是属性
'2022/6/22 14:18:38'
7.2，Json
在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示：
格式：
- 对象都用{}
- 数字都用[]
- 所有的键值对 都是用key：value
JSON字符串和JS对象的转化
var user={
name: "无双",
age: 3,
sex: '男'
}
//对象转换为JSON字符串
var jso_user=JSON.stringify(user);
//json字符串转换为对象
var obj=JSON.parse('{"name":"无双","age":3,"sex":"男"}');
JSON和JS对象区别
var obj={a : 'b',b : 'hellob'};
var json='{"a":"hello","b":"hellob"}'
7.3,Ajax
- 原生的js xhr异步请求
- JQuery $(#nname).ajax(“”)
- axios请求
8.面向对象编程
原型：父类
var user={
name: "无双",
age: 3,
run: function () {
console.log(this.name+"run....");
}
}
var xiaoming={
name: "小明"
}
//原型对象
var Bird={
fly: function () {
console.log(this.name+"fly....");
}
}
// 小明的原型是user
xiaoming.__proto__= Bird;
class继承
function Student(name) {
this.name=name;
}
//给 student 新增方法
Student.prototype.hello=function () {
alert('hello');
}
//ES6之后
// 定义一个学生的类
class Student{
constructor(name){
this.name=name;
}
hello(){
alert('hello');
}
}
xiaoming.name
'小明'
xiaoming.hello()
继承
// 定义一个学生的类
class Student{
constructor(name){
this.name=name;
}
hello(){
alert('hello');
}
}
class pupil extends Student{
constructor(name,grade){
super(name);
this.grade=grade;
}
myGrade(){
alert('我是一名小学生');
}
}
var xiaoming=new Student("小明");
var xiaohong=new pupil("张三",2);
本质还是原型
原型链
__ proto __
9.操作BOM对象
JavaScript和浏览器的关系
JavaScript诞生就是未来让他在浏览器中运行
BOM：浏览器对象模型
window
window代表浏览器窗口
window.alert(1)
undefined
window.innerHeight
406
window.innerWidth
1396
window.outerWidth
1536
window.outerHeight
816
navigator
navigator封装了浏览器信息
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36'
navigator.platform
'Win32'
大多时候，不使用navigator对象，因为会被人为修改
不建议使用这些属性来判断和编写代码
screen
代表屏幕的尺寸
screen.width
1536px
screen.height
864px
location
location代表当前的URL信息
host: "localhost:63342"
hostname: "localhost"
href: "http://localhost:63342/JavaScript/lesson02/class%E7%BB%A7%E6%89%BF.html?_ijt=4hdtbo9kftmj9u5hg2l3t8lrki"
port: "63342"
protocol: "http:"
location.reload()//刷新网页
location.assign('https://www.bilibili.com/')//设置新地址
document
document代表当前页面,HTML DOM文档树
获取具体的 文档树节点
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl=document.getElementById('app');
</script>
可以获取客服端的cookie
document.cookie
劫持cookie
服务端可以设置cookie为httpOnly
history
代表浏览器的历史记录
history.back()//后退
history.forward()//前进
10.操作DOM对象
DOM：文档对象模型
核心
浏览器网页就是一个Dom树形结构
- 更新：更新Dom节点
- 遍历dom节点：得到dom节点
- 删除一个节点
- 添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点
//对应css选择器
var h1=document.getElementsByTagName('h1');//标签选择器
var p1=document.getElementById('p1');
var p2=document.getElementsByClassName('p2');
var father=document.getElementById('father');
var children=father.children//获取父节点下的所有节点
// father.firstChild;
// father.lastChild;
原生代码，之后尽量使用jquery
更新节点
- id1.innerText=‘123’ 修改文本值
- id1.innerHTML=‘123’ 可以解析html标签
操作css
- id1.style.color=‘red’ 操作css样式 使用驼峰命名
删除节点
删除节点步骤，先获取父节点，再删除自己
father.removeChild(p1)
//删除是一个动态的过程
father.removeChild(father.children[0])
可以直接通过父节点删除子节点，也可以通过子节点得到父节点，删除多个节点的时候，children是在时刻变化的
插入节点
我们获得某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了就不能使用了，因为会发生覆盖
追加
<p id="js">JavaScrpt</p>
<div id="list">
<p id="JavaEE">JavaEE</p>
<p id="JavaSE">JavaSE</p>
<p id="JavaME">JavaME</p>
</div>
<script>
let js = document.getElementById('js');
let list = document.getElementById('list');
list.append(js);//追加到最后
</script>
创建新节点
<script>
let js = document.getElementById('js');
let list = document.getElementById('list');
let newp = document.createElement('p');
newp.id='newp';
newp.innerText='hello,world';
list.append('newp');
//创建一个标签节点，通过这个标签可以设任意值
let myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
</script>
插入一个节点
<script>
let js = document.getElementById('js');
let list = document.getElementById('list');
let newp = document.createElement('p');
newp.id='newp';
newp.innerText='hello,world';
list.append('newp');
//创建一个标签节点
let myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
// var body=document.getElementsByTagName('body');
// body[0].setAttribute('style','background-color:red');
let mystyle = document.createElement('style');
mystyle.setAttribute('type','text/css');
mystyle.innerText='body{ background-color: green;}';
let head = document.getElementsByTagName('head');
head[0].appendChild(mystyle);
</script>
insert
<script>
let se = document.getElementById('JavaSE');
let js = document.getElementById('js');
let list = document.getElementById('list');
list.insertBefore(js,se);//新节点，插入位置节点
</script>
11.操作表单
获取表单信息
<script>
var text_input=document.getElementById('username');
var boy_redio=document.getElementById('boy');
var girl_redio=document.getElementById('girl');
//得到输入框的值
text_input.value;
//修改输入框的值
text_input.value='222';
//对于单选框，多选框等，固定的值，xxx.value只能获得当前的值
boy_redio.checked;//查看结束是否是true 如果为true则被选中
</script>
MD5加密
<!--表单绑定 使用return 进行校验判断-->
<form action="#" method="post" onsubmit="return aaa()">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="password" ></td>
</tr>
<tr>
<td><input type="hidden" id="md5_password" name="password"></td>
</tr>
<tr>
<td><button type="submit" >登录</button></td>
</tr>
</table>
<script>
function aaa() {
let uname = document.getElementById('username');
let pwd = document.getElementById('password');
let md5pwd = document.getElementById('md5_password');
md5pwd.value=md5(pwd.value);
return true;
}
</script>
</form>
使用隐藏域，不会出现显示密码变长
12.jQuery
jQuer库，里面有大量的javascript
获取jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
</body>
</html>
使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<!--
公式：$(选择器).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
//css选择器
$('#test-jquery').click(function () {
alert('hello,jQuery');
})
</script>
</body>
</html>
选择器
//原生js，选择器少
//标签选择器
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css 中的选择器 它全部能用
$('p').click()//标签
$('#id1').click()//id
$('.class2').click()//class
文档工具站：https://jquery.cuishifeng.cn/
事件
鼠标事件，键盘事件，其他事件
鼠标事件：
-
mousedown事件：鼠标按下触发
-
mouseup事件：松开鼠标时触发
-
mouseover事件：点击结束触发
-
mousemove事件：鼠标移动触发
-
mouseenter事件：光标进入元素上时触发。
-
mouseleaver事件：用户的光标离开元素时触发。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
<style>
#divMove{
width: 450px;
height: 450px;
border: 2px solid aquamarine;
}
</style>
</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>
键盘事件
1.keydown()事件
当按钮被按下时，发生 keydown 事件。
2.keypress()事件
keypress 当按钮被按下时，会发生该事件，我们可以理解为按下并抬起同一个按键。
3.keyup事件
keyup 事件会在按键释放时触发，也就是你按下键盘起来后的事件
操作DOM
$('#test-ul li[name="python"]').text();//获取值
$('#test-ul li[name="python"]').text('sss');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//操作值
css的操作
3.6版本是：
如果低版本是,隔开
$('#test-ul li[name="python"]').css({"color":"red"});
元素显示和隐藏
$('#test-ul li[name="python"]').hide();//show()显示 hide()隐藏
$('#test-ul li[name="python"]').toggle();//显示与隐藏 交换
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
