JavaScript基础(快速回忆版)
JavaScript基础(快速回忆版)
1.对象:
对象的定义:
对象是若干键值对(属性之间使用逗号隔开,最后一个属性不加逗号)
JavaScript中的所有的键都是字符串,值是任意对象
<script>
//对象
var person={
name:"lyl",
age:12,
tages:['java','javascript','web']
}
</script>
取对象的值
person.name
>lyl
person.age
>12
通过delete删除对象的属性
person.name
"lyl"
delete person.name
true
person
{age: 21, number: 123456}
2.严格检查模式
建议启用严格检查模式,
在javaScript代码块第一行中加入'use strict'
<script>
//严格检查模式
'use strict';
i=1; //严格检查模式下的错误定义
let i=1; //局部变量建议都使用let定义
var m=1;
</script>
3.字符串
多行字符串编写
//多行字符串编写(使用反引号``)
var mes=
`hello
你好
我是望穿先生!`
模板字符串
//模板字符串
let name='lyl';
let age=21;
let massage=`你好啊,${name}`
字符串的可变性
字符串不可变
4.数组
Array可以包含任意的数据类型
//数组可以包含任意数据类型
var arr=[1,2,3,'lyl',13.8]
通过arr.length获取长度
注意:假如给arr.length赋值,数组的大小就会发生变化,如果赋值过小,元素就回丢失
slice()方法:
slice( )截取Array的一部分,返回一个新的数组,类似于String中的substring
push()和pop()方法:
push:将元素压入到尾部
pop:弹出尾部的一个元素
unshift()和shift()方法:
unshift:将元素压入到头部
shift: 弹出头部的一个元素
join()方法:
打印拼接数组,使用特定的字符串连接
var arr=[1,2,3,4,5]
undefined
arr.join('-')
"1-2-3-4-5"
concat()方法:
实现数组的拼接
>var arr2=['k','l']
>undefined
>arr.concat(arr2)
>[1, 2, 3, 4, 5, "k", "l"]
5.分支和循环
循环:
foreach()
var age=[12,23,34,45,21,22]
//foreach()里是函数
age.foreach(function(value)){
console.log(value)
}
for...in 遍历出索引下标
//遍历出来的是数组的索引
for(var num in age){
if(age.hasOwnProperty(num)){
console.log("存在")
console.log(age[num])
}
}
6. Map和Set
Map:
//Map
var map=new Map([['lyl',99],['kkk',89]]);
var score =map.get('kkk') //通过键获取值
console.log(score)
Set:无序不重复的集合
var set=new Set([1,2,3,4,1,1,1]);
console.log(set)
>
0: 1
1: 2
2: 3
3: 4
7. iterator
通过for of遍历值
//for of遍历值
var arr=[3,4,5]
for(var x of arr){
console.log(x)
}
8.函数
8.1定义函数
定义方式1:
<script>
//定义函数
function abs(x){ //绝对值函数
if(x>=0){
return x;
}else{
return -x;
}
}
</script>
一旦执行到return代表函数返回,返回结果。
定义方式2:
//定义方式2
var abs=function (x){
if(x>=0){
return x;
}else{
return -x;
}
}
假设不存在参数,如何规避(需要手动抛出参数)
function abs(x){
//手动抛出异常
if(typeof x!='number'){
throw 'Not a number'
}
if(x>=0){
return x;
}else{
return -x;
}
}
8.2 arguments关键字
代表传进来的所有参数是一个数组
var abs=function (x){
for (var i=0;i<arguments.length;i++){ //如果一次传入多个参数,按数组进行遍历
console.log(arguments[i])
}
if(x>=0){
return x;
}else{
return -x;
}
}
8.3 rest关键字
arguments包含所有的参数,我们有时候想要使用多余的参数类进行附加操作,需要排除已有的参数
rest是 ES 6 引入的新特性,可以获取除了已经定义的参数之外的所有参数
注:rest参数只能写在最后面,必须用...标识
function lyl(a,b,...rest){
console.log(rest); //输出除了a,b这两个参数以后的所有参数
}
9. 变量的作用域
var 定义的变量有作用域‘
变量在函数内有效,内部函数可以访问外部函数的成员,反之则不行
全局对象window
var a='全局变量';
alert(a);
alert(window.a) //默认的所有全局变量,都会自动绑定在window对象下
规范:
由于我们所有的全局变量都会绑定到我们的window对象上,如果不同的js文件,使用了相同的全局变量,如何才能减少冲突?
把自己的代码全部放入自己定义的唯一命名空间中,降低全局命名冲突的问题
//单一全局变量
var lyl={};
//定义全局变量
lyl.name="望穿先生";
lyl.add=function (a,b){
return a+b;
}
建议使用let关键字 定义局部变量
解决局部作用域冲突的问题
常量关键字 const
const PI="3.14" //定义常量
console.log(PI);
PI="1234"; //常量不可被修改,此时会报类型错误
10.方法
方法就是把函数放在对象的里面,对象只有两个东西:属性和方法
var lyl={
name:"望穿先生",
birth:2000,
//方法
age:function (){
var now = new Date().getFullYear();
return now-this.birth;
}
//调用方法一定要带()
lyl.age()
apply(在js中可以控制this指向)
function getAge(){
var now = new Date().getFullYear();
return now-this.birth;
}
var lyl={
name:"望穿先生",
birth:2000,
age:getAge()
}
getAge().apply(lyl,[]); //this,只指向了lyl,参数为空
11.内部对象
11.1 Date对象
let date = new Date();
date.getFullYear(); //年
date.getMonth(); //月
date.getDate(); //日
date.getDay(); //星期
date.getHours(); //时
date.getMinutes(); //分
date.getSeconds(); //秒
date.getTime(); //时间戳,从1970年 1.1 00.00到现在的时间戳
// 通过时间戳返回正确格式的时间
// console.log(new Date(1646962666507))
// VM194:1 Fri Mar 11 2022 09:37:46 GMT+0800 (中国标准时间)
转换
date = new Date(1646962666507)
date.toLocalestring() //将时间戳转换为当前时间
11.2 JSON对象
Json是什么
-
JSON(JS对象简谱)是一种轻量级的数据交换格式
-
简洁和清晰的层次结构使得JSON成为理想的数据交换语言
-
易于人阅读和编写,同时也有易于机器解析和生成,并有效提升网络传输效率
在JavaScript一切皆为对象,任何js支持的类型都可以Json来表示
格式:
- 对象都用{}
- 数组都用[]
- 所有的键值对 都使用key:value
var user={
name:"lyl",
age:21,
sex:"男"
}
//将对象转化为json字符串
let jsonuser=JSON.stringify(user)
//字符串转化为对象,参数必须是JSON字符串
let obj=JSON.parse('{"name":"lyl","age":21,"sex":"男"}')
//JSON.parse('{"name":"lyl","age":21,"sex":"男"}')
//{name: "lyl", age: 21, sex: "男"}
注意:json和js对象的区别
let obj={a:'hello',b:'你好'}
let json='{"a":"hello","b":"你好"}'
12.面向对象编程
类似于java中的继承,javaScript中有原型继承
let Student={
name:"lyl",
age:21,
run:function (){
console.log(this.name+"run...")
}
}
let mike={
name:"望穿先生",
age:22,
}
//mike的原型指向Student,使得mike也可以执行run方法
mike.__proto__ =Student;
class
class关键字,是在ES6引入的
定义一个类,属性,方法
//定义一个学生类
class Student{
//构造器
constructor(name) {
this.name=name;
}
hello(){
alert("你好啊");
}
}
let mike=new Student();
mike.hello();
继承
//继承
class xiao extends Student{
constructor(name,grade) {
super(name);
this.grade=grade;
}
MyGrade(){
alert("我的成绩是100");
}
}
let linda=new xiao("linda",20);
原型链
13.操作BOM对象(重点)
JavaScript和浏览器的关系:
JavaScript诞生就是为了能够让他在浏览器中运行
BOM:浏览器对象模型
- IE 6-11
- Chrome
- Safari
- FireFox
window对象
window代表浏览器窗口
window.innerHeight //窗口内部高度
window.innerWidth //窗口内部宽度
Navigator对象
Navigator,封装了浏览器的信息
大多数时候,我们不会使用navigator对象,因为会被人修改,所以不建议使用这些属性来判断和编写代码
navigator.appName //浏览器名字
navigator.appVersion //版本
Screen对象
代表屏幕
screen.width
screen.height
location对象(重要)
location代表当前页面的URL信息
//设置新的地址
location.assign('https://cnsblog.wangchaunxiansheng.com')
Document对象
document代表当前的页面,HTML,DOM(文档树)
获取cookie
doucument.cookie
服务器端可以设置cookie:httpOnly
history对象
history代表浏览器的历史记录
history.back() //返回
history.forward() //前进
14.操作DOM对象
DOM文档对象模型
核心:
浏览器网页就是一个DOM树形结构!
- 更新:更新DOM节点
- 遍历DOM结点:得到DOM节点
- 删除:删除一个DOM节点
- 添加:添加一个新的节点
获得DOM节点:
(这是原生代码,之后我们尽量都是用jQuery)
<div id="farther">
<h1 class="lll">我是h1</h1>
<p id="p1">我是p1</p>
<p class="p2">我是p2</p>
<p></p>
</div>
<script>
let div=document.getElementById("farther");
let p2=document.getElementsByClassName("p2")
let chidren=div.children; //获取父节点下的所有子节点
let first=div.firstChild; //第一个子节点
let last=div.lastChild; //最后一个子节点
</script>
更新DOM节点:
<div id="lyl">
</div>
<script>
let lyl=document.getElementById("lyl")
lyl.innerText="你好啊";
</script>
操作文本:
- lyl.innerText="你好" 修改文本的值
- lyl.innerHTML='你好 ' 可以解析HTML文本标签
操作js
- lyl.style.color="red" 将文本颜色修改为红色
删除DOM节点:
删除节点的步骤:先获取父节点,在通过父节点删除自己
<div>
<p id="p1">p1</p>
</div>
<script>
let self =document.getElementById("p1"); //找到自身节点
let farther=self.parentElement; //通过自身节点找到父节点
farther.removeChild(self); //通过父节点删除自己
</script>
插入DOM节点:
我们获得了某个DOM节点,假设这个DOM节点是空的,我们通过innerTHML就可以增加一个元素了,但是这个DOM结点已经存在元素了,我们再增加元素就会产生覆盖。
追加元素
<p id="js">外部p标签</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
let js=document.getElementById("js");
let list=document.getElementById("list")
//将id为js的外部p标签追加到div中
list.appendChild(js)
</script>
创建元素
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
let list=document.getElementById("list")
//创建一个新的节点,p标签为例
let newp =document.createElement("p");
//为新创建的标签添加id
newp.id="newp";
//为新建的标签添加元素值
newp.innerText="我是新创建的p标签"
//将新创建的标签追加到div中
list.appendChild(newp)
</script>
通过setAttribute()为新创建的节点设置属性
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
let list=document.getElementById("list")
//通过setAttribute为新创建的节点设置属性
let newscript=document.createElement("script");
newscript.setAttribute("type","text/javascript");
list.appendChild(newscript)
</script>
15.操作表单(验证)
得到表单输入框的内容
<form action="post">
<span>用户名:</span><input type="text" id="user">
</form>
<script>
let input_test=document.getElementById("user");
//得到input输入框的值
let va=input_test.value;
//修改输入框的值
input_test.value="你好"
</script>
得到表单,单选框的值
<form action="" method="post">
<span>用户名:</span><input type="text" id="user">
<p><span>性别:</span>
<input type="radio" name="sex" id="boy" value="man">男
<input type="radio" name="sex" id="girl" value="women">女
</p>
</form>
<script>
let input_test=document.getElementById("user");
let boy_radio=document.getElementById('boy');
let girl_radio=document.getElementById('girl');
//对于单选框,多选框等等固定的值 通过.value只能获取当前的值
boy_radio.checked; //查看返回的结果,如果为true,则表示被选中
girl_radio.checked=true; //将其赋值为true,则被选中
</script>
MD5加密的提交表单(注意onsubmit的return)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>md5加密</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--通过onsubmit去绑定一个检测提交的函数,将这个结果返回给表单,使用onsubmit接收-->
<form action="https://www.baidu.com" method="post" onsubmit="return a()">
<p>
<span>用户名:</span><input type="text" id="user" name="username">
</p>
<p>
<span>密码:</span><input type="password" id="input_pwd" >
</p>
<input type="hidden" id="md5" name="password">
<p>
<button type="submit">提交</button>
</p>
</form>
<script>
function a(){
alert("提交成功");
let username=document.getElementById("user");
let input_pwd=document.getElementById("input_pwd");
let md5_pwd=document.getElementById("md5");
md5_pwd.value=md5(input_pwd.value);
//可以校验判断表单提交的内容,true就是通过提交,false就是阻止提交
return true;
}
</script>
</body>
</html>
效果:
此时的password已经被MD5加密
16. jQuery
jQuery库,里面存在大量的javascript函数
获取jQuery
CDN引入或者下载引入
//jQuery公式 选择器+shijian
$(selector).action()
简单实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<!--CDN引入-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<button id="button" type="button">点击我</button>
<script>
//jquery就是css选择器
$("#button").click(function (){
alert("hello,jquery");
})
</script>
</body>
</html>
选择器:
css的选择器全部都可以用
参考文档:http://jquery.cuishifeng.cn/
事件:
鼠标事件,键盘事件,其他事件
简单实例(移动鼠标显示位置):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery事件</title>
<style type="text/css" rel="stylesheet">
#divMove{
width: 600px;
height: 600px;
border: 1px solid black;
}
</style>
<!--CDN引入-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!--要求:获取鼠标当前的一个坐标-->
mouse : <span id="mouseMove"></span>
<div id="divMove">
在此处移动鼠标
</div>
<script>
//当网页元素加载完毕之后,响应事件
$(document).ready(
function (){
$("#divMove").mousemove(function (e){
$("#mouseMove").text("x:"+e.pageX+" y:"+e.pageY);
})
}
)
</script>
</body>
</html>
操作DOM
<ul id="test">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
$("#test li[name=python]").test(); //无参数,则取值
$("#test li[name=python]").test("123456"); //设置值
//元素的显示和隐藏 ,本质是display :none;
$("#test li[name=python]").show(); //显示
$("#test li[name=python]").hide(); //隐藏
</script>
本文来自博客园,作者:望穿先生,转载请注明原文链接:https://www.cnblogs.com/wangchuanxiansheng/p/15999717.html