JavaScript

走高冷路线

已于 2023-03-19 19:11:34 修改

阅读量225

点赞数

文章标签： javascript 前端

于 2023-03-15 19:50:31 首次发布

本文链接：https://blog.csdn.net/weixin_74836280/article/details/129529926

版权

一.简介

1.1定义

解释型或者即使编译型语言,基于原型编程,多范式,动态的脚本语言,支持面向对象
js可以用于服务器端编程:node.js

1.2js和Java的关系

最开始有网景公司在网景浏览器上设计实现的,由于网景当时和sun公司有合作,网景公司希望这个语言外观看起来像java,所以取名javascript

1.3版本

ES: ECMAScript
ES6:2015

二.语言能帮助我们做什么?

a.嵌入一些动态的文本在HTML页面
b.针对一些浏览器的事件作出响应
c.读写HTML页面
d.请求提交给服务器之前的验证
e.检测
f.服务器端编程

三.学习

3.1 ECMAScript: 语言的语法和基本的对象
3.2 浏览器对象模型BOM:与浏览器进行交互的方法
3.3 文档对象模型DOM:处理网页的内容和方法

四.ECMAScript

4.1引入方式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 1.直接嵌套在网页中.此标签代码可以嵌套在页面任何地方 -->
<script>
alert("我也爱你");
</script>
<!-- 2.可以使用类似引用css的方式 -->
<script src="./1.js"></script>
</head>
<body>
<!-- 3.写到部分代码中:代码比较复杂就不适合 -->
<input type="button" value="点我" onclick="javascript:;alert('爱我么!~')">
</body>
</html>

4.2初次认识

//类型可以统一使用var来定义
//var他是全局
var width=200;//建议写法
width="哈哈";
//打印:可以使用警告或者日志
//js的类型是根据值来确定
var height;//定义了没有赋值 类型为undefined
console.log(height);//相当于 var height
//可以使用类型去检查 typeof
width=false;
console.log(typeof(width));
//关于var:全局
//ES6新增的类型: let:局部的
{
var i=1;
let j=1;
}
console.log("i="+i);
console.log("j="+j);

4.3数据类型

4.3.1 undefined

var width;//变量没有初始值,被赋值为 undefined
alert(height);//没有定义

4.3.2 boolean

var flag=true;
flag=false;
//ps:true和false可以转换为数字

4.3.3 number

//整数
var num1=23;//整数
console.log(typeof num1)
num1=12.2;//浮点数
console.log(typeof num1)
//非数字类型: "哈哈"
//可以通过一个内置的方法区检查是否非数字
//isNaN: is not a number
// 判断一个值是否能用Number() 转为数字
console.log("数字1:"+isNaN(1));
console.log("1.2:"+isNaN(1.2));
console.log("哈哈:"+isNaN('哈哈'));
//注意: 内部他会将字符串按照类似于Java包装类先进行转义
// Number.parseInt("11");
console.log("字符串11:"+isNaN('11'));
console.log("11的类型:"+typeof('11'));
// Number(true)=1 Number(false)=0
console.log("true:"+isNaN(true));//boolean可以转为数字
console.log("2.5e+7:"+isNaN("2.5e+7"));
console.log("0xabc:"+isNaN("0xabc"));//16进制
console.log(Number(0xabc));
//转为数字:2中方式
Number.parseFloat("1.1");
Number.parseInt("22");
Number("33");
// int byte short long float double

4.3.4 string

//字符串可以使用单引号,也可以双引号--Node
var str="我爱你你却爱着他";
//判定类型: typeof(对象) typeof 对象
console.log(typeof str);
console.log("获得指定下标的字符:"+str.charAt(1));
var str2='武汉-成都-重庆-南京-上海';
var citys=str2.split("-");
console.log("分割字符:"+citys.length);
console.log("concat:"+str.concat(str2));
//...其他方法可以自己去测试

4.3.5数组Array

