js、day2 函数 rest arguments 作用域 let 内部对象 json date ajax 面向对象编程 bom dom操作（增删改查）
1.1定义函数以及手动规避异常
定义方式1
//自己定义一个绝对值函数
function abs(x){
if(x>= 0){
return x;
}else if(x<0){
return -x;
}
}
-
注意点
-
-
但是没有执行return，函数也会返回结果，结果就是 undefined这点和c还有java不一样
-
定义方式2
var abs = function(x){
if(x>= 0){
return x;
}else if(x<0){
return -x;
}
}
-
方法1和方法2等价。
假设不存在参数，如何规避
//自己定义一个绝对值函数
function abs(x){
if(typeof x!=='number'){
throw 'not a number';
}
if(x>= 0){
return x;
}else if(x<0){
return -x;
}
}
1.2arguments
这是一个js免费赠送的关键字
function abs(x){
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
//假如我传的是20,10,30，这个关键字，就会自动生成一个数组，将我传入的东西保存
结果：
abs(3,4,234,234,24)
text4.html:9 3
text4.html:9 4
2text4.html:9 234
text4.html:9 24
1.3rest
es6新特性,获取·除了已经定义的参数之外的所有参数
比如上面的function abs 函数，我定义了x，name就会除了第一个数据，都录入
function add(a,b,rest){
console.log('a'+a);
console.log('b'+b);
console.log(rest);
}
add(2,43,342,53453,123123)
text4.html:22 a2
text4.html:23 b43
text4.html:24 (3) [342, 53453, 123123]
-
注意事项
-
只能写在最后面，必须用...
-
1.4id和方法函数
将按钮都总结为一个函数，onclick里面放的就是函数
//定义一个函数，第一个值传的是id，第二个值传的是方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
border: 0;
}
#change{
width: 400px;
height: 450px;
margin: 0 auto;
text-align: center;
padding: 5px;
background: aqua;
border-radius: 5px;
}
/*button{*/
/* border-radius: 5px;*/
/*}*/
</style>
<script>
// var pre = document.getElementById("pre");
// pre.onclick=function (){
// //这里数组的话千万不能忘记了是0
// if (count===0){
// alert("已经是到头了")
// count=1;
// }
// count--;
// document.getElementsByTagName("img")[0].src=imgArrays[count];
// tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
// };
function btnAll(id,func){
var btn = document.getElementById(id);
btn.onclick=func;
}
window.onload=function (){
var count = 0;
var tip = document.getElementsByTagName("p")[0];
//这里因为是变成一个数组
var imgArrays = ["image/1.jpeg","image/2.jpeg","image/3.jpeg","image/4.jpeg"];
var img = document.getElementsByTagName("img")[0];
tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
//也可以像之前一样 先var bnt1 = document.getElementById("pre")；
// 再bnt1.onclick = 方法 也可以
btnAll("pre",function (){ if (count===0){
alert("已经是到头了")
count=1;
}
count--;
document.getElementsByTagName("img")[0].src=imgArrays[count];
tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
});
btnAll("next",function (){
if (count===imgArrays.length-1){
alert("已经是到头了")
count=imgArrays.length-2;
}
count++;
img.src=imgArrays[count];
tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
})
// var pre = document.getElementById("pre");
// pre.onclick=function (){
// //这里数组的话千万不能忘记了是0
// if (count===0){
// alert("已经是到头了")
// count=1;
// }
// count--;
// document.getElementsByTagName("img")[0].src=imgArrays[count];
// tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
// };
// var next = document.getElementById("next");
// next.onclick=function (){
// //和上面的区别是一种方法的两种表达方式
// if (count===imgArrays.length-1){
// alert("已经是到头了")
// count=imgArrays.length-2;
// }
// count++;
// img.src=imgArrays[count];
// tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
// };
};
</script>
</head>
<body>
<div id="change">
<p></p>
<img src="image/1.jpeg" alt="好看的图" title = "悬停文字">
<button id="pre">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
2.作用域，变量的作用域
和c语言大致相同，尽量将变量的定义放在头部，便于代码维护
2.1全局变量
-
var x = 1;
-
定义全局变量
-
默认全局变量，都会自动绑定下window下
-
alert（x）等价于alert（window.x）
2.2规范
由于我们的所有的全局变量都会绑定到我们的windows上，如果不同的js文件产生了相同的全局变量，就会产生冲突，-》如何减少冲突，所以就要定义唯一全局变量
//唯一全局变量
var kuangshen = {};
//定义全局变量
kuangshen.name = 'kuangshen';
kuangshen.add = function (a,b){
return a+b;
}
-
将自己的代码全部放入自己定义的唯一名字中，降低全局命名冲突的问题
-
后来会学到jQuery jQuery.方法（这个还给自己用了一个简化符号，就是$）
2.3let（局部变量）
function aj(){
for (var i = 0; i < 10; i++) {
console.log(i);
}
console.log(i+1);//最后输出了11，说明出了他的作用域，还是生效，所以这里应该采用let来定义
}
2.4常量 const
在es6之间，都用全部大写字母来定义
3.对象里面的方法
var raoxin = {
name:'raoxin',
time:2000,
age:function(){
let now = new Date().getFullYear();//获取今年的年份
return now-this.time;
},
sex:'女'
}
3.1apply函数
在js中可以控制this的指向
function getAge(){
let now = new Date().getFullYear();//获取今年的年份
return now-this.time;
}
var raoxin = {
name:'raoxin',
time:2000,
age:getAge,//这里不需要括号，将这个方法拆开写
sex:'男'
}
//这里直接调用raoxin.age是可以使用的，但是调用不了getAge()因为，这个方法是在window下的，这个this指向的就是windows,但是windows并没有定义time
getAge.apply(raoxin,[]);//js中可以控制this的指向，使用apply这里指向的是raoxin这个对象，参数为空，这样的话getAge这个函数的this就有了指向对象
4.内部对象
标准对象 通过type of 判断是什么类型
typeof true;
'boolean'
typeof NaN;
'number'
4.1Date
var nowTime = new Date();
console.log(nowTime);//打印出来现在的时间
结果：Sun Apr 10 2022 16:45:58 GMT+0800 (中国标准时间)
nowTime.getFullYear();//年月日 星期几 小时 秒
nowTime.getMonth();
nowTime.getDate();
nowTime.getDay();
nowTime.getHours();
nowTime.getMilliseconds();
nowTime.getTime();//时间戳 全世界统一 从1970年1.1日开始计时 毫秒数
//简单使用时间戳，将时间戳传入其中就可以使它变为标准时间，如下程序，以为自己电脑的时间是可以修改的，不够准确
nowTime.getTime();
1649580358216
console.log(new Date(1649580358216))
VM284:1 Sun Apr 10 2022 16:45:58 GMT+0800 (中国标准时间)
nowTime.toLocaleDateString()//当地时间
'2022/4/10'
4.2JSON(重要)
JSON 全称“JavaScript Object Notation”，译为“JavaScript 对象简谱”或“JavaScript 对象表示法”，是一种轻量级的、基于文本的、开放的数据交换格式。JSON 在 Web 开发领域有着举足轻重的地位，如果您想在 Web 开发领域大展身手的话，就必须了解 JSON。
-
在Javascript中一切皆为对象、任何js支持的类型都可以用json来表示
-
格式
-
对象都用{}
-
数组都用[]
-
所有的键值对都用key：value
-
//定义一个对象，怎么判断他是一个对象呢，可以输出一下，也可以使用typeof，她会返回一个 object
//从而判断他就是对象
let user = {
name:'raoxin',
age:18,
time:2000
}
console.log(user);
//{name: 'raoxin', age: 18, time: 2000}和下面的json格式相比可以展开，并且name之类的没有双引号
//将对象转化为json字符串
let userJson = JSON.stringify(user);
//console.log(userjson)
// VM268:1 {"name":"raoxin","age":18,"time":2000}
let obj = JSON.parse('{"name":"raoxin","age":18,"time":2000}');
//console.log(obj)
// VM421:1 {name: 'raoxin', age: 18, time: 2000}
json和js对象的区别
-
json
-
{"name":"raoxin","age":18,"time":2000}
-
-
js
-
{name: 'raoxin', age: 18, time: 2000}
-
4.3Ajax
-
原生的js写法 xhr异步请求
-
jQuery封装好的方法 $(#name).ajax("")
-
axios请求
5.面向对象编程
5.1什么是面向对象
JavaScript、java、c#中都有面向对象；JavaScript有些区别
-
类：模板
-
对象：具体的实例
在JavaScript中需要大家转换一下思维方式
5.2原型（相当于继承）
原型：
let person = {
name:'raoxin',
time:2000,
sex:'男',
run:function (){
console.log(this.name+'run')
}
}
let xiaoming = {
name: 'xiaoming'
}
//相当于java里面的继承，这里叫做person是xiaoming的原型，简单理解为父类
xiaoming.__proto__=person;
5.3class继承（es6中引入）
//定义一个学生的类
class students{
constructor(name) {
name = this.name;
}
//一个方法，连function都不要
run(){
alert('hello');
}
}
//这样小学生就继承了学生的方法，这里没有搞懂super（name）的用处,所以改了一下变成注释的样子
//class pupil extends students{
//
// constructor(name,mygrade) {
// super();
// this.name= name;
// this.myGrade = mygrade;
// }
// myGra(){
// alert('我是一名小学生');
// }
// }
class pupil extends students{
constructor(name,mygrade) {
super(name);
this.myGrade = mygrade;
}
myGrade(){
alert('我是一名小学生');
}
}
let xiaohong = new students("xiaoming");
let xiaoming = new students("xiaohong",1);
xiaohong.run();
xiaoming.run();
5.4super理解
//定义一个学生的类
class students{
constructor(name) {
this.name =name;
console.log(name);
}
//一个方法，连function都不要
run(){
alert('hello');
}
}
//这样小学生就继承了学生的方法
class pupil extends students{
constructor(name,mygrade) {
super('xiaoming');
// this.name= name;
this.myGrade = mygrade;
}
myGra(){
alert('我是一名小学生');
}
}
let xiaoming = new pupil("xiao",1);
//这样子出现的就是xiaoming.name就是xioaming，而不是xiao因为子类将xiaoming赋值给了name
let xiaohong = new students("fdjalfjlas");
xiaohong.run();
xiaoming.run();
// console.log(xiaoming);
// console.log(xiaohong);
6.BOM操作
B就是浏览器 browse o是object m是model 浏览器对象模型
6.1浏览器内核，以及三方
-
浏览器内核
-
chrome
-
safari
-
firefox
-
opera
-
ie-6-11
-
-
三方（和内核不同，这个就是可以换内核）
-
qq浏览器
-
360浏览器
-
搜狗浏览器
-
6.2windows常用操作
window
-
window代表 浏览器窗口
//显示浏览器的宽和高
window.innerHeight
754
window.innerWidth
982
window.outerHeight
824
window.outerWidth
1536
window.innerHeight
754
window.innerWidth
428
6.3简单认识navigator对象
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36'
navigator.platform
'Win32'
//现在一般不用这个，因为这个是可以个人修改的
6.4简单认识screen对象
screen.height
864
screen.width
1536
6.5location对象 比较重要
代表当前页面的url信息
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/?tn=44004473_21_oem_dg"
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"
reload: ƒ reload()
location.assign('wangzhi')//这样百度就会跳转到你所设定的链接中
6.6document重要
代表当前页面，html dom文档树
document.title = 'raoxin';
//这样最上面的导航栏名字就会变成这个
<dl id= "course">
<dt>213</dt>
<dd>3213</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>
<dl id="cour">
<dt>ewfwe</dt>
<dd>3fdsf</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>
<script>
function dl(x){
return document.getElementById(x);
}
// let dl = document.getElementById('course');
// 也可以byclass这类的信息
</script>
cookie
document.cookie//cookie是客户端的一些本地信息
document.cookie
'BIDUPSID=4DC84DFF01DEDF2C5B13D2779CF7F617; PSTM=1647496651; BD_UPN=12314753; BAIDUID=E055E0CB34625545A9078EC89B8D3821:FG=1; H_PS_PSSID=26350; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; delPer=0; BD_CK_SAM=1; PSINO=3; BDRCVFR[QH_jv-D1QKs]=I9fPaKsGu1_UgP8QhP8; BD_HOME=1; BA_HECTOR=010584248h0k24855e1h57jn60q; BDSVRTM=0; BAIDUID_BFESS=A3B3877DF747692F6726812F09825AA6:FG=1'
-
劫持cookie原理
-
假设写了一段js代码里面包含document.cookie
-
再使用ajax请求到它的服务器上，就被劫持信息
-
假如你登入淘宝，但是你登上去以后发现，天猫不用重新登陆，因为它获得了你的cookie，你可以在右上角清空，这样就不行了
-
-
解决办法，服务器端设置httponly（代表只读）
可以获取具体的文档树节点
-
这样就能动态的删除节点和修改节点
6.7history
代表浏览器的历史记录
history.back();//后退
history.forward();//前进
7.操作DOM
文档对象模型 核心：整个浏览器就是一个dom树形结构
动态的操作网页中的元素
-
更新：更新dom节点
-
遍历dom节点：得到dom节点
-
删除：删除一个dom节点
-
添加：添加一个新的节点
需要操作don节点，必须获得这个dom节点
7.1get三个方法
<body>
<h1>biaoqian</h1>
<!-- <h1>shabi</h1>-->
<dl id= "course">
<dt>213</dt>
<dd>3213</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>
<dl class="cour">
<dt>ewfwe</dt>
<dd>3fdsf</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>
<script>
//对应css的选择器
var h1 = document.getElementById('course');//id一个元素节点对像
var h2= document.getElementsByClassName('cour');//类名，获得一组元素节点对象
var h3 = document.getElementsByTagName('dl');//标签名字，获得一组元素对象
7.1.1查询节点的子节点
id名字（或者类名标签名）.children就是获得所有的子节点
id名字（或者类名标签名）.firstchild（）
id名字（或者类名标签名）.lastchild（）
id名字（或者类名标签名）.next（）
-
注意事项
-
这些都是原生代码，我们之后尽量使用jquery
-
7.2更新节点 增删改查
innerHTML()就是该文本内容
var btn1 = document.getElementById("btn1");
console.log(btn1);
console.log(btn1.innerHTML);
btn1.innerHTML = "这不是一个按钮";
/*
* 首先是获取这个元素
* 然后修改它的文本内容
* */
//这是输出结果 <button id="btn1">这是第一个按钮</button>
// 这是第一个按钮
7.3事件
比如说点击按钮就是一个事件 关闭网页，晃鼠标都是事件，发生事件以后要有行为处理事件
假如是点击一次可以发生的行为我们知道，但是其他行为发生我们如何知道呢，那就是查看w3c文档的事件就可以查看
按钮
<button id="btn1" onclick="alert('讨厌，点我干嘛')">这是第一个按钮</button>
7.4切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
border: 0;
}
#change{
width: 400px;
height: 430px;
margin: 0 auto;
text-align: center;
padding: 5px;
background: aqua;
border-radius: 5px;
}
/*button{*/
/* border-radius: 5px;*/
/*}*/
</style>
<script>
window.onload=function (){
//这里因为是变成一个数组
var img = document.getElementsByTagName("img")[0];
var next = document.getElementById("next");
//也可以像之前一样 先var bnt1 = document.getElementById("pre")；
// 再bnt1.onclick = 方法 也可以
document.getElementById("pre").onclick=function (){
//这里数组的话千万不能忘记了是0
document.getElementsByTagName("img")[0].src="image/1.jpeg";
};
next.onclick=function (){
//和上面的区别是一种方法的两种表达方式
img.src="image/3.jpeg";
};
};
</script>
</head>
<body>
<div id="change">
<img src="image/2.jpeg" alt="好看的图" title = "悬停文字">
<button id="pre">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
7.5切换图片改善
改为到头有提示，并且显示一共几张图片，这是第几张
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
border: 0;
}
#change{
width: 400px;
height: 450px;
margin: 0 auto;
text-align: center;
padding: 5px;
background: aqua;
border-radius: 5px;
}
/*button{*/
/* border-radius: 5px;*/
/*}*/
</style>
<script>
window.onload=function (){
var tip = document.getElementsByTagName("p")[0];
var count = 0;
//这里因为是变成一个数组
var imgArrays = ["image/1.jpeg","image/2.jpeg","image/3.jpeg","image/4.jpeg"];
var img = document.getElementsByTagName("img")[0];
var next = document.getElementById("next");
tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
//也可以像之前一样 先var bnt1 = document.getElementById("pre")；
// 再bnt1.onclick = 方法 也可以
document.getElementById("pre").onclick=function (){
//这里数组的话千万不能忘记了是0
if (count===0){
alert("已经是到头了")
count=1;
}
count--;
document.getElementsByTagName("img")[0].src=imgArrays[count];
tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
};
next.onclick=function (){
//和上面的区别是一种方法的两种表达方式
if (count===imgArrays.length-1){
alert("已经是到头了")
count=imgArrays.length-2;
}
count++;
img.src=imgArrays[count];
tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
};
};
</script>
</head>
<body>
<div id="change">
<p></p>
<img src="image/1.jpeg" alt="好看的图" title = "悬停文字">
<button id="pre">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
7.6文档加载顺序
文档是自上而下加载的
</head>
<body>
<button id="btn1" >这是第一个按钮</button>
<script>
var btn1 = document.getElementById("btn1");
btn1.onclick= function (){
alert('zheshisha');
}
// 这里放在body里面说是因为加载顺序是从上而下加载的，如果还放在head里面，这个function就会失效，放在head里面就获取不到他的id
</script>
7.6.1解决办法
-
想要文件自上而下执行，又不将上一段代码报错，那就要使用onload事件，就是在页面加载完毕后，再加载此段代码
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function (){
var btn1 = document.getElementById("btn1");
btn1.onclick= function () {
alert('zheshisha');
};
// 本来这里放在body里面说是因为加载顺序是从上而下加载的，如果还放在head里面，这个function就会失效
// 但是这里放了onload，
}
</script>
</head>
<body>
<button id="btn1" >这是第一个按钮</button>
</body>
7.7全选全不选联系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**{*/
/* margin: 0;*/
/*}*/
#form{
height: 131px;
width: 250px;
margin: 5px auto;
text-align: center;
background-color: aqua;
padding: 5px;
border:3px black solid;
border-radius: 6px;
/*border-color: black;*/
}
</style>
<script>
function ifCheck(x,y){
if (x===1){
document.getElementsByName("item")[y].checked=true;
}else if(x===0){
document.getElementsByName("item")[y].checked=false;
}else {
alert("只能填0或1");}
}
window.onload = function (){
var btn = document.getElementsByTagName("button");
btn[0].onclick =function (){
for (let i = 0; i < 4; i++) {
ifCheck(1,i);
}
};
btn[1].onclick =function (){
for (let i = 0; i < 4; i++) {
ifCheck(0,i);
}
};
}
</script>
</head>
<body>
<div >
<form action="#" method="get" id ="form">
<p>你爱好的运动是 <input type="checkbox" value="all">/<input type="checkbox" value="noone">全不选</p>
<p><input type="checkbox" value="basketball" name="item" id="jdf"/>篮球
<input type="checkbox" value="football" name="item"/>足球
<input type="checkbox" value="pingpong" name="item"/>乒乓球
<input type="checkbox" value="bangball" name="item"/>棒球</p>
<p>
<button type="button">全选</button>
<button type="button">全不选</button>
<button type="button">反选</button>
<input type="submit">
</p>
</form>
</div>
</body>
</html>
7.7.1出现了一闪一闪的问题
-
描述
-
点击全选按钮时出现了选中一瞬间的问题，
-
解决：button按钮的type默认是submit会是提交，只需要将他的type改成button就可以了
-
7.8dom操作补充
-
想要获取body属性
-
原本是var body = document.getElementsByTagName("body")[0];
-
但是因为document中保存有body，可以var body = document.body；
-
-
document.documentelement是html的根标签
7.9dom增删改
| createAttribute() | 创建属性节点。 |
|---|---|
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| appendChild() | 把新的子节点添加到指定节点。 |
增
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li{
list-style: none;
line-height: 30px;
}
div{
height: 158px;
width: 113px;
border: black solid 2px;
margin: 0 auto;
border-radius: 3px;
}
</style>
<script>
window.onload = function (){
//创建元素节点
var cra_ele = document.createElement("li");
// 创建文本内容
var cra_txt = document.createTextNode("这是什么意思")
var uladdli = document.getElementsByTagName("ul");
// lastchild[2].appendChild(cra_txt);
// 这句话是在第三个li中加了这是说明意思
//在body的最后加了一个节点
//appendChild是在父节点里面的最后一个子节点后面添加
uladdli[0].appendChild(cra_ele);
var ullast = document.getElementById("ul").lastChild;
console.log(ullast);
//这两种方法都可以将文本添加到最后一个li标签中
// ullast.appendChild(cra_txt);
ullast.innerHTML = "shabi";
};
</script>
</head>
<body>
<div>
<ul id="ul">
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
</div>
</body>
</html>
删
removeChild()
删除子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 0 auto;
border: black solid 2px;
border-radius: 5px;
height: 238px;
width: 269px;
text-align: center;
}
table,tr,td{
border: black 1px solid;
text-align: center;
}
table{
width: 268px;
}
</style>
<script>
//定义函数，点击以后，获取id，
function myClick(id,func){
var btn = document.getElementById(id);
btn.onclick=func;
}
//点击提交按钮后，添加一行
window.onload= function (){
var allA = document.getElementsByTagName("a");
for (let i = 0; i < allA.length; i++) {
allA[i].onclick = function (){
this.parentElement.parentElement.remove();
// alert(allA.length);
//这里不能使用allA[i],因为这样子删了第一行，第二行就变为第一行。
/*
* 假如说本来有两行
* 第一行是allA[0]
* 第二行是allA[1]
* 如果我把这里的this换成allA
* 首先我删除第一行的时候，那么alla[1]就会变成allA[0]
* 那么我原本赋值给allA[1]的函数就会失效
* 他的超链接就会变成跳转函数，所以，会刷新自身的页面
* 我将a改为<a href="javascript:;" >delete</a>；来验证
* 发现果然先删除第一行以后这个方法就失效了
* */
/*
* 点击超链接以后会默认跳转，我们不希望出现默认行为
* 可以通过响应函数最后加一个添加return false来取消默认行为
* */
return false;
// 或者在超链接中<a href="javascript:;" >delete</a> 也可以不跳转
}
}
</script>
</head>
<body>
<div>
<table id="table">
<tr>
<td>Name</td>
<td>Email</td>
<td>Salary</td>
<td></td>
</tr>
<tr>
<td>Tom</td>
<td>fjaldf@jflsd</td>
<td>5000</td>
<td><a href="javascript:;" >delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>dfaf@fjalfj</td>
<td>1515</td>
<td><a href="javascript:;" >delete</a></td>
</tr>
</table>
</div>
<div>
<h1>添加新员工</h1>
<form action="#" method="get">
<p>name:<input type="text" name="name"></p>
<p>email:<input type="email" name="email"></p>
<p>salary:<input type="number" name="salary"></p>
<button id="btn1">提交</button>
</form>
</div>
</body>
</html>
删中遇到的问题
-
首先就是删除第一行以后，再点第一行就会刷新或者，没用，查看了以后发现是allA[I]的问题，在上面用this就解决了
增删方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 0 auto;
border: black solid 2px;
border-radius: 5px;
height: 238px;
width: 269px;
text-align: center;
}
table,tr,td{
border: black 1px solid;
text-align: center;
}
table{
width: 268px;
}
</style>
<script>
//定义函数，点击以后，获取id，
function myClick(id,func){
var btn = document.getElementById(id);
btn.onclick=func;
}
//点击提交按钮后，添加一行
window.onload= function (){
/*这里是添加delet的功能，
点击delete删除改行的内容，
并且删除之前弹出提示框是
否要删除不删除的话可以取消*/
var allA = document.getElementsByTagName("a");
for (let i = 0; i < allA.length; i++) {
allA[i].onclick = function (){
if(confirm("你确定要删除吗！")===true){
this.parentElement.parentElement.remove();
}
// alert(allA.length);
//这里不能使用allA[i],因为这样子删了第一行，第二行就变为第一行。
/*
* 假如说本来有两行
* 第一行是allA[0]
* 第二行是allA[1]
* 如果我把这里的this换成allA
* 首先我删除第一行的时候，那么alla[1]就会变成allA[0]
* 那么我原本赋值给allA[1]的函数就会失效
* 他的超链接就会变成跳转函数，所以，会刷新自身的页面
* 我将a改为<a href="javascript:;" >delete</a>；来验证
* 发现果然先删除第一行以后这个方法就失效了
* */
/*
* 点击超链接以后会默认跳转，我们不希望出现默认行为
* 可以通过响应函数最后加一个添加return false来取消默认行为
* */
return false;
// 或者在超链接中<a href="javascript:;" >delete</a> 也可以不跳转
}
}
myClick("btn1",function (){
//首先是获取各个文本框的内容
var name_text = document.getElementById("inpuname").value;
var email_text = document.getElementById("inpuemail").value;
var salary_text = document.getElementById("inpusalary").value;
//获取table节点
var table = document.getElementById("table");
//创建新的一行的元素所需内容
var childtr = document.createElement("tr");
var childtd1 = document.createElement("td");
var childtd2 = document.createElement("td");
var childtd3 = document.createElement("td");
var childtd4 = document.createElement("td");
var childA = document.createElement("a");
//要设置节点的属性
// childtr.innerHTML = "shabi";
// table.appendChild(childtr);
table.appendChild(childtr).appendChild(childtd1).innerHTML=name_text;
table.appendChild(childtr).appendChild(childtd2).innerHTML=email_text;
table.appendChild(childtr).appendChild(childtd3).innerHTML=salary_text;
table.appendChild(childtr).appendChild(childtd4).appendChild(childA).innerHTML="delete";
//首先获取该链接的节点,想要给a添加属性，方法1
var atribution = document.getElementsByTagName("a");
// 然后创建该链接的节点属性以及赋值
// var typ = document.createAttribute("href");
// typ.nodeValue = "javascript:;";
atribution[atribution.length-1].setAttribute("href","javascript:;");
//方法2.两种方法都可以
// atribution[atribution.length-1].href = "javascript:;";
var allA = document.getElementsByTagName("a");
for (let i = 0; i < allA.length; i++) {
allA[i].onclick = function () {
if (confirm("你确定要删除吗！") === true) {
this.parentElement.parentElement.remove();
}}}
})
};
</script>
</head>
<body>
<div>
<table id="table">
<tr>
<td>Name</td>
<td>Email</td>
<td>Salary</td>
<td></td>
</tr>
<tr>
<td>Tom</td>
<td>fjaldf@jflsd</td>
<td>5000</td>
<td><a href="javascript:;" >delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>dfaf@fjalfj</td>
<td>1515</td>
<td><a href="javascript:;" >delete</a></td>
</tr>
</table>
</div>
<div>
<h1>添加新员工</h1>
<form action="#" method="get">
<p>name:<input type="text" name="name" id="inpuname"></p>
<!-- 文本框中的内容就是value-->
<p>email:<input type="email" name="email" id="inpuemail"></p>
<p>salary:<input type="number" name="salary" id="inpusalary"></p>
<button id="btn1" type="button">提交</button>
</form>
</div>
</body>
</html>
增删方法二
这个方法简单很多。。。。。。
//创建新的一行的元素所需内容
var childtr = document.createElement("tr");
childtr.innerHTML = "<td>"+name_text+"</td>"+
"<td>"+email_text+"</td>"+
"<td>"+salary_text+"</td>"+
"<td><a href='javascript:;' >delete</a></td>";
table.appendChild(childtr);
替换
replacechild（）
8.this
btn[2].onclick =function (){
alert(this);
alert(this===btn[2]);
// 结果是true，所以说明这个this在函数中是
//在事件的响应函数中，响应函数是给谁绑定的，this就是谁
};btn[1].onclick =function (){
for (let i = 0; i < 4; i++) {
ifCheck(0,i);
}
};
1.1定义函数以及手动规避异常
定义方式1
//自己定义一个绝对值函数
function abs(x){
if(x>= 0){
return x;
}else if(x<0){
return -x;
}
}
-
注意点
-
-
但是没有执行return，函数也会返回结果，结果就是 undefined这点和c还有java不一样
-
定义方式2
var abs = function(x){
if(x>= 0){
return x;
}else if(x<0){
return -x;
}
}
-
方法1和方法2等价。
假设不存在参数，如何规避
//自己定义一个绝对值函数
function abs(x){
if(typeof x!=='number'){
throw 'not a number';
}
if(x>= 0){
return x;
}else if(x<0){
return -x;
}
}
1.2arguments
这是一个js免费赠送的关键字
function abs(x){
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
//假如我传的是20,10,30，这个关键字，就会自动生成一个数组，将我传入的东西保存
结果：
abs(3,4,234,234,24)
text4.html:9 3
text4.html:9 4
2text4.html:9 234
text4.html:9 24
1.3rest
es6新特性,获取·除了已经定义的参数之外的所有参数
比如上面的function abs 函数，我定义了x，name就会除了第一个数据，都录入
function add(a,b,rest){
console.log('a'+a);
console.log('b'+b);
console.log(rest);
}
add(2,43,342,53453,123123)
text4.html:22 a2
text4.html:23 b43
text4.html:24 (3) [342, 53453, 123123]
-
注意事项
-
只能写在最后面，必须用...
-
1.4id和方法函数
将按钮都总结为一个函数，onclick里面放的就是函数
//定义一个函数，第一个值传的是id，第二个值传的是方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
border: 0;
}
#change{
width: 400px;
height: 450px;
margin: 0 auto;
text-align: center;
padding: 5px;
background: aqua;
border-radius: 5px;
}
/*button{*/
/* border-radius: 5px;*/
/*}*/
</style>
<script>
// var pre = document.getElementById("pre");
// pre.onclick=function (){
// //这里数组的话千万不能忘记了是0
// if (count===0){
// alert("已经是到头了")
// count=1;
// }
// count--;
// document.getElementsByTagName("img")[0].src=imgArrays[count];
// tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
// };
function btnAll(id,func){
var btn = document.getElementById(id);
btn.onclick=func;
}
window.onload=function (){
var count = 0;
var tip = document.getElementsByTagName("p")[0];
//这里因为是变成一个数组
var imgArrays = ["image/1.jpeg","image/2.jpeg","image/3.jpeg","image/4.jpeg"];
var img = document.getElementsByTagName("img")[0];
tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
//也可以像之前一样 先var bnt1 = document.getElementById("pre")；
// 再bnt1.onclick = 方法 也可以
btnAll("pre",function (){ if (count===0){
alert("已经是到头了")
count=1;
}
count--;
document.getElementsByTagName("img")[0].src=imgArrays[count];
tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
});
btnAll("next",function (){
if (count===imgArrays.length-1){
alert("已经是到头了")
count=imgArrays.length-2;
}
count++;
img.src=imgArrays[count];
tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
})
// var pre = document.getElementById("pre");
// pre.onclick=function (){
// //这里数组的话千万不能忘记了是0
// if (count===0){
// alert("已经是到头了")
// count=1;
// }
// count--;
// document.getElementsByTagName("img")[0].src=imgArrays[count];
// tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
// };
// var next = document.getElementById("next");
// next.onclick=function (){
// //和上面的区别是一种方法的两种表达方式
// if (count===imgArrays.length-1){
// alert("已经是到头了")
// count=imgArrays.length-2;
// }
// count++;
// img.src=imgArrays[count];
// tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
// };
};
</script>
</head>
<body>
<div id="change">
<p></p>
<img src="image/1.jpeg" alt="好看的图" title = "悬停文字">
<button id="pre">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
2.作用域，变量的作用域
和c语言大致相同，尽量将变量的定义放在头部，便于代码维护
2.1全局变量
-
var x = 1;
-
定义全局变量
-
默认全局变量，都会自动绑定下window下
-
alert（x）等价于alert（window.x）
2.2规范
由于我们的所有的全局变量都会绑定到我们的windows上，如果不同的js文件产生了相同的全局变量，就会产生冲突，-》如何减少冲突，所以就要定义唯一全局变量
//唯一全局变量
var kuangshen = {};
//定义全局变量
kuangshen.name = 'kuangshen';
kuangshen.add = function (a,b){
return a+b;
}
-
将自己的代码全部放入自己定义的唯一名字中，降低全局命名冲突的问题
-
后来会学到jQuery jQuery.方法（这个还给自己用了一个简化符号，就是$）
2.3let（局部变量）
function aj(){
for (var i = 0; i < 10; i++) {
console.log(i);
}
console.log(i+1);//最后输出了11，说明出了他的作用域，还是生效，所以这里应该采用let来定义
}
2.4常量 const
在es6之间，都用全部大写字母来定义
3.对象里面的方法
var raoxin = {
name:'raoxin',
time:2000,
age:function(){
let now = new Date().getFullYear();//获取今年的年份
return now-this.time;
},
sex:'女'
}
3.1apply函数
在js中可以控制this的指向
function getAge(){
let now = new Date().getFullYear();//获取今年的年份
return now-this.time;
}
var raoxin = {
name:'raoxin',
time:2000,
age:getAge,//这里不需要括号，将这个方法拆开写
sex:'男'
}
//这里直接调用raoxin.age是可以使用的，但是调用不了getAge()因为，这个方法是在window下的，这个this指向的就是windows,但是windows并没有定义time
getAge.apply(raoxin,[]);//js中可以控制this的指向，使用apply这里指向的是raoxin这个对象，参数为空，这样的话getAge这个函数的this就有了指向对象
4.内部对象
标准对象 通过type of 判断是什么类型
typeof true;
'boolean'
typeof NaN;
'number'
4.1Date
var nowTime = new Date();
console.log(nowTime);//打印出来现在的时间
结果：Sun Apr 10 2022 16:45:58 GMT+0800 (中国标准时间)
nowTime.getFullYear();//年月日 星期几 小时 秒
nowTime.getMonth();
nowTime.getDate();
nowTime.getDay();
nowTime.getHours();
nowTime.getMilliseconds();
nowTime.getTime();//时间戳 全世界统一 从1970年1.1日开始计时 毫秒数
//简单使用时间戳，将时间戳传入其中就可以使它变为标准时间，如下程序，以为自己电脑的时间是可以修改的，不够准确
nowTime.getTime();
1649580358216
console.log(new Date(1649580358216))
VM284:1 Sun Apr 10 2022 16:45:58 GMT+0800 (中国标准时间)
nowTime.toLocaleDateString()//当地时间
'2022/4/10'
4.2JSON(重要)
JSON 全称“JavaScript Object Notation”，译为“JavaScript 对象简谱”或“JavaScript 对象表示法”，是一种轻量级的、基于文本的、开放的数据交换格式。JSON 在 Web 开发领域有着举足轻重的地位，如果您想在 Web 开发领域大展身手的话，就必须了解 JSON。
-
在Javascript中一切皆为对象、任何js支持的类型都可以用json来表示
-
格式
-
对象都用{}
-
数组都用[]
-
所有的键值对都用key：value
-
//定义一个对象，怎么判断他是一个对象呢，可以输出一下，也可以使用typeof，她会返回一个 object
//从而判断他就是对象
let user = {
name:'raoxin',
age:18,
time:2000
}
console.log(user);
//{name: 'raoxin', age: 18, time: 2000}和下面的json格式相比可以展开，并且name之类的没有双引号
//将对象转化为json字符串
let userJson = JSON.stringify(user);
//console.log(userjson)
// VM268:1 {"name":"raoxin","age":18,"time":2000}
let obj = JSON.parse('{"name":"raoxin","age":18,"time":2000}');
//console.log(obj)
// VM421:1 {name: 'raoxin', age: 18, time: 2000}
json和js对象的区别
-
json
-
{"name":"raoxin","age":18,"time":2000}
-
-
js
-
{name: 'raoxin', age: 18, time: 2000}
-
4.3Ajax
-
原生的js写法 xhr异步请求
-
jQuery封装好的方法 $(#name).ajax("")
-
axios请求
5.面向对象编程
5.1什么是面向对象
JavaScript、java、c#中都有面向对象；JavaScript有些区别
-
类：模板
-
对象：具体的实例
在JavaScript中需要大家转换一下思维方式
5.2原型（相当于继承）
原型：
let person = {
name:'raoxin',
time:2000,
sex:'男',
run:function (){
console.log(this.name+'run')
}
}
let xiaoming = {
name: 'xiaoming'
}
//相当于java里面的继承，这里叫做person是xiaoming的原型，简单理解为父类
xiaoming.__proto__=person;
5.3class继承（es6中引入）
//定义一个学生的类
class students{
constructor(name) {
name = this.name;
}
//一个方法，连function都不要
run(){
alert('hello');
}
}
//这样小学生就继承了学生的方法，这里没有搞懂super（name）的用处,所以改了一下变成注释的样子
//class pupil extends students{
//
// constructor(name,mygrade) {
// super();
// this.name= name;
// this.myGrade = mygrade;
// }
// myGra(){
// alert('我是一名小学生');
// }
// }
class pupil extends students{
constructor(name,mygrade) {
super(name);
this.myGrade = mygrade;
}
myGrade(){
alert('我是一名小学生');
}
}
let xiaohong = new students("xiaoming");
let xiaoming = new students("xiaohong",1);
xiaohong.run();
xiaoming.run();
5.4super理解
//定义一个学生的类
class students{
constructor(name) {
this.name =name;
console.log(name);
}
//一个方法，连function都不要
run(){
alert('hello');
}
}
//这样小学生就继承了学生的方法
class pupil extends students{
constructor(name,mygrade) {
super('xiaoming');
// this.name= name;
this.myGrade = mygrade;
}
myGra(){
alert('我是一名小学生');
}
}
let xiaoming = new pupil("xiao",1);
//这样子出现的就是xiaoming.name就是xioaming，而不是xiao因为子类将xiaoming赋值给了name
let xiaohong = new students("fdjalfjlas");
xiaohong.run();
xiaoming.run();
// console.log(xiaoming);
// console.log(xiaohong);
6.BOM操作
B就是浏览器 browse o是object m是model 浏览器对象模型
6.1浏览器内核，以及三方
-
浏览器内核
-
chrome
-
safari
-
firefox
-
opera
-
ie-6-11
-
-
三方（和内核不同，这个就是可以换内核）
-
qq浏览器
-
360浏览器
-
搜狗浏览器
-
6.2windows常用操作
window
-
window代表 浏览器窗口
//显示浏览器的宽和高
window.innerHeight
754
window.innerWidth
982
window.outerHeight
824
window.outerWidth
1536
window.innerHeight
754
window.innerWidth
428
6.3简单认识navigator对象
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36'
navigator.platform
'Win32'
//现在一般不用这个，因为这个是可以个人修改的
6.4简单认识screen对象
screen.height
864
screen.width
1536
6.5location对象 比较重要
代表当前页面的url信息
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/?tn=44004473_21_oem_dg"
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"
reload: ƒ reload()
location.assign('wangzhi')//这样百度就会跳转到你所设定的链接中
6.6document重要
代表当前页面，html dom文档树
document.title = 'raoxin';
//这样最上面的导航栏名字就会变成这个
<dl id= "course">
<dt>213</dt>
<dd>3213</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>
<dl id="cour">
<dt>ewfwe</dt>
<dd>3fdsf</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>
<script>
function dl(x){
return document.getElementById(x);
}
// let dl = document.getElementById('course');
// 也可以byclass这类的信息
</script>
cookie
document.cookie//cookie是客户端的一些本地信息
document.cookie
'BIDUPSID=4DC84DFF01DEDF2C5B13D2779CF7F617; PSTM=1647496651; BD_UPN=12314753; BAIDUID=E055E0CB34625545A9078EC89B8D3821:FG=1; H_PS_PSSID=26350; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; delPer=0; BD_CK_SAM=1; PSINO=3; BDRCVFR[QH_jv-D1QKs]=I9fPaKsGu1_UgP8QhP8; BD_HOME=1; BA_HECTOR=010584248h0k24855e1h57jn60q; BDSVRTM=0; BAIDUID_BFESS=A3B3877DF747692F6726812F09825AA6:FG=1'
-
劫持cookie原理
-
假设写了一段js代码里面包含document.cookie
-
再使用ajax请求到它的服务器上，就被劫持信息
-
假如你登入淘宝，但是你登上去以后发现，天猫不用重新登陆，因为它获得了你的cookie，你可以在右上角清空，这样就不行了
-
-
解决办法，服务器端设置httponly（代表只读）
可以获取具体的文档树节点
-
这样就能动态的删除节点和修改节点
6.7history
代表浏览器的历史记录
history.back();//后退
history.forward();//前进
7.操作DOM
文档对象模型 核心：整个浏览器就是一个dom树形结构
动态的操作网页中的元素
-
更新：更新dom节点
-
遍历dom节点：得到dom节点
-
删除：删除一个dom节点
-
添加：添加一个新的节点
需要操作don节点，必须获得这个dom节点
7.1get三个方法
<body>
<h1>biaoqian</h1>
<!-- <h1>shabi</h1>-->
<dl id= "course">
<dt>213</dt>
<dd>3213</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>
<dl class="cour">
<dt>ewfwe</dt>
<dd>3fdsf</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>
<script>
//对应css的选择器
var h1 = document.getElementById('course');//id一个元素节点对像
var h2= document.getElementsByClassName('cour');//类名，获得一组元素节点对象
var h3 = document.getElementsByTagName('dl');//标签名字，获得一组元素对象
7.1.1查询节点的子节点
id名字（或者类名标签名）.children就是获得所有的子节点
id名字（或者类名标签名）.firstchild（）
id名字（或者类名标签名）.lastchild（）
id名字（或者类名标签名）.next（）
-
注意事项
-
这些都是原生代码，我们之后尽量使用jquery
-
7.2更新节点 增删改查
innerHTML()就是该文本内容
var btn1 = document.getElementById("btn1");
console.log(btn1);
console.log(btn1.innerHTML);
btn1.innerHTML = "这不是一个按钮";
/*
* 首先是获取这个元素
* 然后修改它的文本内容
* */
//这是输出结果 <button id="btn1">这是第一个按钮</button>
// 这是第一个按钮
7.3事件
比如说点击按钮就是一个事件 关闭网页，晃鼠标都是事件，发生事件以后要有行为处理事件
假如是点击一次可以发生的行为我们知道，但是其他行为发生我们如何知道呢，那就是查看w3c文档的事件就可以查看
按钮
<button id="btn1" onclick="alert('讨厌，点我干嘛')">这是第一个按钮</button>
7.4切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
border: 0;
}
#change{
width: 400px;
height: 430px;
margin: 0 auto;
text-align: center;
padding: 5px;
background: aqua;
border-radius: 5px;
}
/*button{*/
/* border-radius: 5px;*/
/*}*/
</style>
<script>
window.onload=function (){
//这里因为是变成一个数组
var img = document.getElementsByTagName("img")[0];
var next = document.getElementById("next");
//也可以像之前一样 先var bnt1 = document.getElementById("pre")；
// 再bnt1.onclick = 方法 也可以
document.getElementById("pre").onclick=function (){
//这里数组的话千万不能忘记了是0
document.getElementsByTagName("img")[0].src="image/1.jpeg";
};
next.onclick=function (){
//和上面的区别是一种方法的两种表达方式
img.src="image/3.jpeg";
};
};
</script>
</head>
<body>
<div id="change">
<img src="image/2.jpeg" alt="好看的图" title = "悬停文字">
<button id="pre">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
7.5切换图片改善
改为到头有提示，并且显示一共几张图片，这是第几张
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
border: 0;
}
#change{
width: 400px;
height: 450px;
margin: 0 auto;
text-align: center;
padding: 5px;
background: aqua;
border-radius: 5px;
}
/*button{*/
/* border-radius: 5px;*/
/*}*/
</style>
<script>
window.onload=function (){
var tip = document.getElementsByTagName("p")[0];
var count = 0;
//这里因为是变成一个数组
var imgArrays = ["image/1.jpeg","image/2.jpeg","image/3.jpeg","image/4.jpeg"];
var img = document.getElementsByTagName("img")[0];
var next = document.getElementById("next");
tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
//也可以像之前一样 先var bnt1 = document.getElementById("pre")；
// 再bnt1.onclick = 方法 也可以
document.getElementById("pre").onclick=function (){
//这里数组的话千万不能忘记了是0
if (count===0){
alert("已经是到头了")
count=1;
}
count--;
document.getElementsByTagName("img")[0].src=imgArrays[count];
tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
};
next.onclick=function (){
//和上面的区别是一种方法的两种表达方式
if (count===imgArrays.length-1){
alert("已经是到头了")
count=imgArrays.length-2;
}
count++;
img.src=imgArrays[count];
tip.innerHTML="一共"+imgArrays.length+"，这是第"+(count+1)+"张";
};
};
</script>
</head>
<body>
<div id="change">
<p></p>
<img src="image/1.jpeg" alt="好看的图" title = "悬停文字">
<button id="pre">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
7.6文档加载顺序
文档是自上而下加载的
</head>
<body>
<button id="btn1" >这是第一个按钮</button>
<script>
var btn1 = document.getElementById("btn1");
btn1.onclick= function (){
alert('zheshisha');
}
// 这里放在body里面说是因为加载顺序是从上而下加载的，如果还放在head里面，这个function就会失效，放在head里面就获取不到他的id
</script>
7.6.1解决办法
-
想要文件自上而下执行，又不将上一段代码报错，那就要使用onload事件，就是在页面加载完毕后，再加载此段代码
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function (){
var btn1 = document.getElementById("btn1");
btn1.onclick= function () {
alert('zheshisha');
};
// 本来这里放在body里面说是因为加载顺序是从上而下加载的，如果还放在head里面，这个function就会失效
// 但是这里放了onload，
}
</script>
</head>
<body>
<button id="btn1" >这是第一个按钮</button>
</body>
7.7全选全不选联系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**{*/
/* margin: 0;*/
/*}*/
#form{
height: 131px;
width: 250px;
margin: 5px auto;
text-align: center;
background-color: aqua;
padding: 5px;
border:3px black solid;
border-radius: 6px;
/*border-color: black;*/
}
</style>
<script>
function ifCheck(x,y){
if (x===1){
document.getElementsByName("item")[y].checked=true;
}else if(x===0){
document.getElementsByName("item")[y].checked=false;
}else {
alert("只能填0或1");}
}
window.onload = function (){
var btn = document.getElementsByTagName("button");
btn[0].onclick =function (){
for (let i = 0; i < 4; i++) {
ifCheck(1,i);
}
};
btn[1].onclick =function (){
for (let i = 0; i < 4; i++) {
ifCheck(0,i);
}
};
}
</script>
</head>
<body>
<div >
<form action="#" method="get" id ="form">
<p>你爱好的运动是 <input type="checkbox" value="all">/<input type="checkbox" value="noone">全不选</p>
<p><input type="checkbox" value="basketball" name="item" id="jdf"/>篮球
<input type="checkbox" value="football" name="item"/>足球
<input type="checkbox" value="pingpong" name="item"/>乒乓球
<input type="checkbox" value="bangball" name="item"/>棒球</p>
<p>
<button type="button">全选</button>
<button type="button">全不选</button>
<button type="button">反选</button>
<input type="submit">
</p>
</form>
</div>
</body>
</html>
7.7.1出现了一闪一闪的问题
-
描述
-
点击全选按钮时出现了选中一瞬间的问题，
-
解决：button按钮的type默认是submit会是提交，只需要将他的type改成button就可以了
-
7.8dom操作补充
-
想要获取body属性
-
原本是var body = document.getElementsByTagName("body")[0];
-
但是因为document中保存有body，可以var body = document.body；
-
-
document.documentelement是html的根标签
7.9dom增删改
| createAttribute() | 创建属性节点。 |
|---|---|
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| appendChild() | 把新的子节点添加到指定节点。 |
增
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li{
list-style: none;
line-height: 30px;
}
div{
height: 158px;
width: 113px;
border: black solid 2px;
margin: 0 auto;
border-radius: 3px;
}
</style>
<script>
window.onload = function (){
//创建元素节点
var cra_ele = document.createElement("li");
// 创建文本内容
var cra_txt = document.createTextNode("这是什么意思")
var uladdli = document.getElementsByTagName("ul");
// lastchild[2].appendChild(cra_txt);
// 这句话是在第三个li中加了这是说明意思
//在body的最后加了一个节点
//appendChild是在父节点里面的最后一个子节点后面添加
uladdli[0].appendChild(cra_ele);
var ullast = document.getElementById("ul").lastChild;
console.log(ullast);
//这两种方法都可以将文本添加到最后一个li标签中
// ullast.appendChild(cra_txt);
ullast.innerHTML = "shabi";
};
</script>
</head>
<body>
<div>
<ul id="ul">
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
</div>
</body>
</html>
删
removeChild()
删除子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 0 auto;
border: black solid 2px;
border-radius: 5px;
height: 238px;
width: 269px;
text-align: center;
}
table,tr,td{
border: black 1px solid;
text-align: center;
}
table{
width: 268px;
}
</style>
<script>
//定义函数，点击以后，获取id，
function myClick(id,func){
var btn = document.getElementById(id);
btn.onclick=func;
}
//点击提交按钮后，添加一行
window.onload= function (){
var allA = document.getElementsByTagName("a");
for (let i = 0; i < allA.length; i++) {
allA[i].onclick = function (){
this.parentElement.parentElement.remove();
// alert(allA.length);
//这里不能使用allA[i],因为这样子删了第一行，第二行就变为第一行。
/*
* 假如说本来有两行
* 第一行是allA[0]
* 第二行是allA[1]
* 如果我把这里的this换成allA
* 首先我删除第一行的时候，那么alla[1]就会变成allA[0]
* 那么我原本赋值给allA[1]的函数就会失效
* 他的超链接就会变成跳转函数，所以，会刷新自身的页面
* 我将a改为<a href="javascript:;" >delete</a>；来验证
* 发现果然先删除第一行以后这个方法就失效了
* */
/*
* 点击超链接以后会默认跳转，我们不希望出现默认行为
* 可以通过响应函数最后加一个添加return false来取消默认行为
* */
return false;
// 或者在超链接中<a href="javascript:;" >delete</a> 也可以不跳转
}
}
</script>
</head>
<body>
<div>
<table id="table">
<tr>
<td>Name</td>
<td>Email</td>
<td>Salary</td>
<td></td>
</tr>
<tr>
<td>Tom</td>
<td>fjaldf@jflsd</td>
<td>5000</td>
<td><a href="javascript:;" >delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>dfaf@fjalfj</td>
<td>1515</td>
<td><a href="javascript:;" >delete</a></td>
</tr>
</table>
</div>
<div>
<h1>添加新员工</h1>
<form action="#" method="get">
<p>name:<input type="text" name="name"></p>
<p>email:<input type="email" name="email"></p>
<p>salary:<input type="number" name="salary"></p>
<button id="btn1">提交</button>
</form>
</div>
</body>
</html>
删中遇到的问题
-
首先就是删除第一行以后，再点第一行就会刷新或者，没用，查看了以后发现是allA[I]的问题，在上面用this就解决了
增删方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 0 auto;
border: black solid 2px;
border-radius: 5px;
height: 238px;
width: 269px;
text-align: center;
}
table,tr,td{
border: black 1px solid;
text-align: center;
}
table{
width: 268px;
}
</style>
<script>
//定义函数，点击以后，获取id，
function myClick(id,func){
var btn = document.getElementById(id);
btn.onclick=func;
}
//点击提交按钮后，添加一行
window.onload= function (){
/*这里是添加delet的功能，
点击delete删除改行的内容，
并且删除之前弹出提示框是
否要删除不删除的话可以取消*/
var allA = document.getElementsByTagName("a");
for (let i = 0; i < allA.length; i++) {
allA[i].onclick = function (){
if(confirm("你确定要删除吗！")===true){
this.parentElement.parentElement.remove();
}
// alert(allA.length);
//这里不能使用allA[i],因为这样子删了第一行，第二行就变为第一行。
/*
* 假如说本来有两行
* 第一行是allA[0]
* 第二行是allA[1]
* 如果我把这里的this换成allA
* 首先我删除第一行的时候，那么alla[1]就会变成allA[0]
* 那么我原本赋值给allA[1]的函数就会失效
* 他的超链接就会变成跳转函数，所以，会刷新自身的页面
* 我将a改为<a href="javascript:;" >delete</a>；来验证
* 发现果然先删除第一行以后这个方法就失效了
* */
/*
* 点击超链接以后会默认跳转，我们不希望出现默认行为
* 可以通过响应函数最后加一个添加return false来取消默认行为
* */
return false;
// 或者在超链接中<a href="javascript:;" >delete</a> 也可以不跳转
}
}
myClick("btn1",function (){
//首先是获取各个文本框的内容
var name_text = document.getElementById("inpuname").value;
var email_text = document.getElementById("inpuemail").value;
var salary_text = document.getElementById("inpusalary").value;
//获取table节点
var table = document.getElementById("table");
//创建新的一行的元素所需内容
var childtr = document.createElement("tr");
var childtd1 = document.createElement("td");
var childtd2 = document.createElement("td");
var childtd3 = document.createElement("td");
var childtd4 = document.createElement("td");
var childA = document.createElement("a");
//要设置节点的属性
// childtr.innerHTML = "shabi";
// table.appendChild(childtr);
table.appendChild(childtr).appendChild(childtd1).innerHTML=name_text;
table.appendChild(childtr).appendChild(childtd2).innerHTML=email_text;
table.appendChild(childtr).appendChild(childtd3).innerHTML=salary_text;
table.appendChild(childtr).appendChild(childtd4).appendChild(childA).innerHTML="delete";
//首先获取该链接的节点,想要给a添加属性，方法1
var atribution = document.getElementsByTagName("a");
// 然后创建该链接的节点属性以及赋值
// var typ = document.createAttribute("href");
// typ.nodeValue = "javascript:;";
atribution[atribution.length-1].setAttribute("href","javascript:;");
//方法2.两种方法都可以
// atribution[atribution.length-1].href = "javascript:;";
var allA = document.getElementsByTagName("a");
for (let i = 0; i < allA.length; i++) {
allA[i].onclick = function () {
if (confirm("你确定要删除吗！") === true) {
this.parentElement.parentElement.remove();
}}}
})
};
</script>
</head>
<body>
<div>
<table id="table">
<tr>
<td>Name</td>
<td>Email</td>
<td>Salary</td>
<td></td>
</tr>
<tr>
<td>Tom</td>
<td>fjaldf@jflsd</td>
<td>5000</td>
<td><a href="javascript:;" >delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>dfaf@fjalfj</td>
<td>1515</td>
<td><a href="javascript:;" >delete</a></td>
</tr>
</table>
</div>
<div>
<h1>添加新员工</h1>
<form action="#" method="get">
<p>name:<input type="text" name="name" id="inpuname"></p>
<!-- 文本框中的内容就是value-->
<p>email:<input type="email" name="email" id="inpuemail"></p>
<p>salary:<input type="number" name="salary" id="inpusalary"></p>
<button id="btn1" type="button">提交</button>
</form>
</div>
</body>
</html>
增删方法二
这个方法简单很多。。。。。。
//创建新的一行的元素所需内容
var childtr = document.createElement("tr");
childtr.innerHTML = "<td>"+name_text+"</td>"+
"<td>"+email_text+"</td>"+
"<td>"+salary_text+"</td>"+
"<td><a href='javascript:;' >delete</a></td>";
table.appendChild(childtr);
替换
replacechild（）
8.this
btn[2].onclick =function (){
alert(this);
alert(this===btn[2]);
// 结果是true，所以说明这个this在函数中是
//在事件的响应函数中，响应函数是给谁绑定的，this就是谁
};btn[1].onclick =function (){
for (let i = 0; i < 4; i++) {
ifCheck(0,i);
}
};
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话