JavaScript
JS的定义
- 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
JS文件的引入
-
js的组成
-
组成部分 作用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uQxpRO8I-1592820940354)(F:\MarkDownOnte\学习笔记\JavaWeb\assets\1592635171072.png)] -
第一种方式：
-
放置在HTML文件中，用于某一个HTML文档
<script> alert("有点意思") </script>
-
-
第二种方式：
-
js代码存储在单个的js文件中
// 外部的js文件 alert("外部引入")<!--引入外部文件--> <script src="jsfile/test.js"> </script>
-
js的日常使用
基本输入输出语句
- 输入框
- prompt 输入提示框
- 弹出框
- alert
- 控制台输出
- console.log
- 向页面输出
- document.write
定义变量
- 定义变量
- 定义局部变量 ：let 变量名=值
- 定义全局变量 ：直接变量名=值 或者用var修饰
- 定义常量: const 变量名=值
原始数据类型
- 布尔类型 boolean
- 数值类型数包括整数与小数 number
- 字符串类型数据 string
- 对象类型 object
- 未定义类型 undfinde
- 判断数据类型方法
- typeof 变量名
运算符
-
比较运算符
== 判断值是否相等
=== 判断数据类型与值同时相等才返回true
-
三元运算符
- 比较表达式？ 值一：值二；
-
字符串类型的数据在参与运算的时候会自动转换数据类型
断点调试
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BFGW59hC-1592820940356)(F:\MarkDownOnte\学习笔记\JavaWeb\assets\1592641098898.png)]
循环分支语句
- switch case
- if else else if
- for循环
定义数组
-
数组的定义与高级操作
<!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> <script> // 定义数组[] let aa=[1,2,3,4,5,6,"woqu","有点意思"]; for(let i=0;i<aa.length;i++ ){ document.write(aa[i]+"<br>") } </script> <script> // 数组高级操作 // 符号... let a=[1,2,3,4,5,6]; let b=[...a]; document.write("复制数组"+"<br>") for(let j=0;j<b.length;j++){ document.write(b[j]) } // 合并数组 let c=[...a,...b]; c.forEach(element => { document.write(":"+element+":") }); // 把字符串转换为数组 let d=[..."把字符串转换为数组"] d.forEach(element => { document.write(element+"<br>") }); </script> </body> </html>
js中的函数
<script>
//定义无参无返回值的方法
function a(){
document.write("无参无返回值")
}
// 调用函数
a();
// 有参有返回值
function b(a,b){
let c=a+b;
return c;
}
// 调用函数
let d=b(10,20);
document.write(d);
// 可变参函数
function c(...params){
// 传递的参数是一个可变的数组
let d=0;
params.forEach(element => {
d+=element;
});
return d;
}
document.write("换行"+"<br>")
let f=c(1,2,3,4,5,6,7,8,9,10,11);
document.write(f)
// 匿名函数
let niminghanshu=function(){
document.write("匿名函数")
}
// 调用匿名函数
niminghanshu();
// 一个函数的参数是一个函数
function rfun(fun){
// 调用传递进来的函数
let a=20;
let b=30;
return fun(a,b);
}
let mm= rfun(b);
document.write("<br>"+mm)
</script>
JavaScript DOM介绍
-
html文件在文档对象中的解析形式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lc2yg2xN-1592820940359)(F:\MarkDownOnte\学习笔记\JavaWeb\assets\1592788454098.png)]
DOM中不同类型的节点在js中的对应类型：
- Document: 文档对象
- Element: 元素对象
- Element:子元素
- Attribute:对应的属性
- Text:元素中的文本
- Attribute: 属性对象
- Text： 是文本对象
对每个节点进行操作
-
节点元素的增删改查
-
获得元素查询元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> <div class="cls">div3</div> <div class="cls">div4</div> <input type="text" name="username"/> </body> <script> // 对html中的标签进行操作 let did= document.getElementById("div1"); alert(did); console.log(did) // 通过元素名获得元素对象 let divs= document.getElementsByTagName("div") console.log(divs) document.write(divs.length); // 通过class属性获得元素对象数组 let cls= document.getElementsByClassName("cls") console.log(cls); // 获取当前元素的父元素 let didp= did.parentElement console.log(didp) </script> </html> -
对元素删出修改增加
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <select id="s"> <option>---请选择---</option> <option>北京</option> <option>上海</option>id <option>广州</option> <option id="cv" >光头</option> <option id="ss" >邹杰</option> </select> </body> <script> // 创建新元数 let option= document.createElement("option"); // 给新元素的文本赋值 option.innerText="重庆" // 获得要添加元素的父元素 let pa=document.getElementById("s") // 把创建的父元素添加到父元素中 pa.appendChild(option); /* 删除元素 */ //找到要删除的元素 let rv= document.getElementById("cv") // 找到要删除元素的父元素 let opp= option.parentElement opp.removeChild(rv); /* 修改元素rv */ // 用新元素替代老元素 // 获得要替代的元素对象 let ss= document.getElementById("ss"); // 创建新的元素 let ns= document.createElement("option") ns.innerText="成都" // 用父元素去替代 第一个参数是新的元素 第二个参数数被替代的元素对象 opp.replaceChild(ns,ss) </script> </html>
对每个元素的属性进行增删改查
-
元素属性的CRUD
<!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> </style> <body> <a >可以点</a> </body> <script> // 对a标签的属性进行操作 //（增） 添加属性 let aTag= document.getElementsByTagName("a") // 获得对应的标签 let a=aTag[0]; // 添加属性 a.setAttribute("href","www.baidu.com") a.setAttribute("id","cddss") // 获得属性 let value=a.getAttribute("href"); alert(value) // 删除属性 a.removeAttribute("id") // 对样式进行操作 a.style.color="red" // 添加class熟悉 a.className="cln" </script> </html>
对元素中的文本进行操作
- 添加文本
- 元数名.innerText=“值”不能对值中的html元素进行解析
- 添加HTML元素
- 元素名.innerHTMLl=“值” 可以对值中的标签进行解析
事件介绍
-
定义：
- 在某些组件执行了某些操作的时候会触发一些代码的执行
-
常用事件
-
事件名 说明 onchange 用户改变域的内容 onload 页面或者图像加载完毕 onsubmite 表单提交 onclick 鼠标单击 ondbclick 鼠标双击 onblur 元素失去焦点 onfocus 元素的到焦点 -
点击事件绑定函数
<!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> <img id="img" src="img/404.jpg"/> <br> <button id="next" onclick="next()" >下一张</button> <button id="previous" >上一张</button> <script> function next(){ let img= document.getElementById("img") img.setAttribute("src","") } function tishi(){ alert("测试") } let pre= document.getElementById("previous") pre.onclick=tishi // 这个地方不加括号相当于 是在pre中由一个onclick属性这个属性的数据类型是一个函数，然后把tishi这个函数传递给onlick这个属性所以不用加上括号 // 在上面标签的属性中onclick后面的函数要加上括号是因为发声点击事件以后对函数进行调用 </script> </body> </html>
.getElementById(“img”)
img.setAttribute(“src”,"")
}
function tishi(){
alert(“测试”)
}
let pre= document.getElementById(“previous”)
pre.οnclick=tishi // 这个地方不加括号相当于 是在pre中由一个onclick属性这个属性的数据类型是一个函数，然后把tishi这个函数传递给onlick这个属性所以不用加上括号
// 在上面标签的属性中onclick后面的函数要加上括号是因为发声点击事件以后对函数进行调用
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