var obj=new Array();
//a.可以设置长度,也可以不设置
//b. 定义的数组每一个值都是根据内容来确定类型
var obj=new Array(1,true,'哈哈',"1");
obj[1]="kunkun";
console.log("排序前:"+obj);
console.log("数组的长度:"+obj.length);
//数组排序
obj.sort();
console.log("排序后:"+obj);
//join():把数组的元素放入一个字符串,内容以逗号隔开
console.log("join:"+obj.join());
//4个方法
// 给数组追加一个元素: push() 返回新的长度
obj[4]='嘿嘿';
console.log("数组的长度:"+obj.length);
console.log("直接添加:"+obj);
obj.push('push');
console.log("push添加:"+obj);
// 给数组首项添加一个元素: unshift() 返回新的长度
obj=obj.reverse();
console.log("reverse:"+obj);
obj.unshift("我是第一项");
console.log("unshift:"+obj);
// 删除数组尾项
console.log("pop返回:"+obj.pop());//返回的是删除项
console.log("pop:"+obj);
// 删除数组首项
obj.shift();
console.log("shift:"+obj);

4.3.6 时间Data[了解]

//构建对象
//1.不写参数,表示当前时间
//2.写了时间毫秒数以后,表示距离1970/1/1 00:00:00 的时间毫秒数
//3.也可以直接写具体的时间
var obj=new Date('2021-12-12 12:12:12');
console.log(obj);
//获得年
obj.setFullYear(2019);
console.log('年:'+obj.getFullYear());
//获得月
console.log('月:'+obj.getMonth());//
//获得日
console.log('日:'+obj.getDate());//
//获得时
console.log('时:'+obj.getHours());//
//获得分
console.log('分:'+obj.getMinutes());//
//获得秒
console.log('秒:'+obj.getSeconds());//
//获得时间毫秒数
console.log("毫秒数:"+obj.getTime());
//
//console("时间:"+ )

4.3.7 正则表达式

//正则表达式是JS的内置独享 RegExp
// (正则表达式,匹配模式)
//匹配模式:
// i:不区分大小写
// g:全局匹配
// m:多行匹配
//^:以什么开始
//$:结束符
var reg1=new RegExp(/\d/,'g');
var reg2=/^[a-zA-Z0-9]{6,12}$/;
var reg3=/^[\u4E00-\u9FA5]{2,5}$/;//中文
let message=prompt("请输入您的用户名:");
//判定: test()
console.log(typeof message);
console.log(message.length);
console.log("判定:"+reg2.test(message));

4.3.8 函数(方法)

a.内置的函数(系统函数)
alert()
confirm()
b.自定义函数

width=1;
//函数也是一个对象!~
//自定义一个函数
function findMyName(){
alert('大风起兮云飞扬!');
}
//不需要声明返回类型!
//如果没有定义返回值,返回'undefined'
//如果定义了return,以实际返回的值为准
function f2(){
return '休对故人思故国,且将新火煮新茶,诗酒趁年华!';
}
//调用方法是1:
findMyName();
//调用方式2:
alert(f2());//'undefined':因为函数没有返回值
//调用方式3:
let message=findMyName();
//内置函数: eval():计算解析一些字符串内的js代码
let str="alert('哈哈')";
eval(str);

4.3.9数学内置函数

函数	简介	案例
Main.cell()	向上取整	Math.cell(-25.3) -25
Math.floor()	向下取整	Math.fallor(-25.3) -26
Math.round()	四舍五入	Math.round(-25.5) .25
Math.random()	随机数0.1	100以内随机数:Math.round(Math.random()*100)

五.创建对象

5.1使用构造器的方式

function GF(name,age,money){
//直接赋值----无参数构造器
this.introduce='沉鱼落雁,闭月羞花';
//定义的属性:动态的写法 有参数
this.name=name;
this.age=age;
this.money=money;
//定义一个方法的属性
this.say=function(){
console.log('我是'+this.name);
return 1;
}
}
width=1;
var mygf=new GF('迪丽热巴',20,'10000亿');
console.log('访问属性:'+mygf.name);
console.log('访问属性:'+mygf.introduce);
console.log('访问属性:'+mygf.say());

5.2使用new Object

var girlfriend=new Object();
girlfriend.name='高圆圆';
girlfriend.age=30;
girlfriend.say=function(){
console.log('我是'+this.name);
}
//访问
//函数没有定义返回值,默认返回 undefined
console.log("函数:"+girlfriend.say());

5.3JOSN格式

