一、JavaScript相关介绍
1、JavaScript是什么？
JavaScript是一种具有函数优先的动态编程语言，当应用于HTML文档时，能改变HTML文档中元素的：内容，属性，样式，能显示或隐藏元素;他是属于HTML和Web的语言，为网站提供动态了交互特性。
2、JavaScript由什么组成？
JavaScript语言由ECMA Script(脚本语言规范)，BOM(浏览器对象模型，操作浏览器中各种对象)，DOM（文档对象模型，操作网页中各种元素)组成。
二、JavaScript语法使用
1、JavaScript的使用方法
- 使用格式
<script >JavaScript脚本</script> - 使用方式
//1.内部创建 <script type="text/javascript" >内部创建</script> //2.外部引入 <script src="包名/js文件名"> 外部引入</script> - 使用注意
HTML文件里代码的加载顺序是自上而下的，使用<script>的目的是期望修改HTML标签中元素，所以要把<script>放在HTML所有元素的后面。
三、JavaScript函数类型
(一)函数介绍
1、函数的概念：函数是执行特定任务的代码块，使用函数可以对代码进行复用：只要定义一次代码，可多次使用，可向同一函数传递不同的参数，以产生不同的结果。
2、函数的重载：在JavaScript中没有函数重载，后面出现的同名函数会覆盖前面的同名函数；每个函数的内部都有一个隐藏的数组，名字叫arguments，实参个数与形参的个数无关，只会按函数名去调用。
(二)命名函数
1、使用格式：function 函数名(形参1,形参2,…) { 方法体; return 返回值; }
2、函数调用：函数名(实参列表);
3、代码演示：
function get(a){alert(a);}//定义命名函数
get(2);//函数调用
(三)匿名函数
1、使用格式:let 变量名=function(参数1,参数2…){ 方法体;return 返回值 }
2、函数调用:var=变量名;
3、代码演示：
let a=function(){alert(5);}//定义匿名函数
alert(a);//打印函数
四、JavaScript对象模型
(一)DOM文档对象的模型
1、模型解析
2、操作对象
2.1、操作元素对象
- 元素对象的获取方法
- 方法的使用
<body> <input type="text" name="username"/> <div id="div1">div1</div> <div class="cls">div3</div> <div id="div2">div2</div> <div class="cls">div4</div> </body> <script> //1.根据name属性值获取元素对象, 返回数组 let username=document.getElementsByName("username"); //2.根据id属性值获取元素对象 let div1=document.getElementById("div1"); //3.根据元素名称获取元素对象，返回数组 let divs=document.getElementsByTagName("div"); //4.根据class属性值获取元素对象，返回数组 let clas =document.getElementsByClassName("class"); //5.获取当前元素的父元素---> 子元素对 象.parentElement属性 let parent=div1.parentElement; </script> - 元素对象的增删改方法
- 方法的使用
<body> <select id="s"> <option>---请选择---</option> <option>北京</option> <option>上海</option> <option>广州</option> <option>重庆</option> </select> </body> <script> //1.创建新的元素 let option = document.createElement("option"); //为option添加文本内容 option.innerText = "深圳"; //2.将子元素添加到父元素中 let select = document.getElementById("s"); select.appendChild(option); //3.通过父元素删除子元素 select.removeChild(option); //4. 用新元素替换老元素 let option2 = document.createElement("option"); option2.innerText = "杭州"; select.replaceChild(option2,option); </script>
2.2、操作属性对象
- 操作属性对象的方法
- 方法的使用
<style> .aColor{color: blue; }</style> </head><body><a>点我呀</a></body> <script> //1. setAttribute() 添加属性 let a = document.getElementsByTagName("a")[0]; a.setAttribute("href","https://www.baidu.com"); //2. getAttribute() 获取属性 let value = a.getAttribute("href"); </script>
2.3、操作文本对象
- 操作文本对象的方法
方法 说明 方法 说明 innerText 添加文本内容，不解析标签 innerHTML 添加文本内容，解析标签 - 方法的使用
<body><div id="div"></div></body> <script> let div = document.getElementById("div"); div.innerText = "我是div"; div.innerHTML = "<b>我是div</b>"; </script>
(二)BOM浏览器对象模型
1、模型解析
2、操作对象
2.1、window窗口对象
2.1.1、定时器
-
定时器的方法
- 定时器的使用：<script> //设置一次性定时器 let a =window.setTimeout(function(){alert("阿西吧")},5000); //取消一次性定时器 clearTimeout(a); //设置循环的定时器 let b= window.setInterval(function(){alert("了不起")},2000); //取消循环的定时器 clearInterval(b); </script>
2.1.2、加载事件
-
加载事件的方法
方法 说明 window.onload 在页面加载完毕后触发此事件的功能 -
加载事件的使用
<script> window.onload=function(){let div=document.getElementById("div"); alert(div);}; </script> <body> <div id="div">dddd</div> </body>
2.2、location地址栏对象
2.2.1 href属性
-
href属性的作用：进行页面跳转
-
href属性的使用：
<body><h1>等待5秒后跳转....</h1></body> <script> function jump(){location.href="http://www.baid.com"} setTimeout(jump,5000); </script>
五、JavaScript事件绑定
1、事件的概述
JavaScript与HTML的交互是通过用户或浏览器操作页面时发生的事件（Event）来处理的，比如：HTML 页面完成加载， input 字段改变时，按钮被点击时 JavaScript 可以执行一些代码来实现某些功能。
2、事件的分类
-
经常使用的一些事件
3、事件的绑定 -
方式一：通过标签中的事件属性进行绑定。
-
方式二：通过DOM 元素属性绑定。
-
代码演示：
<body> <button id="btn1"> 方式一 </button> <button id="btn2" onclick="clickMe()"> 方式二 </button> </body> <script> function clickMe(){ alert("通过标签中的事件属性进行绑定"); } document.getElementById("btn2").onclick=function(){ alert("通过DOM 元素属性绑定"); } </script>
六、JavaScript高级特性
(一)面向对象
在Java 中我们学习过面向对象，核心思想是万物皆对象；在JavaScript 中同样也有面向对象，思想类似。
1、普通类
-
普通类的定义
class 类名{ constructor(变量列表){变量赋值; } 方法名(参数列表){方法体; return 返回值; }} -
普通类的使用
let 对象名=new 类名(实际变量值); 对象名.方法名(); -
普通类的演示
//定义Person类 class Person{ constructor(name){this.name = name; } show(){document.write(this.name + "," + "<br>"); }} //使用Person类 let p = new Person("张三"); p.show();
2、字面量定义类
-
字面量定义类的格式
//字面量定义类其本质是创建了一个类的对象，然后直接调用属性和方法。 let 对象名={ 变量名:变量值， 方法名:function(){} } -
字面量定义类的使用
对象名.变量名 对象名.方法名() -
字面量定义类的演示
//定义person let person = { name : "张三", hobby : ["听课","学习"], eat : function() { document.write("吃饭..."); }}; //使用person document.write(person.name + "," + person.hobby[0] + "," + person.hobby[1] + "<br>"); person.eat();
(二)内置对象
1、Number
- Number的方法
- Number的使用//1. parseFloat() document.write(parseFloat("3.14")); //2. parseInt() document.write(parseInt("3"));
2、Math
-
Math的方法
方法 说明 方法 说明 ceil(x) 向上取整 floor(x) 向下取整 round(x) 随机数 pow(x,y) 幂运算x的y次方 -
Math的使用
Math.方法名(x); Math.ceil(4.2)
3、Array
-
Array的方法
方法 说明 方法 说明 shift() 删除数组最前面的元素 reverse() 反转数组中的元素 push(元素) 添加元素到数组的末尾 pop() 删除数组末尾的元素 -
Array的使用
let 变量名=[元素1,元素2...]; let arr = [1,2,3,4,5]; arr.push(6);
4、JSON
- JSON的方法
- JSON的使用
//1.定义对象 let Cat={ name:"汤姆", age:20}; //2.对象--->JSON let str=JSON.stringify(Cat); //3.JSON--->对象 let obj= JSON.parse(str)
3207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
