1.javaScript简介
JavaScript是一门基于对象和事件驱动的脚本语言。特点为：①动态类型，不用指定变量的类型；②弱类型，一个变量可以赋不同类型的值。
JavaScript组成：ECMAScript、BOM、DOM。
1.1 使用方法
HTML内部JS：script标签可放在head或body标签中。
一般写在head标签中，例如：
<head>
<script>
allert("hello js");//表示浏览器顶部弹出提示
console.log("hello,world"); //表示控制台输出
</script>
</head>HTML外部JS：后缀名是“.js”，script标签可放在head标签中或body结束标签前，js文件中不需要写script标签。
先在head标签中引入外部js，例如：
<head>
<script src="demo.js"></script>
</head>
2 基础语法
2.1 变量
通过var关键字声明一个变量；原始数据类型有Number（数字，不区分整数和小数）、String（凡是单引号或双引号包裹的字符）、Boolean（true、false）、Undefined（undefined）、Null（null）。通过typeof 关键字可以判断数据类型。
var num = 100;//数字
var str = "小明"; //字符串
console.log(num);
console.log(typeof num);
console.log(num,typeof num);//与其前面两行结果一样（结合版）2.2 运算符
2.2.1 算术：+、-、、/、%（取余）、++（自增，放在变量前表示先+1再赋值，而放在后面表示先赋值再+1）、--（自减，原理类似于自增）
2.2.2 赋值：=、+=、-=、/=、%=
num1 += 5 ;//相当于：num1 = num1 + 52.2.3 字符串拼接：+
2.2.4 比较：>、<、==（值相同）、===（值和类型相同）、<=、>=、!=（不等于）
2.2.5 逻辑：&&（与）、||（或）、非（!）
2.2.6 条件（三目）：条件?表达式1:表达式2；
console.log(num1>num2?"成立":"不成立")2.3 数据类型转换
2.3.1 隐式转换：
（1）其它转数字：true--1,false--0；undefined--NaN（not a number）;null--0；纯数字字符串--数字，非纯数字--NaN。
（2）其它转字符串：直接给变量加引号即可。
（3）其它转布尔：非零数字和非空字符串--true，其余为false。
2.3.2 强制转换：
（1）转为数字：parseInt()、parseFloat()、Number()
转为整数（遇到非数字会停止）：parseInt('123dd')，结果：123
转为小数（遇到非数字会停止）：parseInt('123.55d')，结果：123.55
转为数字（只用于数字型字符串）：Number('123')，结果：123（2）转为字符串：String()。
（3）转为布尔：Boolean()，非零数字和非空字符串--true，其余为false。
2.4 流程控制语句
顺序结构：从下到下执行
（1）分支语句：
//1.if...else
//2.if...else if...else{}
if(100>200){
console.log(true);
}else if(300>400){
console.log(false);
}else{
console.log('以上都不满足')
}
//3.switch()
var week = 4;
switch (week){
case 1:
console.log('星期一')
break;
case 2:
console.log('星期二')
break; //如果不加break，则满足对应case值时，该case及其后面case的代码会全部执行，也就是所谓的“穿透性”！
case 3:
console.log('星期三')
break;
case 4:
console.log('星期四')
break;
case 5:
console.log('星期五')
break;
}（2）循环语句
//1.for循环
for (var i = 0; i < 10; i++) {
console.log('i：'i);
}
//2.while循环
while (j<10){
console.log('j：'+ j);
j++;
}
//3.do...while循环，不管条件是否成立，都会执行一次do中的代码。
do{
var n = 0;
console.log('n--'+n);
}while (n<10)
3.函数
函数就是对一系列代码的封装，实现代码的复用。
3.1 函数的定义、调用、参数、返回值
return会跳出函数，其后面的代码不会执行。
4.字符串
length可获取字符串长度；
charAt()可获取下标对应的字符；
indexOf()可获取相应字符的下标位置，如str.indexOf('c')；
slice()可截取字符串（左闭右开）不会改变原来的字符串，如：str.slice(1,5) ；
5.数组
var arr = [1,2,3,4,5];
// arr.push(33,55,99);//在原数组末尾添加元素，如有多个元素须用逗号隔开
// arr.pop();//删除数组中最后一个元素
// arr.splice(1,3);//下标1开始，删除3个元素
arr.splice(1,0,8);//下标1开始，删除0个元素，将8放入该位置
var re = arr.slice(1,3)；//截取下标1~3（不含3）之间的元素，不改变原数组
console.log(arr);
console.log(re);6.对象
对象就是一系列属性和方法的集合。
6.1 自定义对象
//对象的定义（对象名+属性，多个属性间用逗号隔开）
var dog = {
name: ' dudu ',
age: 2,
color: ' black ',
shout:function (){
alert('wangwang...')
}
}
//对象的访问（对象名+属性）
console.log(dog.name + dog.age);
dog.shout();//方法的访问不需要借助控制台输出
//添加属性（对象名+属性）
dog.height = '50cm'
dog.run = function (){
alert('i am running')
}
console.log(dog);//显示dog对象的所有属性
//删除属性（delete+对象名+属性）
delete dog.color;
//修改属性值（与添加一样，直接重新赋值就行）
dog.height ='40cm';
//遍历对象的属性（for循环）
//（1）遍历属性（item），结果是：name age shout height run
for(var item in dog){
console.log(item);
}
//（2）遍历属性值([item])，结果是：dudu 2 函数内容 40cm 函数内容
for(var item in dog){
console.log(dog[item])
}6.2 内置对象
//Math对象
var num = 13.5;
console.log(Math.round(num));//取整数，四舍五入
console.log(Math.ceil(num));//向上取整数
console.log(Math.floor(num));//向下取整数
console.log(Math.random());//在0~1（不含1）之间取随机数
//生成一个10以内的随机整数（含10）
console.log(Math.round(Math.random()*10));//组合使用相关函数
//生成一个10以内的随机整数（不含10）
console.log(Math.floor(Math.random()*10));
//Date对象
var date = new Date();//创建时间对象
// console.dir(date);//可列出该对象中的方法
console.log(date);//显示当前时间（GMT格式的时间），结果：Thu Aug 29 2024 17:35:45 GMT+0800 (中国标准时间)
console.log(date.toLocaleString());//显示为当地的时间格式，结果：2024/8/29 17:38:56
console.log(date.getFullYear());//显示当前年份（4位）
console.log(date.getMonth());//月
console.log(date.getDate());//日（不要与星期搞混）
console.log(date.getHours());//时
console.log(date.getMinutes());//分
console.log(date.getSeconds());//秒
console.log(date.getDay());//星期（不要与日搞混）
7.BOM
BOM：全称“browser object model”，浏览器对象模型，提供用户与浏览器窗口之间交互的对象和操作的接口。
包括window、history、location、navigator、screen、document
7.1 window的方法
//警告框(window可省略）
window.alert('警告！');
//确认框
var result = confirm('确认提交吗？')//确认则返回true，否则返回false
console.log(result)
//输入框（第一个参数为提示语，第二个为默认值，两个参数都可省略）
var msg = prompt('输入姓名','john');
console.log(msg);
// setInterval（周期执行）：会一直执行，直到打断
// 参数1为你的函数，参数2为间隔时间（单位毫秒）
var timeId1 = setInterval(function (){console.log(1)},1000);
//setTimeout（延迟执行）：只会执行一次
// 参数1为你的函数，参数2为延迟时间（单位毫秒）
setTimeout(function (){
clearInterval(timeId1);
console.log('hello');
},5000);
//clearInterval(清除周期执行):参数为相应周期执行返回的id
// clearInterval(timeId1);
//clearTimeout(清除延迟执行):参数为相应周期执行返回的id
// clearTimeout(timeId2);7.2 history的方法（了解）
//返回上一个页面
history.back();
//向前一个页面
history.forward();
//。。。
history.go();7.3 location
href、search、hash、reload()、host、port
//location（浏览器地址栏）
console.log(location.href);//获取地址栏的网址
console.log(location.hash);//获取地址栏井号（#）后面的内容，如#100，用来传递数据信息
console.log(location.search);//获取地址栏问号（？）后面的内容，如?id=10&name=dog
location.reload();//重新加载该页面（刷新），默认会一直加载，一般需配合其它条件使用7.4 navigator
userAgent：浏览器信息
console.log(navigator.userAgent);7.5 screen
width，height，availWidth，availHeight，前面2个返回全屏下的浏览器宽高，后面2个返回全屏下的浏览器可用宽高。
console.log(screen.width);
console.log(screen.height);
console.log(screen.availWidth);
console.log(screen.availHeight);7.6 document
可以在body中写入html代码。
<script>
document.write('<h1>hello</h1>')
</script>
8.DOM
8.1 定义
DOM全称“document object model”，即文档对象模型，对文档的结构化的表述，定义了在程序中对该结构进行访问的方式（访问、增加、删除、修改文档的内容）。
8.2 分类
核心（core）DOM：用于任何结构化文档的标准模型
HTML DOM：用于HTML文档的标准模型
XML DOM：用于XML文档的标准模型
8.3 DOM树
DOM将HTML文档抽象成树形结构，这个树就叫DOM树。HTML中的每项内容（DOM节点）都可在DOM树中找到。
8.4 DOM节点分类
文档节点
元素节点
文本节点
属性节点
注释节点
8.5 获取节点
（1）直接获取元素节点(节点都是对象，拥有属性和方法，可以用一个变量接收)
//通过id
document.getElementById()
//通过类名(如name_first)
document.getElementsByClassName()
//通过标签名（如div/span）
document.getElementsByTagName()
//可以代替上面3个（H5新出的，用法稍有不同，理论更加简单）
document.querySelector()
//用法（只获取第一个id为box的标签）：document.querySelector('#box')
document.querySelectorAll()
//用法（获取所有类名为box的标签）：document.querySelectorAll('.box')（2）通过节点关系获取节点 (node表示某个节点)
parentNode
childNodes //获取的返回值是一个数组，可以通过children[0]显示每个元素
firstChild(firstElementChild) //第一个子节点
lastChild(lastElementChild) //最后一个子节点
previousSibling(previousElementSibling)
nextSibling(nestElementSibling)8.6 DOM操作 (node表示某个节点)
innerHTML：可获取或设置元素的内容；此外还可以拼接原内容和新内容。
document.createElement()：创建一个元素。
node.appendChild()：添加一个元素（无引号）。
node.removeChild()：移除一个元素（无引号）。
//演示div（下面的例子通用）
<div id="box">
<p> hello DOM</p>
</div>
//1.innerHTML的使用
<script>
var box = document.getElementById('box');
console.log(box); //结果：<div id="box"><p> hello DOM</p></div>
console.log(box.innerHTML); //结果：<p> hello DOM</p>
console.log(box.innerText); //结果：hello DOM
//拼接原内容和新内容（使用+=）
box.innerHTML = '<span>这是旧内容--</span>';
box.innerHTML += '<span>这是新内容</span>';
</script>
//2.createElement()、appendChild()、removeChild()的使用
<script>
var box = document.getElementById('box');
var p = document.createElement('p'); //创建一个p标签
p.innerHTML = '新建的P标签内的值'; //设置p标签里的内容
box.appendChild(p); //在box标签中添加该p标签（这个p不要引号哦）
box.remove(p); //删除了上面添加的p标签，如果有多个p标签，只想删除其中一个，可用.remove(p[i])，其中i是你想删除的那个下标。
</script>8.7 事件
事件，就是能被JS检测到的活动或动作，好比你的鼠标或键盘的操作及一些状态的变化（页面加载等）。
事件处理函数，就是当活动发生时，响应活动的函数。比如鼠标点击时执行某个动作函数。
事件绑定
node.onclick = function(){ } ，一个按钮绑定多个事件时，前面的都会被覆盖失效。
node.addEventListener('click',function(){ },false) ，一个按钮绑定多个事件时，前后所有的事件不覆盖，都生效。
//演示1
<button id="bt">点击提交</button>
<script>
var bt = document.getElementById('bt');
// 用onclick给同一个按钮绑定了多个点击事件，只会执行后面那个
bt.onclick = function () {
console.log(1);
}
bt.onclick = function () {
console.log(2);
}
// 用addEventListener给同一个按钮绑定了多个点击事件，所有事件都会执行
bt.addEventListener("click", function (){
console.log(3);
})
bt.addEventListener("click", function (){
console.log(4);
})
</script>
//演示2，要求：在输入框中输入文字后，点击按钮可以无序列表的形式展示成todo清单
<ul id="list"></ul>
<input id="inpu" type="text">
<button id="bt">添加</button>
<script>
var bt = document.getElementById('bt');
var list = document.getElementById('list');
var inpu = document.getElementById('inpu');
bt.onclick = function (){
var li = document.createElement('li'); //创建li标签
list.appendChild(li); //添加li标签到list标签中
li.innerHTML = inpu.value; //将inpu中的值传到li标签中
inpu.value =''; //清空inpu框
};
</script>8.8 事件类型
鼠标事件：onclick（点击，即按下再抬起）、onmouseover（移入）、onmouseout（移出）、onmousemove（移动）、onmousedown（按下）、onmouseup（抬起）
键盘事件：onkeydown（按下）、onkeyup（抬起）、onkeypress（按下抬起）
表单事件：onfocus（聚焦时）、onblur（失去焦点）、onchange（内容改变）、oninput（正在输入）、onsubmit（提交按钮）
状态事件：onload，比如script代码在head中，而html代码在body中时（一般都是上面的代码先执行），此时script代码可能无法获取body中相应的标签，也就无法正常执行下去，用了window.onload后，就可以等html代码全部执行完了再执行script代码，从而保证代码正常执行。（这也就是为什么大部分js文件都默认放在底部的原因）
//window.onload使用方法
<script>
window.onload = function(){
//你想要执行的js代码
}
</script>8.9 js控制css样式
在DOM节点对象上有一个style对象，管理着这个节点的所有样式，而且这些样式可读、可写。对于两个单词拼成的样式，好比 background-color，在获取或设置时，需要将横线去掉，第二个字母大写，即 backgroundColor。
下面是一个用js控制div移动和暂停的实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
<style>
*{
padding: 0;
margin: 0;
}
#box{
border: 2px solid red;
width: 150px;
height: 150px;
position: relative;
text-align: center;
line-height: 150px;
}
</style>
</head>
<body>
<div id="box"><h3>js控制css</h3></div>
<script>
var box = document.getElementById('box');
var distance = 0;
var intID =0;
function move(){
intID = setInterval(function (){
distance += 1;
box.style.left = distance +'px';
},40)
};
//默认方框向右移动
move();
//鼠标悬浮时暂停
box.onmouseover = function () {
clearInterval(intID);
}
//鼠标移开后继续向右移动
box.onmouseout = function () {
move(); //重新调用move函数来恢复移动
}
</script>
</body>
</html>8.10 事件对象
（1）在事件发生时，会产生一个事件对象（event），该对象包含了事件的状态，比如：事件发生的元素、鼠标的位置、键盘的状态等。
（2）在事件处理函数执行时，事件对象将会由浏览器自动传递给事件处理函数。
演示1，在浏览器可用窗口中创建一个div，鼠标在上面点击时可以拖动该div，鼠标未点击时，则无法拖动该div。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
<style>
*{
padding: 0;
margin: 0;
}
#box{
border: 2px solid red;
width: 150px;
height: 150px;
background: #666;
position: relative;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
//在box中按下鼠标执行以下函数
box.onmousedown = function (ev) {
//获取鼠标相对于box的位置
var bx = ev.offsetX;
var by = ev.offsetY;
//鼠标在整个浏览器可用窗口中移动
document.onmousemove = function (e) {
// box以鼠标的位置为参照进行偏移,这样鼠标在box中的任意地方点击就不会回到box左上角了
box.style.left = e.clientX - bx + 'px';
box.style.top = e.clientY - by + 'px';
}
}
box.onmouseup = function () {
document.onmousemove = null;
}
</script>
</body>
</html>（3）事件冒泡，比如：当一个大div中套有一个小div时，如果给两个div都绑定鼠标点击事件，里面那个div的点击事件触发时，外面那个div的点击事件也会触发（这不是我们想要的，因此需要用e.stopPropagation()来阻止外面的事件发生）；而外面的div的点击事件触发时，里面那个div的点击事件并不会触发（这个正常）。
（4）阻止默认行为，比如：我们点击a标签时，默认会往它所指的链接跳转，如果要阻止这种行为，我们可以使用event.preventDefault()。
暂无评论内容