//json语法: K:v
// var 对象={
// 属性1:值1,
// 属性2:值2,
// ....
// 方法1:function(){}
// 值可以是常见类型,也可以是json格式
// }
// {'name':'苏焱',
// 'age':22,
// 'address':{'street':'光谷大道'}
// }
var gf={
name:'汤唯',
age:20,
address:{'city':{'street':'光谷'}},
say:function(){
console.log(this.name)
}
}
console.log('访问属性:'+gf.name);
console.log('访问属性:'+gf.address.city.street);

六.BOM对象

6.1窗口加载事件load

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//窗口加载事件:当文档的内容加载完毕以后会触发该事件
//有了这个事件以后,可以将js写在任何地方
//用户的体验比较好
//定义一个函数的时候,获得页面的节点对象也能减少异常
window.onload=function(){
alert(1);
};
</script>
</head>
<body>
<img src="./高圆圆1.jpg" width="300px" height="300px" alt="">
</body>
</html>

6.2定时器

//该方法用于定义一个定时器,当延迟的毫秒数达到以后,执行函数内容
let 定时器的标志name1=window.setTimeout(调用函数,延迟的毫秒数);
//清空延迟定时器
window.clearTimeout(name1);
//每间隔一秒执行一次
let 定时器的标志name2=window.setInterval(调用函数,间隔毫秒数)
//清空间隔定时器
window.clearInterval(name2);

6.3 location对象

location对象的属性	返回值
location.href	获得或者设置URL
location.host	获得主机
location.port	获得端口号
location.pathname	返回路径
location.searth	返回参数
location.reload

function f1(){
//window可以省略
//window.location.href="https://www.baidu.com";
//location.reload();
let code=5;
let st=window.setInterval(function(){
code--;
console.log(code+"秒后跳转百度页面");
if(code==0){
window.location.href="https://www.baidu.com";
clearInterval(st);
}
},1000);
}

6.4 history对象

history.back();//网页回退
history.forward();//网页前进
history.go(index);//网页前进或者后退,index为正数表示前进多少页,为负数表示后退多少页
<input type="button" value="上一页" onclick="javascript:;history.back()">
<input type="button" value="下一页" onclick="javascript:;history.forward()">
<input type="button" value="go上一页" onclick="javascript:;history.go(-1)">
<input type="button" value="go下一页" onclick="javascript:;history.go(1)">

6.5 一些函数

window.alert();//警告
window.confirm();//确认框
window.prompt();//输入框
window.open('弹出的URL','窗口名称','窗口的特征');//弹出一个窗口
//特征的属性
height,width,窗口的坐标left,top
scrollbars=true/false

6.6 cookie对象

—http是无状态的
浏览器访问服务器以后,浏览器会存储一些数据到浏览器本地或者硬盘上面,下次再次去访问的时候,
可以根据缓存的参数,直接和上一次产生关联
a.存储一定的数据到浏览器本地
b.cookie大小是有限制的
c.cookie可以禁用
let cs=document.cookie;
//记住密码

七.DOM

文档对象模型:把浏览器页面里面的元素当做一个对象来操作,标签名,属性,方法
DOM的本质他是js和网页的组合
a.js和html
b.js和CSS
整个页面会形成一个对象document

7.1 如何获取页面的元素对象—选择器

7.1.1 id选择器

document.getElementById("id值");
//通过这个方式获取的元素对象.要么是1个要么是(0个)null
//id假设有重名.默认获取第一个

7.1.2 class选择器

document.getElementsByClassName("class名");
//1.此方法返回的是一个HTMLCollection对象(类似数组)
// 具备数组的一些属性: 可以通过下标访问里面的元素,可以访问数组的长度

7.1.3 标签选择器

document.getElementsByTagName("p");
//1.此方法返回的是一个HTMLCollection对象(类似数组)
// 具备数组的一些属性: 可以通过下标访问里面的元素,可以访问数组的长度

7.1.4 name属性获取

document.getElementsByName("gender");
//此方法返回的是一个NodeList对象
//具备数组的访问方式和数组的长度属性
//element:常见的一些标签对象
//node:element+注释标签

