js基础
js初识
// js也是一门编程语言 它也是可以写后端代码
// 和java没有任何关系，就是为蹭热度
// node.js 支持js代码跑在后端服务器上
用法
// js引入方式:
// 1.script标签内部直接书写js代码
// 2.script标签src属性引入外部js代码
// js语法结构：
// js是以;结束的
// 变量:在js中，首次定义一个变量名的时候需要用关键字声明
// 1.关键字var
var name='bjk'
// 2.关键字let
let pass='123'
// var在全局生效，在for循环里面定义也会影响全局
// let在局部定义只会在局部生效
// 常量：
const pi =3.14
js数据类型
// 变量的命名规范:
// 1.变量名只能是：
// 数字、字母、下划线、$
// 2.js中推荐使用驼峰式命名
// userName
// 3.不能用关键字命名
// name可以指向任意的数据类型
// name='jason'
// name=123
// name=[1,2,3,4]
数值类型：number
var a=11;
var b=11.11;
// 查看当前变量名类型
typeof a; // 返回的都是number
console.log(a) //返回当前变量值
// 类型转化
// parseInt() //转成整型
// parseFloat() //转成小数
// parseInt('123456')
// 123456
// parseFloat('11.11')
// 11.11
// parseInt('11.11')
// 11
// parseInt('123abc')
// 123
// parseInt('abcdefg')
// NaN //代表不是数字类型
字符类型：string
var s='bjk';
var d="bss";
定义多行文本，使用模板字符串``(重点)
var a1=`
abcde
fghig
klmno`;
typeof a1;
// 模板字符串除了可以定义多行文本之外还可以实现格式化字符串操作
var name='bjk'
var age=18
var sss=`my name is ${name} and my age is ${age}`;
// ${}会找到前面变量名对应的值
字符串的拼接：
// 在python中不推荐使用+号拼接
// 但在js中推荐使用+号拼接
// name+age
字符类型常用方法
// .length，返回字符个数
var name0='abcde'
name0.length
5
// .trim()，去除空格,括号里面不可以指定
var name=' bbb ';
name.trim()
'bbb'
//.charAt()，去字符的任意值
var name1='$$abcd'
name1.charAt(0)
'$'
name1.charAt(3)
'b'
//.indexOf()，输出字符所在字符串的位置
name1.indexOf('ab')
2
//.slice(0,5)，切片顾头不顾尾
name1.slice(0,5)
'$$abc'
//大小写转换
var name2='SHEIshidashabi123 '
name2.toLocaleLowerCase()
'sheishidashabi123 '
name2.toUpperCase()
'SHEISHIDASHABI123 '
//.split切分，后面的数字代表获取切割元素的个数
var name3='tank|hecha|liaomei'
name3.split('|')
['tank', 'hecha', 'liaomei']
name3.split('|',2)
['tank', 'hecha']
name3.split('|',5)
['tank', 'hecha', 'liaomei']
布尔值
// python中是首字母大写
// True
// False
// 但是在js中布尔值全是小写的
// true
// false
var a=true
a
true
typeof a
'boolean'
// 布尔值是false的有哪些
// 空字符串、0、null、undefined、NaN
// null
// 表示值为空 一般都是指定或者清空一个变量使用
// name='jason'
// name=null
// undefined
// 表示声明了一个变量 但是没有做初始化操作，就是没有赋值
// 函数没有返回值的时候，返回的也是undefined
数组类型
// 数组(类似python里面的列表),[]
var l=[11,22,33,44,55]
typeof l
'object'
var ll=[11,'dsb',11.11,true]
ll[1] //不支持负数
'dsb'
数组常用方法
// .length，数组的元素个数
var d =[111,222,333,444,555,666]
d.length
6
// .push，往数组添加
d.push(777)
7
d
[111, 222, 333, 444, 555, 666, 777]
// .pop()，从后面删除
d.pop()
777
d
[111, 222, 333, 444, 555, 666]
//.shift()，从前面删除
d.shift()
111
d
[222, 333, 444, 555, 666]
//.join('$'),将数组按照指定的符号连接起来
l.join('$')
'123$11$22$33$44$55'
l
[123, 11, 22, 33, 44, 55]
//.slice(),那索引截取
l.splice(0,3)
[123, 11, 22]
//.reverse()，使数组反转
l.reverse()
[55, 44, 33]
// l.concat(111,222,333) ，连接数组
[55, 44, 33, 111, 222, 333]
//.sort()，排序
l.sort()
[33, 44, 55]
//.forEach()方法：
var dd=[111,222,333,444,555,666]
//一个参数就是：数组里面每一个元素对象
dd.forEach(function(value){console.log(value)},dd)
111
222
333
444
555
666
//两个参数就是：元素+元素索引
dd.forEach(function(value,index){console.log(value,index)},dd)
// 111 0
// 222 1
// 333 2
// 444 3
// 555 4
// 666 5
//三个参数就是：元素+元素索引+元素的数据来源
dd.forEach(function(value,index,arr){console.log(value,index,arr)},dd)
// 111 0 [111, 222, 333, 444, 555, 666]
// 222 1 [111, 222, 333, 444, 555, 666]
// 333 2 [111, 222, 333, 444, 555, 666]
// 444 3 [111, 222, 333, 444, 555, 666]
// 555 4 [111, 222, 333, 444, 555, 666]
// 666 5 [111, 222, 333, 444, 555, 666]
//.splice()方法:
//两个参数时，按照索引删除
dd.splice(0,3)
[111, 222, 333]
dd
[444, 555, 666]
//三个参数时，先删除，然后第三个位置添加进数组
dd.splice(0,1,777)
[444]
dd
[777, 555, 666]
//.map()方法：跟function()作用一样
d1.map(function(value){console.log(value)},d1)
11
22
33
44
55
66
// 自定义对象(类似python里面的字典),{}
运算符
算数运算符
var x=10;
var res1 =x++; //加号在后面，先做赋值后自增1，此时x=11
var res2 =++x; //加号在前面，先自增再赋值
res1
10
res2
12
比较运算符
1=='1' //弱等于
true //因为内部自动转换成相同的数据类型了
1==='1' //强等于
false //内部不做类型转换
1!='1' //弱不等于
false
1!=='1' //强不等于
true
逻辑运算符
// 与。或。非
// && 、||、 ！
5 && '5'
'5'
0||1
1
赋值运算符
= 、 += 、 -= 、*=
流程控制
// js的代码没有缩进
if判断
var age =10;
// if(条件){
// 条件成立后的代码块
// }
// if
if (age>18){
console.log('来啊')
}
// if-else
if(age>18){
console.log('来啊')
}else{
console.log('米钱')
}
// if-else if else
if(age>18){
console.log('来啊')
}else if(age<24){
console.log('小姐姐你好')
}else{
console.log('没钱')
}
switch语法
// 提前规定好条件触发的代码
var num =2;
switch (num) {
case 0:
console.log('0');
break;
case 1:
console.log('1');
break;
case 2:
console.log('2');
break;
case 3:
console.log('3');
break;
}
for循环
// for(起始条件;循环条件;每次循环的操作){
// console.log(i)
// }
// 打印0-9数字
for(let i=0;i<10;i++){
console.log(i)
}
while循环
var i=0
while(i<100){
console.log(i)
i++;
}
函数
// python中函数关键字为def
// js中函数关键字为function
// 格式
// function 函数名(形参1,形参2) {
// 函数体代码
// }
无参函数
function f() {
console.log('123456')
}
f() //调用
有参函数
function f1(a,b) {
console.log(a,b)
}
f1(1)
f1(1,2) //传多传少都没有关系
f1(1,2,3,4,5)
关键字arguments
function f2(a,b) {
console.log(arguments) //能够获取函数接收到的所有参数
console.log(a,b)
}
function f3(a,b) {
if(arguments.length<2){
console.log('传少了')
}else if(arguments.length>2){
console.log('传多了')
}else{
console.log('正常执行')
}
}
f3(1,2)
返回值return
function f4() {
return 666
}
function f5() {
return 666,777,888 //多个只会返回最后一个
}
res=f4();
res1=f5()
console.log(res)
console.log(res1)
箭头函数
var func1=v=>v; //箭头左边的是形参，右边的是返回值
// 等价于
var func1 =function (v) {
return v
}
var func2=(arg1,arg2)=>arg1+arg2;
// 等价于
var func2 =function (arg1,arg2) {
return arg1+arg2
}
自定义对象
// 就是python里面的字典，但是js中的自定义对象，但是js操作更加方便
第一种创建自定义对象方式
var d1={'name':'bjk','age':18}
// 取值
console.log(d1['name'])
console.log(d1.name)
console.log(d1.age) //可以直接.key值
// 也可以for循环取值
for(let i in d1){
console.log(i,d1[i])
}
第二种创建自定义对象的方式，new
var d2=new Object() //创建的是空字典
d2.name='bss'
d2.age=18
d2['sex']='man'
console.log(d2)
日期对象
// Date日期
let d1=new Date()
console.log(d1)
// .toLocaleString()日期转换
res=d1.toLocaleString()
console.log(res)
// 时间对象具体方法
let d2=new Date()
d2.getDate() //获取日
d2.getDay() //获取星期
d2.getMonth() //获取月份（0-11）
d2.getFullYear() //获取完整年份
d2.getHours() //获取小时
d2.getMinutes() //获取分钟
序列化反序列化
// 在python中序列化反序列化
// dumps 序列化
// loads 反序列化
// 在js中同样有序列化和反序列化
// JSON.stringify() //序列化
// JSON.parse() //反序列化
let d={'name':'bjk','age':18}
res1=JSON.stringify(d)
console.log(res1)
res2=JSON.parse(res1)
console.log(res2)
正则
// 在python中需要使用正则 需要借助于re模块
// 在js中需要你创建正则对象
let reg=/^[a-zA-Z][a-zA-z0-9]{5,11}/
// 匹配数据
res=reg.test('agondsb')
console.log(res)
BOM和DOM
// BOM:
// 浏览器对象模型
// js代码操作浏览器
// DOM:11 BOM和DOM
// 文档对象模型
// js代码操作标签
Windows子对象
// 只要是Windows系统的，以下代码的window都可以省略
// window对象指代的就是浏览器窗口
// window.open()打开一个网页，并且可以设置打开的窗口大小
window.open('https://www.baidu.com','','height=400px,width=400px')
// window.close()关闭当前窗口
window.close()
// window.navigator
window.navigator.userAgent // 表示当前是否是一个浏览器
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36'
// window.history
window.history.back //回退上一页
window.history.forward() //前进下一页
// window.location
// Location {ancestorOrigins: DOMStringList, href: 'https://www.czzyvideo.com/gonggao', origin: 'https://www.czzyvideo.com', protocol: 'https:', host: 'www.czzyvideo.com',}
window.location.href // 获取网页的网址
'https://www.czzyvideo.com/gonggao'
window.location.href='https://www.baidu.com' // 使网页跳转
window.location.reload() // 使网页刷新
弹出框
// 警告框
alert('你不要过来')
// 确认框
confirm('你真的要怎么做吗')
false //可以看到选择的结果
// 提示框
prompt('手牌拿好，男宾三位')
'啊啊' // 可以接收输入的信息
prompt('手牌拿好，男宾三位','123') //后面的为默认值
'456'
prompt('手牌拿好，男宾三位','123')
null //没有输入就是null
DOM操作
// 标签查找
// 当用变量名指代标签对象的时候，都定义为xxxEle
// 直接查找
// 1.id查找,单个
document.getElementById('d1')
// <div id="d1">...</div>
// 2.类查找，数组
document.getElementsByClassName('c1')
// HTMLCollection [p.c1]0: p.c1 length: 1[[Prototype]]: HTMLCollection
// 3.标签查找，数组
document.getElementsByTagName('div')
// HTMLCollection(3) [div#d1, div, div, d1: div#d1]
// 间接查找，要先赋值给一个变量再使用
let pEle=document.getElementsByClassName('c1')[0]
// <p class= "c1"> … </p>
pEle.parentElement //查找pEle的父亲
// <div id= "d1"> … </div>
pEle.parentElement.parentElement //查找pEle父亲的父亲
// <body>...</body>
let divEle=document.getElementById('d1')
divEle.children //查找id=d1的div的后代
// HTMLCollection(3) [div, p.c1, p]
divEle.children[0] //索引取
// <div> div>div </div>
divEle.firstElementChild //第一个孩子
// <div> div>div </div>
divEle.lastElementChild //最后一个孩子
// <p> div>p </p>
divEle.nextElementSibling //div的弟弟，同级别下一个标签
// <div> div+div </div>
divEle.previousElementSibling //div的哥哥,同级别上一个标签
// null
// 前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">div
<div>div>div</div>
<p class="c1">div>p
<span>div>p>span</span>
</p>
<p>div>p</p>
</div>
<div>div+div</div>
</body>
</html>
节点操作
// 例1
//创建一个imgEle代指img标签
let imgEle=document.createElement('img')
//为img标签添加内置的属性src，图片必须同一个文件夹下，或者写绝对路径
imgEle.src='节点图片.png'
'节点图片.png'
//也可以使用下面的方式添加属性，自定义的属性不能使用.属性创建
imgEle.setAttribute('username','bjk')
imgEle.setAttribute('title','图片1')
//找到id=d1的标签，使用divEle代指
let divEle=document.getElementById('d1')
// 向divEle的最后一个后代添加imgEle标签
divEle.appendChild(imgEle)
// 例2
// 创建aEle代指a标签
let aEle=document.createElement('a')
//给标签添加内置函数
aEle.href='https://www.baidu.com0'
'https://www.baidu.com0'
aEle.innerText='点我'
'点我'
//将id为d1和d2的标签付给变量
let divEle=document.getElementById('d1')
let pEle=document.getElementById('d2')
//将a标签插入div和p标签之间
divEle.insertBefore(aEle,pEle)
// innerText和innerHTML 的区别
divEle.innerText //获取标签里面的全部文本
// 'div 点我\n\ndiv>p\n\ndiv>span'
divEle.innerHTML //获取标签里面全部的标签和文本
// 'div\n <a href="https://www.baidu.com">点我</a><p id="d2">div>p</p>\n <span>div>span</span>\n\n '
divEle.innerText='<h1>hahha</h1>' //添加什么显示什么
// '<h1>hahha</h1>'
divEle.innerHTML='<h1>hahha</h1>' //会识别html标签
// '<h1>hahha</h1>'
//获取值操作
divEle=document.getElementById('d3')
// <div id= "d3" class= "c3 bg_red bg_green"> d3 </div>
divEle.classList //查看当前标签对象的类属性列表
// DOMTokenList(3) ['c3', 'bg_red', 'bg_green', value: 'c3 bg_red bg_green']
divEle.classList.remove('bg_red') //移除bg_red类属性
divEle.classList.add('bg_red') //添加bg_red类属性
// 查看当前是否有目标类属性
divEle.classList.contains('c1')
false
divEle.classList.contains('c3')
true
// 有则移除，没有就添加
divEle.classList.toggle('bg_red')
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false
//DOM操作标签样式 统一使用style起手
pEle=document.getElementsByClassName('p')[0]
// <p class= "p"> 今天天气真不错 </p>
pEle.style.color='red'
'red'
pEle.style.fontSize='28px'
'28px'
pEle.style.backgroundColor='yellow'
'yellow'
pEle.style.border='3px solid red'
获取值
// .value获取用户输入的值
let inputEle=document.getElementById('i1')
inputEle.value
let seEle=document.getElementById('s1')
seEle.value
'111'
// .files获取用户上传的文件数据
let inputi2Ele=document.getElementById('i2')
inputi2Ele.files //拿到的数组
// FileList {0: File, length: 1}
inputi2Ele.files[0] //取第一个，就是文件
// 前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<input type="text" id="i1">
<select name="" id="s1">
<option value="111">haha</option>
<option value="222">heihei</option>
<option value="333">momo</option>
</select>
<input type="file" id="i2">
</form>
</body>
</html>
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="func1()">点击事件</button>
<button id="d1">点我</button>
<!--达到某个设定的条件 自动触发的动作-->
<!--绑定时间的两种方式-->
<!--script标签大多放在body标签的最下方-->
<script>
//第一种绑定方式
function func1(){
alert(111)
}
//第二种，定位id常用
let btnEle=document.getElementById('d1');
btnEle.onclick=function (){
alert(222)
}
</script>
</body>
</html>
浙公网安备 33010602011771号