Java学习笔记-Day48 JavaScript（三）
一、JavaScript 自定义对象
1、Javascript中对象的定义和使用
在JavaScript中，除了Array、Date、Number等内置对象外，可以通过JavaScript代码创建自己的对象。
JavaScript中创建对象的方式：
（1）直接通过 属性名:值 来创建对象。
var user = {
"name":"小明",
"age":25,
showinfo:function(){
console.log(this.name+","+this.age);
}
};
//输出属性
console.log(user.name);
// 调用方法
user.showinfo();
（2）使用 Object 对象的构造方法创建对象。
var student = new Object();
student.name="小红";
console.log(student.name);
（3）构造函数模式：先定义函数，通过new来创建对象。
function Person(name,age){
this.name=name;
this.age=age;
this.showinfo = function(){
console.log(this.name+","+this.age);
}
}
var p = new Person("小何",25);
console.log(p.name+","+p.age);
p.showinfo();
（4）构造函数模式+原型模式。
function Pig(name){
this.name = name;
}
Pig.prototype.name = "";
Pig.prototype.show = function(){
console.log("name:"+this.name);
}
var p = new Pig("八戒");
p.show();
（5）工厂模式：用函数来封装以特定接口创建对象的细节。
function createPerson(name,age){
var o = new Object();
o.name = name;
o.age = age;
o.showinfo = function(){
console.log(o.name+","+o.age);
}
return o;
}
var p = createPerson("小黑",26);
console.log(p.name+","+p.age);
p.showinfo();
（6）使用 ES6 的类定义写法创建对象。
class Student{
constructor(name,age){
this.name =name;
this.age = age;
}
showinfo(){
console.log(this.name+","+this.age);
}
toString(){
return this.name+","+this.age;
}
static go(){
console.log(this.name+","+this.age+",static go");
}
}
var s = new Student("小雷",25);
s.showinfo();
console.log(s.toString());
Student.go();
二、闭包
变量 fun 指定了函数自我调用的返回值。函数的自我调用函数只执行一次，用于设置计数器为 0，并返回函数表达式。变量 fun 可以作为一个函数使用，它可以访问函数上一层作用域的计数器，这个叫作 JavaScript 闭包，它使得函数拥有私有变量变成可能，计数器受匿名函数的作用域保护，只能通过 fun 函数修改。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//只能通过这个函数来控制变量c的变化,每次c+1
let fun = (function(){
//定义并初始化,只执行一次
let c = 0;
//返回一个函数
return function(){
return ++c;
}
})();//函数自调用
console.log(fun());
console.log(fun());
console.log(fun());
</script>
</body>
</html>
三、BOM
BOM（Browser Object Model）：浏览器对象模型，用于操作浏览器窗口的一组接口。
BOM的主要对象：
（1）window：对象表示浏览器中打开的窗口。Window对象也封装了Dom标准中Global对象涵盖的全部内容，是js、DOM、HTMLDOM的运行环境。
（2）navigator： 对象包含有关浏览器的信息。获取方式为 window.navigator。
（3）screen：对象包含有关客户端显示屏幕的信息。获取方式为 window.screen。
（4）history： 对象包含用户（在浏览器窗口中）访问过的 URL。获取方式为 window.history。
（5）location：对象包含有关当前地址栏 URL 的信息，主要的作用是网页跳转。获取方式为 window.location。
注意：navigator、screen、history、location都是window对象的一个属性对象。
1、Window 对象
Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 Window.alert()。
（1）Window 对象的属性
| 属性 | 描述 |
|---|---|
| closed | 返回窗口是否已被关闭。 |
| defaultStatus | 设置或返回窗口状态栏中的默认文本。 |
| document | 对 Document 对象的只读引用。请参阅 Document 对象。 |
| history | 对 History 对象的只读引用。请参数 History 对象。 |
| innerheight | 返回窗口的文档显示区的高度。 |
| innerwidth | 返回窗口的文档显示区的宽度。 |
| length | 设置或返回窗口中的框架数量。 |
| location | 用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
| name | 设置或返回窗口的名称。 |
| Navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
| opener | 返回对创建此窗口的窗口的引用。 |
| outerheight | 返回窗口的外部高度。 |
| outerwidth | 返回窗口的外部宽度。 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
| parent | 返回父窗口。 |
| Screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
| self | 返回对当前窗口的引用。等价于 Window 属性。 |
| status | 设置窗口状态栏的文本。 |
| top | 返回最顶层的先辈窗口。 |
| window | window 属性等价于 self 属性，它包含了对窗口自身的引用。 |
（2）Window 对象的方法
| 方法 | 描述 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框。 |
| blur() | 把键盘焦点从顶层窗口移开。 |
| clearInterval() | 取消由 setInterval() 设置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
| close() | 关闭浏览器窗口。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| createPopup() | 创建一个 pop-up 窗口。 |
| focus() | 把键盘焦点给予一个窗口。 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素。 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标。 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| print() | 打印当前窗口的内容。 |
| prompt() | 显示可提示用户输入的对话框。 |
| resizeBy() | 按照指定的像素调整窗口的大小。 |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
| scrollBy() | 按照指定的像素值来滚动内容。 |
| scrollTo() | 把内容滚动到指定的坐标。 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
注意：setTimeout() 只执行代码一次，如果要多次调用，可以使用setInterval() 或者 让代码自身再次调用setTimeout()，也就是递归调用。
2、Location 对象
location对象：对象表示窗口的地址对象，作为一个属性封装在 Window 对象中。
（1）Location 对象的属性
| 属性 | 描述 |
|---|---|
| host | 设置或获取当前窗口地址的域名及端口。格式为127.0.0.1:8020。 |
| hostname | 设置或获取当前窗口地址的域名。格式为127.0.0.1。 |
| protocol | 设置或获取当前窗口地址的请求方式。格式为http: |
| port | 设置或获取当前窗口地址的端口。 格式为8020。 |
| href | 设置或获取当前窗口地址的全路径。最常用，一般用于网页刷新、网页跳转、网页参数的解析。 |
| search | 设置或返回从问号 (?) 开始的 URL（查询部分），也就是get请求的参数和值 |
| pathname | 设置或返回当前 URL 的路径部分。 |
（2）Location 对象的方法
| 属性 | 描述 |
|---|---|
| assign() | 跳转到新地址 |
| reload() | 重新加载当前地址 |
| replace() | 跳转到新地址，不会保留历史记录 |
3、History 对象
History 对象表示窗口的历史记录，包含用户（在浏览器窗口中）访问过的 URL。History 对象是 Window 对象的一部分，可通过 window.history 属性对其进行访问。
（1）History 对象的属性
| 属性 | 描述 |
|---|---|
| length | 返回浏览器历史列表中的 URL 数量。 |
（2）History 对象的方法
| 方法 | 描述 |
|---|---|
| back() | 加载 history 列表中的前一个地址。 |
| forward() | 加载 history 列表中的下一个地址。 |
| go() | 加载 history 列表中的某个具体页面。 参数为1代表前进，参数为 -1代表后退，无参数的话表示最开始页面 |
四、DOM
HTML DOM文档对象模型在DOM的基础上扩展了每一个专有标签的方法和属性。
（1）Html属性：
| 属性 | 描述 |
|---|---|
| innerHTML | 设置或获取当前元素内的html。 |
| innerText | 设置或获取当前元素内的文字内容。 |
| outerHTML | 获取元素的外部html。 |
（2）获取大小的属性
| 属性 | 描述 |
|---|---|
| offsetHeight/offsetWidth | 获取用户可见的当前对象的高度和宽度，包含边线。 |
| scrollHeight/scrollWidth | 获取当前对象的实际宽度和高度，包含需要滚动的部分。 |
（3）位置属性
| 属性 | 描述 |
|---|---|
| offsetParent | 获取当前元素距离最近的使用相对定位获取绝对定位的祖元素。 |
| offsetLeft/offsetTop | 获取当前元素的左上角与其offsetParent的左上角的水平/垂直方向的偏移量。 |
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
+HTML DOM 模型被构造为对象的树。
1、Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
1.1、获取 DOM 元素对象的方法
（1）getElementById()：返回对拥有指定 id 的第一个对象的引用。
let a = document.getElementById("btnforward").value;
（2）getElementsByName()：返回带有指定名称的对象集合。
let b = document.getElementsByName("hist");
（3）getElementsByTagName()：返回带有指定标签名的对象集合。
let c = document.getElementsByTagName("a");
（4）getElementsByClassName()：返回带有指定类名的对象集合。
let d = document.getElementsByClassName("classname");
1.2、改变 HTML 内容
（1）改变 HTML 元素的内容，能解析HTML标签。
document.getElementById(标签的ID).innerHTML = 内容;
（2）改变 HTML 元素的内容，能解析HTML标签。
document.getElementById(标签的ID).innerText = 内容;
1.3、改变 HTML 属性
改变 HTML 元素的属性
document.getElementById(标签的ID).属性 = 值;
1.4、改变 HTML 样式
document.getElementById(标签的ID).style.属性 = 值;
2、Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行。
2.1、鼠标事件
| 属性 | 描述 |
|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onmousedown | 鼠标按钮被按下。 |
| onmouseenter | 当鼠标指针移动到元素上时触发。 |
| onmouseleave | 当鼠标指针移出元素时触发。 |
| onmousemove | 鼠标被移动。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseup | 鼠标按键被松开。 |
- 案例：随着鼠标移动的时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="flytime" style="position: absolute;">flytime</div>
<script type="text/javascript">
document.onmousemove = function(){
//改变层的位置
document.getElementById("flytime").style.top=event.clientY+"px";
document.getElementById("flytime").style.left=event.clientX+"px";
}
function showtime(){
document.getElementById("flytime").style.color="red";
//设置flytime为当前时间
document.getElementById("flytime").innerHTML = new Date().toLocaleString();
}
setInterval("showtime()",1000);
</script>
</body>
</html>
2.2、键盘事件
| 属性 | 描述 |
|---|---|
| onkeydown | 某个键盘按键被按下（不区分字母大小写）。 |
| onkeypress | 某个键盘按键被按下并松开（区分字母大小写）。 |
| onkeyup | 某个键盘按键被松开。 |
2.3、表单事件
| 属性 | 描述 |
|---|---|
| onblur | 元素失去焦点时触发。 |
| onchange | 该事件在表单元素的内容改变时触发。 |
| onfocus | 元素获取焦点时触发。 |
| onfocusin | 元素即将获取焦点时触发。 |
| onfocusout | 元素即将失去焦点时触发。 |
| oninput | 元素获取用户输入时触发。 |
| onreset | 表单重置时触发。 |
| onsearch | 用户向搜索域输入文本时触发 。 |
| onselect | 用户选取文本时触发 。 |
| onsubmit | 表单提交时触发 ，在form标签中。 |
2.4、事件操作
onclick：三个相同事件,绑定在同一个按钮上,点击按钮时，只触发最后一个事件(覆盖了前面的事件)。
addEventListener的click：三个相同事件,绑定在同一个按钮上,点击按钮时，将会触发三个事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" id="btn1">触发事件1</button>
<button type="button" id="btn2">触发事件2</button>
<script type="text/javascript">
//onclick:三个相同事件,绑定在同一个按钮上,点击按钮时，只触发最后一个事件(覆盖了前面的事件)。
document.getElementById("btn1").onclick = function () {
console.log("btn1 触发事件 1");
}
document.getElementById("btn1").onclick = function () {
console.log("btn1 触发事件 2");
}
document.getElementById("btn1").onclick = function () {
console.log("btn1 触发事件 3");
}
//addEventListener的click:三个相同事件,绑定在同一个按钮上,点击按钮时，将会触发三个事件。
document.getElementById("btn2").addEventListener("click",function () {
console.log("btn2 触发事件 1");
});
document.getElementById("btn2").addEventListener("click",function () {
console.log("btn2 触发事件 2");
})
document.getElementById("btn2").addEventListener("click",function () {
console.log("btn2 触发事件 3");
})
</script>
</body>
</html>
2.5、事件的冒泡和捕获
事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。
事件捕获：事件从最不精确的对象（document 对象）开始触发，然后到最精确，与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。
addEventListener方法用来为一个特定的元素绑定一个事件处理函数，是JavaScript中的常用方法，其传入三个参数，分别是 没有on的事件类型（例如click） ，事件处理函数，控制事件阶段，第三个参数是boolean类型，默认是false，表示在事件冒泡的阶段调用事件处理函数，如果传入true，就表示在事件捕获的阶段调用事件处理函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
div1
<p id="p1">p1</p>
</div>
<button type="button" id="btn">事件</button>
<script type="text/javascript">
//冒泡事件和捕获事件
document.getElementById("div1").addEventListener("click",function () {
console.log("点击div1");
},true);
document.getElementById("p1").addEventListener("click",function () {
console.log("点击p1");
})
</script>
</body>
</html>
3、全选和反选案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="Checkbox" value="全部" id="selectAll">全部
<input type="button" name="" id="reverse" value="反选" />
<hr>
<input type="Checkbox" name="enjoy" value="吃">吃
<input type="Checkbox" name="enjoy" value="喝">喝
<input type="Checkbox" name="enjoy" value="玩">玩
<input type="Checkbox" name="enjoy" value="乐">乐
<script type="text/javascript">
//全选
document.getElementById("selectAll").onclick = function(){
//获取name为enjoy的所有标签
let array = document.getElementsByName("enjoy");
for (let s of array) {
s.checked = this.checked;
}
}
//反选
document.getElementById("reverse").onclick = function(){
//获取name为enjoy的所有标签
let array = document.getElementsByName("enjoy");
for (let s of array) {
s.checked = !(s.checked);
}
}
</script>
</body>
</html>
77
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