7.1.5 其他选择器

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function f1(){
//1.先获得d1
let d1=document.getElementById("d1");
//2.再获得c2从d1里面去找
let obj2=d1.getElementsByClassName("c2");//HTMLCollection
console.log("c2对象:"+obj2);
//如果从c3或者标签名来获取梅西
let obj3=document.getElementsByClassName("c3")[0];
let obj4=obj3.getElementsByClassName("c2");
console.log("c2对象:"+obj4[0].innerText);
}
</script>
</head>
<body>
<div id="d1" class="c3">
<div class="c1">
C罗
</div>
<div class="c2">
梅西
</div>
</div>
<div class="c1">
内马尔
</div>
<div class="c2">
武磊
</div>
<input type="button" value="测试" onclick="f1()">
</body>
</html>

1.querySelector()选择器

querySelector("#id");
querySelector(".class")
//1.返回的是单个元素,类似于id选择器

2.querySelectorAll()选择器

querySelectorAll("标签名");
querySelectorAll(".class")
//1.返回的是多个元素,返回NodeList
// 父子复杂类型 选择器
querySelectorAll("#div1 > .div2")

7.2DOM结构

标签名	第一级对象	2	3	4	5
input	HTMLInputElement	HTMLElement	Element	Node	Event Target
p	HTMLParagrapElement	HTMLElement	Element	Node	Event Target
div	HTMLDivElement	HTMLElement	Element	Node	Event Target

7.2.1Element和Node区别

a.所有的标签都是一个Element,同时也是一个Node
b.但是并不是所有的Node都是Element,比如注释,文字,回车…

7.2.2Element的常见属性

1.children属性: 获得当前元素下面的子级元素,他也是一个HTMLCollection集合

//第一种写法:
document.getElementById("d1").getElementByClassName("c2")[0];
//第二种写法:
document.querySelectorAll("#d1>.c2");//node
//使用children
document.getElementById("d1").children[1];

2.parentElement属性:用于获取当前元素的父级元素
3.nextElementSibling属性:用于获取当前元素的下一个兄弟节点
4.previousElementSibling属性:用于获取当前元素的前一个兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function f1(){
//1.children
let obj1=document.getElementById("d1").children[3];
console.log(obj1.innerText);
//2.parentElement
let obj2=document.getElementById("d2").parentElement.parentElement;
console.log(obj2.id);
//3.nextElementSibling
let
obj3=document.getElementById("d2").nextElementSibling.nextElementSibling;
console.log(obj3.innerText);
//得到input点击按钮
let obj4=document.getElementById("d2").parentElement.nextElementSibling;
console.log(obj4.value);
//
let
obj5=document.getElementById("d2").previousElementSibling.previousElementSibling;
console.log(obj5.value);
}
</script>
</head>
<body id="d3">
<div id="d1">
<input type="button" value="詹姆斯">
<br>
<p id="d2">贾莫兰特</p>
<div>周琦</div>
<div>郭艾伦</div>
</div>
<input type="button" value="element属性测试" onclick="f1()">
</body>
</html>

5.innerText和innerHTML:

innerText:获得或者修改标签元素内部的文本内容
innerHTML:获得或者修改元素内部的标签内容,包含文本和超文本(元素)
value:针对局语句个别input标签,并不是每个element都有此属性

6.className和classList属性和style

1.通过style的属性修改对应的样式
2.获得对象的className来修改和增加样式,操作样式本质是操作字符串的拼接,有的时候不是特别的方便
3.classList属性,返回的是一个样式的集合
3.1 add()
3.2 remove()
3.3 toggle()如果你有这个样式,我们就删除,没有我就添加
3.4 contains() 判断当前集合中是否包含此样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.c1{
color:red;
}
.c2{
color:green;
}
.c3{
font-size: 20pt;
}
</style>
<script>
//用户名
function checkUsername(){
let username=document.getElementById("username").value;
//获得错误调试的span对象
let span=document.getElementById("err-username");
//用户名的正则表达式
let reg=/^[a-zA-Z0-9]{6,12}$/;
if(reg.test(username)){
//合法
span.innerText="输入合法";
//span.style.color="green";//方式1
span.className="c2";
span.className=span.className+" c3";
//如果想去掉,可以使用字符串的替换方法
//span.className=span.className.replace("c3","");
}else{
span.innerText="格式错误";
//span.style.color="red";
span.className="c1";
}
}
</script>
</head>
<body>
<h1>用户注册</h1>
<img src="" alt="">
用户名: <input type="text" id="username"><span id="err-username"></span>
<br>
密码: <input type="password" id="pwd"><br>
<input type="button" value="验证用户名" onclick="checkUsername()">
<input type="button" value="验证密码" onclick="checkPwd()">
</body>
</html>

