JS
1、作用：
- 动态改变标签的属性
<!DOCTYPE html>
<html>
<body>
<p>JavaScript 能够改变 HTML 属性值。</p>
<p>在本例中，JavaScript 改变了图像的 src 属性值。</p>
<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>
<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>
</body>
</html>
- 动态改变标签的样式
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript 能够改变 HTML 元素的样式。</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">
点击我！</button>
</body>
</html>
- 对用户数据进行校验，例如：两次输入密码
- 动态的对标签进行操作，例如：创建标签、添加标签、删除标签、修改标签
- 实现异步通信，技术：ajax
2、特点：
基于对象：js中可以通过对象调用属性和方法，在js中已经提供了许多对象，不需要创建，直接使用
事件驱动：页面中的标签通过触发js中的某些事件，才能执行相应的功能
脚本语言：不能独立运行，必须依赖html页面
js与html页面的结合
1、内嵌式：
在<head>标签中写<script>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 只有number和string两种类型 typeof(a) 判断a的类型
var a=3;
alert(typeof(a));
var b="s";
alert(typeof(b));
</script>
</head>
2、外联式
创建js文件，编写js代码，在需要使用该js文件的页面<head>标签之间，使用<script>属性src引入
<script type="text/javascript" src="../js/test.js"></script>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 只有number和string两种类型 typeof(a) 判断a的类型
var a=3;
alert(typeof(a));
function g(){
var b="s";
alert(typeof(b));
}
</script>
<script type="text/javascript" src="../js/test.js"></script>
</head>
<body>
<button onclick="f()">按钮</button>
<button onmousedown="g()">按钮1</button>
</body>
js基础语法
变量和数据类型
js是弱类型的语言，java是强类型的语言
强类型：在声明变量，必须明确变量的类型，并且为这个变量赋值时，值的类型与指定的类型必须是兼容的
js中的变量无论是什么类型，都是通过var类型声明，js中变量的类型是由值来决定的
注意：
一个变量只声明，但没有赋值，那么这个变量的值为undefined
定义变量时，可以省略var，此时这个变量是全局变量
数据类型：
基本数据类型：string\number\boolean\array\function\regex(正则)
其他数据类型：
undefined：声明变量未赋值，只有一个值undefined
null：只有一个值，就是null，变量有赋值，但是这个值没有引向
运算符
算术运算符：+、-、*、/、%、++、–
规则基本与Java相同，Java中
/没有小数，js中有小数赋值运算符：=、+=、-=、*=、/=、%=
比较运算符：==、！=、>、>=、<、<===只比较值
===既比较内容也比较类型
逻辑运算符：&&、||、！
三元运算符：表达式1?结果1,结果2
流程控制
1、判断结构：isNaN：是否不是一个数值，不是数值为true
2、分支结构：
seitch(){
case 值1:
语句；
break;
case 值2:
语句；
break;
case 值3:
语句；
break:
...
default:
语句；
break;
}
3、循环结构：略
函数
关键字：function
定义：function 函数名(参数列表){方法体}
function f(a,b){//方法体}
//调用
"f('字符串')" "f(数值)"
多个方法名相同，参数列表不同，后面的会覆盖前面的方法
注意 this关键字
<head>
<meta charset="utf-8">
<title></title>
<script>
function f(n){
var obj = document.getElementById("i");
obj.value = n.value;
// obj.value += n.value;
}
</script>
</head>
<body>
<input type="text" id="i">
<input type="button" onclick="f(this)" value="1">
<input type="button" onclick="f(this)" value="2">
<input type="button" onclick="f(this)" value="3">
<input type="button" onclick="f(this)" value="4">
</body>
返回：无论方法是否有返回，在定义方法时都不能写返回类型
方法无返回值，可以通过return来结束方法
方法有返回值，需要return返回结果
匿名函数：
function(){}
将匿名函数赋值给一个变量，本职上这个变量就是函数名
var b = function(){
alert("匿名");
}
将匿名函数赋值给一个标签的事件属性，当触发了这个标签的指定事件时就会调用该函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background: red;
}
</style>
<script>
//window.load 整个页面加载完毕后，触发该事件
window.onload = function(){
var obj = document.getElementById("d");
obj.onclick = function(){
obj.style.background = 'blue';
}
}
</script>
</head>
<body>
<div id="d"></div>
</body>
</html>
数组
存储数据的容器
特点：
数组的长度是可变的
同一个数组中可以存储不同类型的数据
定义数组：
//方式一：
var arr1 = new Array(值1,值2,值3,...);
//方式二：
var arr2 = new Array(数组的长度);
25. 数组的长度为负数或小数，则报错
//方式三：
var arr3 = [值1,值2,值3,...]
注：数组下标越界获取的值都是undefined
常用方法：
1、push(...)，添加（尾部）
2、unshift(...)，添加（头部）
3、splice()
添加，有三个参数，例如：splice(i,0,j...),表示在下标为i的位置，添加j
删除，有两个参数，例如：splice(a,b),表示从下标a开始，删除b个元素
替换，有三个参数，例如：splice(a,b,c...)，表示从下标为a的位置开始，用c替换b个数据
innerHtml和innerText的区别
innerText输出的不论是纯文本还是带有标签，都会原样输出
innerHTML若输出的是纯文本，会原样输出；带有标签则会解析出标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
onload = function(){
var p = document.getElementById("p");
var b = document.getElementById("d");
//p.innerText = "<div>你好</div>";
p.innerHTML="<div>百度</div>"
}
</script>
</head>
<body>
<p id="p"></p>
</body>
</html>
事件
//点击事件
onclick:单击
ondblclick:双击
// 鼠标事件
onmousemove:鼠标移动
onmouseover:把鼠标移动到元素上
onmouseout:把鼠标移开元素
onmouseleave:把鼠标移开元素
<head>
<meta charset="utf-8">
<title></title>
<script>
function f(o){
o.src = "img/20230316105837.jpg";
}
function g(o){
o.src = "img/20230316105741.jpg";
}
function p(){
console.log(3);
}
</script>
</head>
<body>
<img width="500px" src="img/20230316105741.jpg" onmouseover="f(this)" onmouseleave="g(this)" onmousemove="p()">
</body>
onmouseout和onmouseleave的区别：
给元素绑定事件，当元素没有子元素的时候，上面两个事件没有区别。当元素有子元素的时候，上面两个的触发机制不同。onmouseleave触发的条件是当鼠标离开了父元素的区域（只要在父元素的里面即可，可以在父元素的子元素上面的），onmouseout触发条件是给那个元素绑定了，就必须只能在这个元素上，鼠标进入该元素的子元素，也表示离开了当前的元素。
//鼠标事件
onkeydown:鼠标按下
onkeyup:鼠标弹起
//焦点事件
onfocus:获取焦点
onblur:失去焦点
拓展：style.outline=none：可以使轮廓线消失
//加载事件
window.onload
//表单事件
onsubmit
注意：表单事件是在点击表单中的按钮时触发，但是表单事件onsubmit是写在表单上的
正则表达式
使用步骤：
创建正则表达式对象：
//方法一
var reg1 = new RegExp("正则表达式");
//方法二
var reg2 = /正则表达式/;
匹配方法：（test）
正则表达式.test(字符串);
加上边界匹配器：^开头$结束
BOM
浏览器对象模型
window
window在调用的属性和方法时，都可以省略window
常见属性：window.onload
常见方法：
//对话框相关
1、alert():显示一段内容的警告框
2、confirm():确定，返回值boolean
3、promt():返回输入的内容，取消返回null，确定返回输入框中的内容
``
```js
//定时器
1、setTimeout(函数,时间)：定时器，只执行一次，设置一个指定时间的定时器，当到达指定时间时，执行函数功能，返回当前这个定时器的id
2、clearTimeout(定时器id)：清除定时器，
---
3、setInterval(函数,时间)：循环定时器，每当指定时间到达时，执行一次函数，返回当前这个定时器的id
4、clearInterval()
location
属性：
href:跳转到指定的目标地址
页面跳转的方式：
- 超链接
- 表单
- location.href
注:三种方式都可以实现目标地址的跳转功能，但是表单跳转时可以指定提交方式是get还是post，而使用超链接或者location.href在跳转时只能以get方式提交，参数可以拼接到href属性值后
<head>
<script>
function f(){
var value = document.getElementById("inp").value;
location.href = "http://baidu.com/?key="+value;
}
function g(){
location.reload();
}
</script>
</head>
<body>
<input type="text" id="inp">
<button onclick="f()">按钮</button>
<hr>
<a href="http://baidu.com/?name=zs&age=33">百度</a>
<hr>
<form action="http://baidu.com" method="get">
<input type="text" name="user">
<input type="text" name="password">
<input type="submit">
</form>
<hr>
<button onclick="g()">刷新</button>
</body>
方式:
reload():刷新页面
history
方法：
1.back()：后退一个页面
2.forward()：前进一个页面
3.go(参数)：点击超链接从哪里过来的决定的，并不是由点击前进后退的次数决定1.正整数n：表示前进n个页面
2.负整数n：表示后退n个页面
DOM
使用document对象对标签进行操作
常用功能:
1、获取元素对象
1.getElementById()
2.getElementsByClassName()
3.getElementsByTagName()
4.getElementsByName()
5.a.children：获取a标签中所有子元素对象组成的数组
6.createTextNode(“”)：创建文本节点
2、添加元素对象
1.a.appendChild(b)：在a中添加最后一个子元素b
2.a.insertBefore(b,c)：在a中的c前添加b
<head>
<style>
p{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<script>
onload= function(){
var btn = document.getElementById("btn");
var btn2 = document.getElementById("btn2");
var p1 = document.getElementById("p1");
var a1 = document.getElementById("a1");
var a2 = document.getElementById("a2");
//先点击 按钮1--->按钮2
//将百度添加成p1的子元素
btn.onclick = function(){
p1.appendChild(a1);
}
//将腾讯添加到百度前
btn2.onclick = function(){
p1.insertBefore(a2,a1)
}
}
</script>
</head>
<body>
<p id="p1"></p>
<button id="btn">按钮1</button>
<a href="http://www.baidu.com" id="a1">百度</a>
<a href="http://www.qq.com" id="a2">腾讯</a>
<button id="btn2">按钮2</button>
</body>
3、创建元素对象
1.createElement(“标签名”) 有返回值
<head>
<script>
onload = function(){
var b = document.getElementById("b");
b.onclick = function(){
var a = document.createElement("a");
a.innerText = "百度";
a.href = "http://www.baidu.com";
//注意：body也是一个标签
var body = document.getElementsByTagName("body")[0];
body.appendChild(a);
}
}
</script>
</head>
<body>
<button id="b">按钮</button>
</body>
4、删除元素对象
1.a.removeChild(b)：在a中删除子元素b
2.a.remove()：删除a及其子元素
5、替换元素对象
1.a.replaceChild(b,c)：在a中，用b替换掉c
属性的操作
1.setAttribute(属性名,属性值)
注：setAttribute()与标签对象.属性的功能相同，区别是setAttribute()可以自定义属性，而标签对象.属性只能调用这个标签的固有属性
2.getAttribute(属性名)
<head>
<script>
onload = function(){
var inp = document.getElementById("inp");
var btn = document.getElementById("btn");
btn.onclick = function(){
if(inp.type == "password"){
inp.type = "text";
}else if(inp.type == "text"){
inp.type = "password";
}
}
}
</script>
</head>
<body>
<input type="password" id="inp">
<button id="btn">按钮</button>
</body>
json
作用：用于存储和交换文本信息
json的语法格式：
json中的数据都是以键值对进行存储
键：必须是字符串
值：可以是
- 数值
- 字符串
- 布尔值
- null
- json对象：
{}- json数组：
[]
json中数据的获取：
1.json对象.键
2.json对象[“键”]
3.json数组[下标]
<script>
var json1 = {
"name":"zs",
"age":18,
"cars":[
{
"brand":"奥迪",
"color":"purple",
"price":20
},
{
"brand":"路虎",
"color":"red",
"price":200
}
]
}
alert(json1.name);
alert(json1["age"]);
alert(json1.cars[0].brand);
alert(json1.cars[1].brand);
</script>
注：for循环可以用于遍历json数组；for-in可以用于遍历json对象和json数组，如果遍历的是json对象，那么变量获取的是json对象中的每一个键，如果遍历的是json数组，那么变量获取的是json数组中的每一个下标.
1388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
