0.简介
JavaScript实现应该由以下三个部分构成:ECMAScript、DOM、BOM.
- ECMAScript: ES规定了JS的变成语法和基础核心知识,
- DOM: 文档对象模型(Document Object Model),让我们通过DOM提供的接口来操作网页。通过dom,可以访问、操作HTML文档的所有元素。
- BOM:浏览器对象模型(Browser Object Model),BOM的最核心对象是window对象。
1.ECMAScript
1.1数据类型
ECMAJavascript有五种基本(原生)数据类型,两种复杂(特殊)数据类型; 五种基本数据类型分别是:Number、String、Undefined、Boolean、Null; 两种复杂数据类型:Object、Symbol、Bigint
let a = null console.log(typeof a) let b = undefined console.log(typeof b) let c = {} console.log(typeof c) let d = 6 console.log(typeof d) let e = 'a' console.log(typeof e) let f = true console.log(typeof f) 输出结果: object undefined object number string boolean
2.2变量常量
函数
//1.函数第一版 function sayhi(){ alert('hello world') } sayhi() //2.函数第二版 行参调用 function sayhi2(num1 ,num2){ let num3 = num1+num2 alert(num3) } sayhi2(1,2); //3. 没有行参数 function say3(){ let i1 = arguments[0]; let i2 = arguments[1]; alert(i1+i2) } say3(10,20); //4.函数自己调用 ( function say4(){ alert("哈哈哈哈哈哈哈啊哈哈哈哈哈") })(); //在没有方法调用的情况下,自执行 //5. 匿名方法 用变量接受一个方法 let say05=function(){ alert('我是一个方法'); }; say05(); //6.带返回值的方法 function returnValue(){ let sum = 0; for(let i = 0; i<arguments.length;i++){ sum += arguments[i]; } return sum ; } let res = returnValue(1,2,3,4,5,6,7,8); alert(res)
2.DOM简单学习
* 功能:控制html文档的内容
* 获取页面标签(元素)对象:Element
* document.getElementById("id值"):通过元素的id获取元素对象* 操作Element对象:
1. 修改属性值:
1. 明确获取的对象是哪一个?
2. 查看API文档,找其中有哪些属性可以设置
2. 修改标签体内容:
* 属性:innerHTML
1. 获取元素对象
2. 使用innerHTML属性修改标签体内容<script> //1:使用DOM(Document 文档 Object Model)来操作页面中的HTML标签,并且标签是以对象的形式获取 //通过document对象,获取文档中的子标签, 根据元素的名称获取html元素,并以对象的形式获得。数组 // name指的是标签属性 任何标签都有name属性 let ps= document.getElementsByName('p'); innerText指的是标签的文本内容 for(let i=0;i<ps.length;i++){ alert(ps[i].innerText); } // 2:根据标签的名称来获取元素对象,返回对象数组 let ptag = document.getElementsByTagName('p'); for (let i = 0; i < ptag.length; i++) { alert(ptag[i].innerText); } // 3:根据class属性获取对象的集合,并返回数组的形式 let classTag=document.getElementsByClassName('pp'); for(let i=0;i<classTag.length;i++){ alert(classTag[i].innerHTML); } // 4: 根据id获取单个的对象并返回 let span = document.getElementById('span'); document.write(span.innerText); // 5: querySelectorAll 可以根据标签名,id属性 classs属性获取元素对象 let pps= document.querySelectorAll('#span'); alert(pps.length); //6: document.querySelector 返回的是单个对象,只会获取数组中的第一个元素 let span= document.querySelector("p"); alert(span.innerHTML); </script>
2.1事件的绑定
* 功能: 某些组件被执行了某些操作后,触发某些代码的执行。 * 造句: xxx被xxx,我就xxx * 我方水晶被摧毁后,我就责备对友。 * 敌方水晶被摧毁后,我就夸奖自己。 * 如何绑定事件 1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码 1. 事件:onclick--- 单击事件 2. 通过js获取元素对象,指定事件属性,设置一个函数 * 代码: <body> <img id="light" src="img/off.gif" onclick="fun();"> <img id="light2" src="img/off.gif"> <script> function fun(){ alert('我被点了'); alert('我又被点了'); } function fun2(){ alert('咋老点我?'); } //1.获取light2对象 var light2 = document.getElementById("light2"); //2.绑定事件 light2.onclick = fun2;
3.BOM
1. 概念:Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象。2. 组成:
* Window:窗口对象
* Navigator:浏览器对象
* Screen:显示器屏幕对象
* History:历史记录对象
* Location:地址栏对象3. Window:窗口对象
1. 创建
2. 方法
1. 与弹出框有关的方法:
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮,则方法返回true
* 如果用户点击取消按钮,则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值:获取用户输入的值
2. 与打开关闭有关的方法:
close() 关闭浏览器窗口。
* 谁调用我 ,我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象
3. 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数:
1. js代码或者方法对象
2. 毫秒值
* 返回值:唯一标识,用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。3. 属性:
1. 获取其他BOM对象:
history
location
Navigator
Screen:
2. 获取DOM对象
document
4. 特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。 方法名();4. Location:地址栏对象
1. 创建(获取):
1. window.location
2. location2. 方法:
* reload() 重新加载当前文档。刷新
3. 属性
* href 设置或返回完整的 URL。5. History:历史记录对象
4.事件监听机制
* 概念:某些组件被执行了某些操作后,触发某些代码的执行。
* 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
* 事件源:组件。如: 按钮 文本输入框...
* 监听器:代码。
* 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。* 常见的事件: 1. 点击事件: 1. onclick:单击事件 2. ondblclick:双击事件 2. 焦点事件 1. onblur:失去焦点 2. onfocus:元素获得焦点。 3. 加载事件: 1. onload:一张页面或一幅图像完成加载。 4. 鼠标事件: 1. onmousedown 鼠标按钮被按下。 2. onmouseup 鼠标按键被松开。 3. onmousemove 鼠标被移动。 4. onmouseover 鼠标移到某元素之上。 5. onmouseout 鼠标从某元素移开。 5. 键盘事件: 1. onkeydown 某个键盘按键被按下。 2. onkeyup 某个键盘按键被松开。 3. onkeypress 某个键盘按键被按下并松开。 6. 选择和改变 1. onchange 域的内容被改变。 2. onselect 文本被选中。 7. 表单事件: 1. onsubmit 确认按钮被点击。 2. onreset 重置按钮被点击。