ps:所有的标签的属性都可以当做此对象的属性!

username.id;
username.type;
span.onclick;
a.href;
a.target;

7.2.3element的常见方法

1.xxAttribute

1.获得属性值:getAttribute(“属性名”);
2.设置属性: setAttribute(“属性名”,“属性值”)
3.删除属性:removeAttribute(“属性名”);
4.判断是否有此属性:hasAttribute(“属性名”)

<script>
function f1(){
//获得username对象
let username=document.getElementById("username");
console.log(username.value);
username.setAttribute("value","南湖苏大帅");
//获得pwd
let pwd=document.getElementById("pwd");
pwd.setAttribute("type","button");
pwd.setAttribute("value","123456");
//获得属性值
console.log(username.getAttribute("value"));
//获得cb1
let cb1=document.getElementById("cb1");
console.log(cb1.value);
//因为input的默认类型就是text
cb1.removeAttribute("type");
//获得cb2
let cb2=document.getElementById("cb2");
console.log(cb2.hasAttribute("id"));
}
</script>

2.节点的创建,添加,删除,克隆
2.1节点的创建

//document.createElement(“元素的标签”)
document.createElement(“div”);
document.createElement(“p”);

2.2添加元素

a.在元素的"内部"结尾位置插入内容: append()
b.在元素的"内部"开始位置插入内容: prepend()
c.在元素的"后面"添加内容: after()
d.在元素的"前面"添加内容: before()
e.cloneNode(flag)克隆一个相同的元素出来
flag==true: 子元素也会克隆
flag=false: 默认选项,只克隆当前元素
f.删除当前元素: 当前元素.remove()
删除当前元素的子元素: 当前元素.removeChild(子元素对象)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0px 0px;
margin: 0px 0px;
}
#d1{
width: 300px;
height: 200px;
background-color: pink;
}
#d2{
width: 300px;
background-color:wheat;
}
#d3{
width: 200px;
height: 100px;
background-color:yellowgreen;
}
#d5{
width: 300px;
height: 150px;
background-color:darkgoldenrod;
}
p{
background-color: blueviolet;
height: 100px;
width: 200px;
}
</style>
<script>
function f1(){
//获得d1对象
let obj=document.getElementById("d2");
//创建一个div
let div=document.createElement("div");
div.innerText="append添加测试";
div.style.width="200px";
div.style.backgroundColor="green";
//添加
obj.append(div);
}
function f2(){
//获得d1对象
let obj=document.getElementById("d2");
//创建一个div
let div=document.createElement("div");
div.innerText="append添加测试";
div.style.width="200px";
div.style.backgroundColor="green";
//添加
obj.prepend(div);
//obj.innerHTML="标签+内容";//替换
}
function f3(){
//获得d1对象
let obj=document.getElementById("d2");
//创建一个div
let div=document.createElement("div");
div.innerText="append添加测试";
div.style.width="200px";
div.style.backgroundColor="green";
//添加
//obj.after(div);
obj.before(div);
}
function f4(){
//1.得到d5区域
let d5=document.getElementById("d5");
//2.获得d1区域
let d21=document.getElementById("d1");
//3.克隆一个d5
let objD5=d5.cloneNode(true);
//3.在d1后面追加d5
d1.after(objD5);
}
function f5(){
//1.获得d1
let d1=document.getElementById("d1");
//2.删除当前元素
//d1.remove();
//3,删除子元素
let d2=document.getElementById("d2");
d2.removeChild(d2.children[1]);
}
</script>
</head>
<body>
<div id="d1">
d1
</div>
<div id="d2">
<div id="d3">
刘备
</div>
<p>貂蝉</p>
</div>
<div>
<input type="button" value="append()" onclick="f1()">
<input type="button" value="prepend()" onclick="f2()">
<input type="button" value="after()" onclick="f3()">
</div>
<div id="d5">
d5
<p>西施</p>
</div>
<input type="button" value="复制到D2区域" onclick="f4()">
<input type="button" value="删除元素" onclick="f5()">
</body>
</html>