目录
全凭记忆写的 程序是对的 运行不了就是某个字母错了 千万不要怀疑自己 怀疑人生 我刚开始学java也是这样的 看半天怀疑人生
刚入门js的老铁请在body标签或者其它地方写上<script>这里写上或者复制要运行的代码</script>
基本语法:
1.网页输出：
document.write("你好！世界")2.弹出框输出：
alert("hello Word !")3.提供确定（ture）与取消（false）返回值的弹出框：
confirm("还要继续吗？")4.获取用户输入的弹出框：
prompt("请输入您的内容")4-1.promt用法：
var say = prompt("请输入你想说的话")
alert("我重复一下您说的话："+say)5.控制台输出（浏览器f12查看输出结果）：
console.log("holle word")6.注释：
6-1单行：
//您好 这里是是注释代码6-2多行：
/*
您好
这里是多行注释
哈哈哈哈
我很帅
*/7.声名一个值（与java类似 var只有声名的作用 别多想）
var say = "666" //声名say=666
console.log(say) //控制台输出声名的值（f12可以在控制台查看）7-1数据类型转换：
//定义值
var num = 520
var choose = true
//数字与布尔值转字符
num.String()
String(choose)
8.基本数据类型（不常用）：
8-1布尔类型：
var flag = true
var mark = false9.条件和循环语句与java类似（简单描述）:
9-1if...else...（条件）
var num = prompt("请输入一个数字")
if(num=1){
alert("我只认可1")
}else if(num=2){
alert("我也认可2")
}else{
alert("除了1和2 其它的我都不认可")
}9-2.switch(条件)
//前面没讲 这里是直接给它定义它属于数字而不是字符
var num = Number(prompt("请输入一个数字（1~3）"))
switch(num){
case 1:
alert("你输入的是：1")
break
case 2:
alert("你输入的是："+num)
break
case 3:
alert("点击f12在控制台可以看到我")
console.log(3)
break
}9-3.for循环
//学过java的老铁这里就很熟悉了 打印1~10
for(var i=1;i<=10;i++){
document.write(i)
}
/*for(声名一个值；在什么条件可以循环；符合条件后要做什么){
这里写要循环的东西 学过java的这里很好理解
}
*/9-4.while(循环)
/*
while(什么条件可以循环){
要循环的东西
}
*/
var score = prompt("请输入你的成绩")
while(score >= 60){
alert("恭喜你成绩合格")
break
//这里我不循环了 直接break停止 根据自己的想法来
//可以利用它写一个9*9乘法表 其它循环也可以 写出来就算循环计算入门了
}9-5.do while(循环)
/*
do{
要循环的语句
}while(条件)
*/
var i = 0
do{
i++
alert(i)
//这里写个停止循环语句
if(i>=10){
break
}
}while(i <= 10)//三种循环和两种条件java都是一样的
10.函数
语法：
function 函数名（参数）{
函数体
}
调用：
函数名（）
11.数组
//声名一个数组
var ArrOne = ['宝马'，'比亚迪','法拉利'，666]
//输出数组
alert(ArrOne) //全部输出
alert(ArrOne[0]) //输出第一个
alert(ArrOne[3]) //输出第四个对象数据类型
<script>
// a是一个键冒号:外是一个值 组合为一个键值对
var arr1={a:'陈老板',b:'王老板',c:"hello word",d:100}
console.log(arr1)
// 增加e为张三
arr1.e = '张三'
console.log(arr1)
// 更改b为200
arr1.b = 200
console.log(arr1)
// 删除d
delete arr1.c
console.log(arr1)
// 第二种写法
// 对象名字['键'] = 值
// delete 对象名['值']
</script>字符串玩法
// charAt 输出对应位置的字符
var str = 'holle word'
alert(str)
var newstr = str.charAt(1)
alert(newstr)
// toLowerCase() 将字符串内的字母全部转换小写
// 同理 toUpperCase 转换大写
var str1 = 'Holle Word'
alert(str1)
var newstr1 = str1.toLowerCase()
alert(newstr1)
// replace() 把括号内第一个数据替换成第二个数据
var str2 = 'Holle Word'
alert(str2)
var newstr2 = str2.replace('Word','handsomeboy')
alert(newstr2)
// trim 去除空格
var str3 = ' Holle Word '
alert(str3)
var newstr3 = str3.trim()
alert(newstr3)
// split() 括号内写切割内容 返回一个数组
var str4 = '2000-01-01-2025-12-12'
alert(str4)
var newstr4 = str4.split('-')
alert(newstr4)数字玩法
//rangdom 输出一个随机小数
var num = Math.rangdom
console.log(num)
//round 去除小数 逢5进1
var num1 = Math.round(10.4)
console.log(num2)
//ceil 向上取整
var num2 = Math.ceil(10.5)
console.log(num2)
//floot 向下取整
var num3 = Math.floot
console.log(num3)
//pow 括号内是左边本数 右边是需要求的幂
var num4 = Math.pow(2,5)
console.log(num4)
//sqrt() 求二次方根
var num5 = Math.sqrt(4)
console.log(num5)
//abs 求绝对值
var num6 = Match.abs(-6)
console.log(num6)
//max 求最大值 同理min为最小值
var num7 = Math.max(-20,10,80,88,77,1)
console.log(num7)
//pi 3.1415926.....
var num8 = Math.pi
console.log(num80)时间常用方法
获取
//创建一个时间对象
var = time new Date()
console.log(time)
//指定时间节点输出 2000年1月1日.....
var time1 = new Date(2000,1,1,00,00,59)
//获取年份信息
var year = time.getFullYear()
console.log(year)
//获取月份
var month = time.getMonth()
console.log(month)
//获取日期
var date = time.getDate()
console.log(date)
//获取小时信息
var hours = time.getHours()
console.log(hours)
//获取分钟信息
var minutes = time.getMinutes()
console.log(minutes)
//获取秒信息
var seconds = time.getseconds()
console.log(seconds)
//获取星期
var day = time.getday()
console.log(day)
//获取时间戳
var ms = time.getTime()
console.log(ms)设置
//创建一个时间对象
var time = new data()
//输出一个时间对象作对比
//设置年份信息
time.setFullYear(2002)
//设置月份
time.setMonth(2)
//设置日期
time.setDate(23)
//设置小时
time.setHours(22)
//设置分钟
time.setMinutes(32)
//设置秒
time.setSeconds(59)
//输出时间对象
console.log(time)BOM操作
1.获取浏览器窗口宽高
// 获取窗口宽度
var w = window.innerWidth
// 获取窗口高度
var h = window.innerHeight
console.log(w)
console.log(h)2. 浏览器弹出层
window.alert()
window.confirm()
window.prompt()
3.开启与关闭标签页
<body>
<button id="on">开启</button>
<button id="off">关闭</button>
<script>
// 开启标签
on.onclick = function(){
window.open('http://wwww.baidu.com/') //地址
}
// 关闭标签页
off.onclick = function(){
window.close(地址)
}
</script>
</body>4.浏览器常见事件
// 资源加载完毕后执行函数
window.onload = function(){
console.log('资源加载完毕')
}
// 获取窗口改变事件
window.onresize = function(){
console.log('窗口事件改变了')
}
// 滚动条改变事件
window.onscroll = function(){
console.log('滚动条位置改变了')
console.log(document.documentElement.scrollLeft)
}5.浏览器历史记录
// 浏览器的历史操作记录
// 回退箭头
window.history.back()
// 前进箭头
window.history.forward()6.浏览器卷去的尺寸
// 浏览器卷去的尺寸 配合滑动滚动条使用
// 高度：
// 有docment标签可以用
document.documentElement.scrollTop
// 没有用这个
document.body.scrollTop
// 宽度：
document.documentElement.scrollLeft
document.body.scrollLeft7.浏览器滚动到
方式一（直接明了）
<--为了明显一点写个style-->
<style>
body{width: 1000px; height: 1000px;}
button{position: fixed; bottom: 50px; right: 50px;} <!-- 给他保持相对位置 -->
</style>
<body>
<button id="go">走起</button>
</body>
<script>
// 浏览器滚动到 window.scrollTo(left,top)
go.onclick = function(){
window.scrollTo(300,400)
}
</script>方式二（优雅不过时）
//把上面的script换成下面的即可 滑动效果
// 滑动
window.scrollTo({
left:200,
top:200,
behavior:'smooth'
})8.两种定时器
<script>
// 间隔定时器 setInterval(函数,时间) 时间是毫秒为单位 1000ms=1s
// 这里的意思就是每秒执行一次函数
setInterval(function(){
console.log('执行了一次')
},2000)
// 演示定时器 同理 3秒时执行
setTimeout(function(){
console.log('执行了一次')
},3000)
</script>它的返回值
<script>
// 分别定义两个定时器
var GetOne = setInterval(function(){
console.log('执行了一次')
},2000)
var GetTwo = setTimeout(function(){
console.log('执行了一次')
},3000)
// 输出返回值
console.log('time1',GetOne)
console.log('time2',GetTwo)
</script>关闭定时器
// 关闭它们
// clearInterval(要关闭的定时器返回值)
// clearTimeout(要关闭的定时器返回值)
//如：
clearInterval(time1)DOM操作
1.获取元素的方式 ：
根据id元素获取
根据元素类名（class）获取
根据标签名获取
根据选择器获取
根据选择器获取一组
根据id元素获取
语法：document.getElementById('id名称')
返回值：
有对应的id就是 这个id的元素
没有就是 null
<body>
<div id="IdBox">111</div>
<div>222</div>
<div>333</div>
<div>444</div>
</body>
<script>
// 根据id获取document.getElementById('id名称')
var A = document.getElementById('IdBox')
// 输出返回值
console.log(A)
</script>根据元素类名（class）获取
语法：document.getElementsByClassName('类名')
作用：获取所有元素的类名
返回值：
伪数组 有多少获取多少
没有则为空的伪数组
<body>
<div id="IdBox">111</div>
<div class="ClassBox">222</div>
<div>333</div>
<div>444</div>
</body>
<script>
// 根据元素类名获取document.getElementsByClassName('类名') 可以用多个类
var B = document.getElementsByClassName('ClassBox')
console.log(B)
</script>根据标签名获取
语法：document.getElementsByTagName('标签名')
作用：获取所有标签中对应的标签名对应的元素
返回值：
也是一个伪数组
没有则为空的伪数组
<body>
<div id="IdBox">111</div>
<div class="ClassBox">222</div>
<div>333</div>
<div>444</div>
</body>
<script>
// 根据标签名获取document.getElementsByTagName('标签名')
var C = document.getElementsByTagName('div')
console.log(C)
</script>根据选择器获取
语法：document.querySelector('选择器')
作用：获取标签中满足条件的第一个选择器
返回值：
有对应则获取到第一个元素
没有则为null
<body>
<div id="IdBox">111</div>
<div class="ClassBox">222</div>
<div>333</div>
<div>444</div>
</body>
<script>
// 根据选择器获取document.querySelector('选择器')
var D = document.querySelector('.ClassBox')
console.log(D)
</script>根据选择器获取一组
语法：document.querySelectorAll('选择器')
作用：获取符合条件的所有元素
返回值：
伪数组 有多少获取多少
没有则是一个空的伪数组
<body>
<div id="IdBox">111</div>
<div class="ClassBox">222</div>
<div class="ClassBox">333</div>
<div>444</div>
</body>
<script>
// 根据选择器获取一组document.querySelectorAll('选择器')
var E = document.querySelectorAll('div')
console.log(E)
</script>2.操作元素内容
操作文本
获取：元素.innerText
设置：元素.innerTxt = '新内容'
方式二：
元素.textContent = '要修改的新内容'
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作文本内容</title>
</head>
<body>
<button>操作内容</button>
<div>
<p>我是内容</p>
</div>
</body>
<script>
// 操作元素文本内容
// 获取元素
var A = document.querySelector('div')
var B = document.querySelector('button')
// 获取元素的文本内容
console.log(A.innerText)
B.onclick = function(){
A.innerText='新内容'
}
</script>
</html>操作超文本（标签）内容
获取：元素.innerHTML
设置：元素.innerHTML = '新内容'
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作超文本内容</title>
</head>
<body>
<button>操作内容</button>
<div>
<p>我是内容</p>
</div>
</body>
<script>
// 获取元素
var A = document.querySelector('div')
var B = document.querySelector('button')
// 获取标签元素内容
console.log(A.innerHTML)
B.onclick = function(){
A.innerHTML = '<span>成为了新内容</span>'
}
</script>
</html>操作元素属性
原生属性：
获取：元素.属性名
设置：元素.属性名 = ‘属性值’
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作元素属性</title>
</head>
<body>
<!-- 设置原生属性 -->
<button>操作原生属性</button>
<div id="box">我是div标签</div>
<input type="password">
</body>
<script>
// 获取元素属性
var box0 = document.querySelector('div')
var box1 = document.querySelector('input')
var box2 = document.querySelector('button')
// 给按钮绑定元素属性
box2.onclick = function(){
// 修改元素属性
box0.id = 'content'
box1.type = 'checkbox'
}
</script>
</html>操作元素类名（点击按钮更改样式）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作元素类名</title>
</head>
<style>
.content{
font-size: 50px;
color:red;
}
.box1{
font-size: 100px;
color: aqua;
}
</style>
<body>
<button>操作类名</button>
<div class="content">div 标签</div>
</body>
<script>
// 获取元素
var element = document.querySelector('div')
var btn = document.querySelector('button')
// 获取类名 输出方便查看效果
console.log(element.className)
btn.onclick = function(){
// 设置div的类名
element.className = 'box1'
}
</script>
</html>操作自定义属性
获取：
设置：
删除：
操作元素行内样式
获取：元素.style.样式名
设置：元素.style.样式名 = ‘样式值’
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作行内样式</title>
</head>
<body>
<!-- 做一个按钮 -->
<button>操作样式</button>
<div style="height: 100px; width: 100px; background-color: red;">设置行内样式的div</div>
</body>
<script>
// 获取
var A = document.querySelector('button')
var B = document.querySelector('div')
// 输出查看样式是否获取到 ！！！注意有中华— js要以驼峰的形式写出来
console.log( B.style.width )
console.log(B.style.height)
console.log(B.style. backgroundColor)
// 给按钮绑定事件
A.onclick = function(){
// 设置div的样式
B.style.width = '300px'
B.style.height = '300px'
B.style.backgroundColor = 'skyblue'
}
</script>
</html>获取非行内样式名
window.getComputedStyle(元素).样式名 行内外都可以获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取非行内样式</title>
</head>
<body>
<!-- 先做个按钮 -->
<button>更改行内外样式</button>
<!-- 做个实验品div -->
<div style="height: 200px;width: 200px;background-color: red;">我是实验品div</div>
</body>
<script>
// 获取元素
var A = document.querySelector('div')
var B = document.querySelector('button')
// 输出测试是否获取到
console.log(window.getComputedStyle(A).width)
console.log(window.getComputedStyle(A).height)
console.log(window.getComputedStyle(A).backgroundColor)
</script>
</html>节点操作
创造节点
<!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>节点操作</title>
</head>
<body>
<div>
<p>我是div本身内容的标签</p>
</div>
</body>
<script>
// 创造节点
var a = document.createElement('span')
// 控制台输出节点
console.log(a)
</script>
</html>插入节点
方式一
新增的子节点放在父节点的最后位置
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点操作</title>
</head>
<body>
<div>
<p>我是div内部本身的内容</p>
</div>
</body>
<script>
// 创建一个span标签
var span = document.createElement('span')
// 给这个文本插入一些内容
span.innerText = '我是创造出来的span标签'
console.log(span)
var div = document.querySelector('div')
// 给div标签插入span标签的内容
div.appendChild(span)
</script>
</html>方式二
新增的子节点放在指定位置
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点操作</title>
</head>
<body>
<div>
<p>我是div内部本身的内容</p>
</div>
</body>
<script>
// 创建一个span标签
var span = document.createElement('span')
// 给这个文本插入一些内容
span.innerText = '我是创造出来的span标签'
console.log(span)
var div = document.querySelector('div')
var p = document.querySelector('p')
// 把创建的span标签插入到div里，并放在p前面
div.insertBefore(span,p)
</script>
</html>删除节点
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点操作</title>
</head>
<body>
<div>
<p>我是div内部本身的内容</p>
<span>我是span标签的内容</span>
<h1>我是标题标签</h1>
</div>
</body>
<script>
// 获取到div p元素
var div = document.querySelector('div')
var p = document.querySelector('p')
var h1 = document.querySelector('h1')
console.log(div)
// 从div删除p元素
div.removeChild(p)
console.log(div)
// 把自己删除
h1.remove()
console.log(div)
</script>
</html>替换节点
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点操作</title>
</head>
<body>
<div>
<p>我是div内部本身的内容</p>
<span>我是span标签的内容</span>
<h1>我是标题标签</h1>
</div>
</body>
<script>
// 创建一个i标签
var i = document.createElement('i')
// 给它输入一些内容
i.innerText = '我是创建出来的i标签'
// 获取需要的元素
var div = document.querySelector('div')
var p = document.querySelector('p')
// 替换环节
div.replaceChild(i,p) //用i标签替换掉div内的p标签
console.log(div) //输出查看
</script>
</html>克隆节点
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点操作</title>
</head>
<body>
<div>
<p>我是div内的p标签</p>
</div>
</body>
<script>
var div = document.querySelector('div')
// 克隆一个div元素，不克隆后代元素
var clone1 = div.cloneNode(false)
// 克隆一个div元素，克隆后代元素
var clone2 = div.cloneNode(true)
console.log('我是不克隆后代的',clone1)
console.log('我是克隆后代的',clone2)
</script>
</html>获取元素尺寸
事件
语法：事件源.on事件类型 = 事件处理函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件</title>
</head>
<style>
/* 设置好div的样式 */
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<div></div>
</body>
<script>
var div = document.querySelector('div')
// 绑定点击事件
div.onclick = function(){
console.log('你点击了我')
}
</script>
</html>事件大致类型
| 鼠标事件 | 键盘事件 | 浏览器事件 | 触摸事件 | 表单事件 |
| click - 鼠标单击 | keydown - 键盘按下 | load - 加载完毕 | touchstart - 触摸开始 | focus - 聚焦 |
| dblclick - 鼠标双击 | keyup - 键盘抬起 | srcoll - 滚动 | touchmove -触摸移动 | blue - 失焦 |
| contextmenu - 左键单击 | keypress - 键盘键入 | resize - 尺寸改变 | tochend - 触摸结束 | change - 改变 |
| mouseup - 鼠标抬起 | input - 输入 | |||
| mousedown - 鼠标按下 | submit - 提交 | |||
| mousemove - 鼠标移动 | reset - 重置 | |||
| mouseout - 鼠标移出 | ||||
| mouseleave - 鼠标移出 | ||||
| mouseenter - 鼠标移入 |
获取事件类型的方法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<style>
div{
width: 500px;
height: 500px;
background-color: red;
}
</style>
<body>
<div></div>
</body>
<script>
var div = document.querySelector('div')
div.onclick = function(e){
console.log(e)
}
</script>
</html>
事件对象内的信息
- 鼠标事件
offsetx 与 offsety 它只相对元素定位
clientx 与 clienty 它相对于浏览器定位
pagex 与 pagey 它相对界面文档流定位
- 键盘事件
可以通过键盘编码确实输入的按键
事件对象.keyCode
事件传播
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件传播</title>
</head>
<style>
.one{background-color: yellowgreen; width: 800px; height: 800px; }
.two{background-color: antiquewhite;width: 500px; height: 500px;}
.three{background-color: brown;width: 300px; height: 300px;}
</style>
<body>
<div class="one">
<div class="two">
<div class="three"></div>
</div>
</div>
</body>
<script>
// 获取元素
var one = document.querySelector('.one')
var two = document.querySelector('.two')
var three = document.querySelector('.three')
// 绑定点击事件
one.onclick = function(){console.log('one被点击了')}
two.onclick = function(){console.log('two被点击了')}
three.onclick = function(){console.log('three被点击了')}
</script>
</html>阻止事件传播
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阻止事件传播</title>
</head>
<style>
.one{background-color: yellowgreen; width: 800px; height: 800px; }
.two{background-color: antiquewhite;width: 500px; height: 500px;}
.three{background-color: brown;width: 300px; height: 300px;}
</style>
<body>
<div class="one">
<div class="two">
<div class="three"></div>
</div>
</div>
</body>
<script>
// 获取元素
var one = document.querySelector('.one')
var two = document.querySelector('.two')
var three = document.querySelector('.three')
// 绑定点击事件
one.onclick = function(){console.log('one被点击了')}
// 这里组织two事件传播 只触发two事件
two.onclick = function(e){
e.stopPropagation()
console.log('two被点击了')
}
three.onclick = function(){console.log('three被点击了')}
</script>
</html>Ajax
请求方式
1.创建ajax请求
var xhr = new XMLHttpRequest();2.配置本次请求信息 (请求方式 请求地址 是否异步)
xhr.open()3.制作一个请求完成事件
xhr.onload = function(){
console.log('请求完成')
//如果是json格式需要单独转换
var res = JSON.parse(xhr.responseText)
console.log(res)
}4.发送请求
xhr.send()登录案例
var username = document.querySelector(".username")
var password = document.querySelector(".password")
var loginForm = document.querySelector("form")
// 制作一个提交事件
loginForm.onsubmit = function (e) {
e.preventDefault()
console.log("发送一次ajax请求")
// 拿到填写的用户名和密码
var name = username.valuse
var pwd = password.valuse
// 验证是否正确
if(!name || !pwd){
return alert('请完整填写表单')
console.log(name,pwd)
}
// 接下来是发送ajax请求
var xhr = XMLHttpRequest()
xhr.open()
xhr.onload = function(){
var res = JSON.parse(xhr.responseTest)
console.log(res)
}
if(res.code === 0){
// 登录失败
errBox.style.display = 'block'
}else{
// 登录成功
window.location.href = ''
}
xhr.send()
}
1847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
