《javascript基础》学习笔记七

最新推荐文章于 2024-07-13 15:45:29 发布

呆瓜O_o

最新推荐文章于 2024-07-13 15:45:29 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/weixin_45131334/article/details/108752791

版权

这篇博客介绍了JavaScript中的事件绑定，包括DOM0级和DOM2级的绑定方式，以及addEventListener方法。还详细讲解了BOM（浏览器对象模型），如弹出系统对话框、打开和关闭窗口的操作，以及location对象的使用。示例代码展示了如何实现延迟函数、间隔函数以及窗口属性的设置。

摘要由CSDN通过智能技术生成

前言

学习地址：https://www.bilibili.com/video/BV1ZE411c7yM?p=74

一、JS事件

1、绑定事件的两种方式/DOM事件的级别

DOM0的写法:onclick

element.onclick = function (){
}

举例:

<body>
<button>点我</button>
<script>
var btn = document.getE1ementsByTagName("button")[0];

//这种事件绑定的方法容易被层叠。
btn.onclick = function ( {
console.log("事件1");
}

btn.onc1ick = function ( {
console.log("事件2");
}
</script>
</body>

点击按钮后，上方代码的打印结果:

事件2

我们可以看到，这种绑定事件的方式，会层叠掉之前的事件。

2、DOM2的写法:addEventListener

element.addEventListener( 'click' , function () {
}， false);

参数解释∶
● 参数1∶事件名(注意，没有on)
● 参数2∶事件名(执行函数)
● 参数3 : true表示捕获阶段触发，false表示冒泡阶段触发（默认)。如果不写，则默认为false。【重要】

举例:

<body>
<button>按钮</button>
<script>
var btn = document.getElementsByTagName("button")[0];

//addEventListener:事件监听器。原事件被执行的时候，后面绑定的事件照样被执行
//第二种事件绑定的方法不会出现层叠。（更适合团队开发）
btn.addEventListener("click"，fn1);
btn.addEventListener("click"，fn2);

function fn1() {
  console.log("事件1");
}

function fn2() {
   console.log("事件2");
}
</script>
</body>

点击按钮后，上方代码的打印结果:

事件1
事件2

我们可以看到，这种绑定事件的方式，不会层叠掉之前的事件。

3、延迟函数

延迟函数：延迟到什么时间，做什么事情（只做一次）
取消延迟函数：clearTimeout()

//setTimeout(延迟做的函数，延迟多少毫秒时间)
//第三个参数(给延迟触发的函数传参)
var fn1 = function( color,fontSize){
    document.body.style.backgroundColor = color;
    document.body.style.fontSize = fontSize+"px";
}
//第一种实现方法
//var timeoutId = setTimeout(fn1,3000, "skyblue",100)

//第二种实现方法
setTimeout(function(){
     fn1("skyblue" ,100)
},3000) //结果 ： 打开页面后3s 颜色变为天蓝色，字体变为100px
//取消延迟函数
// clearTimeout(timeoutId)

间隔函数：每隔一段时间做什么事（不设置就会一直重复下去）

//间隔函数
var fn1 = function(){
//输出当地时间为多少
var time = new Date()
// console.log(time)
document.body.innerHTML = time
}
var intervalid = setInterval(fn1,1000)
  
  
//设置一个延迟函数，3s后取消间隔函数的输出
setTimeout(function() {
//取消间隔函数clearInterval(间隔函数ID)
clearInterval(intervalId)
}, 3000);

结果：
每隔一秒输出当地的时间，并覆盖在前一秒输出的时间上，三秒之后停止间隔输出

4、时间函数

  var time = new Date()
    //创建当前的时间
    //获取年份
    var y2 = time.getFullYear()
    console.log(y2)
    //获取月份，月份计算是从0开始计算,所以会比正常的月份小1
    var month = time.getMonth()
    console.log(month+1)
    //获取月份里的第多少天
    var date = time.getDate()
    console.log(date)
    //获取周几
    var day = time.getDay()
    console.log(day)//1-7
    //获取小时
    var hour = time.getHours()
    console.log(hour)//24小时制
    //获取分钟
    var minute = time.getMinutes()
    console.log(minute)
    //获取秒
    var sec = time.getSeconds()
    console.log(time.getSeconds())
    //获取毫秒
    var milsec = time.getMilliseconds()
    console.log(milsec)
    //获取时间戳:1970,1,1到现在的毫秒数
    console.log([time])
   
    //设置设置时间
    //设置年份
    time.setFullYear(2018)
    console.log(time)
    //设置月份
    time. setMonth(0)
    console.log(time)
    //设置第多少天
    time.setDate(1)
    console.log(time)

    //设置小时
    time.setHours(0)
    console.log(time)
    //设置分钟
    time. setMinutes(0)
    //设置秒
    time.setSeconds(0)
    //设置毫秒
    time.setMilliseconds(0)
    console.log(time)
    //设置时间戳,通过时间戳设置时间.

打印结果：
在这里插入图片描述

二、BOM

1、BOM的介绍

JavaScript的组成

JavaScript基础分为三个部分:
● ECMAScript : JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
● DOM:文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
● BOM:浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。brqwsw

什么是BOM
BOM: Browser Object Model，浏览器对象模型。
BOM的结构图∶
在这里插入图片描述
从上图也可以看出∶
● window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
● DOM越是BOM的一部分。
window对象∶
● window对象是avaScript中的顶级对象。
● 全局变量、自定义函数也是window对象的属性和方法。
● window对象下的属性和方法调用时，可以省略window。
下面是BOM的常见内置方法和内置对象。

2、弹出系统对话框

比如说，alert(1)是window.alert(1)的简写，因为它是window的子方法。
系统对话框有三种:

alert();//不同浏览器中的外观是不一样的
confirm();//兼容不好
prompt();//不推荐使用

3、打开窗口、关闭窗口

1、打开窗口:

window. open(ur1,target,param)

参数解释∶
● url:要打开的地址。
● target:新窗口的位置。可以是:_blank ._self、_parent父框架。
● param:新窗口的一些设置。
● 返回值:新窗口的句柄。

param这个参数，可以填各种各样的参数(），比如∶
● name:新窗口的名称，可以为空
● features:属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。
● fullscreen= { yes/no/1/0}是否全屏，默认no
● channelmode= { yes/no/1/0}是否显示频道栏，默认no
● toolbar= { yes/no/1/0〕是否显示工具条，默认no
● location= { yes/no/1/0}是否显示地址栏，默认no。（有的浏览器不一定支持）● ● ● ● ● ● directories = { yes/no/1/0}是否显示转向按钮，默认no
● ostatus=f yes/no/1/0 }是否显示窗口状态条，默认no
● menubar= { yes/no/1/0}是否显示菜单，默认no
● scrollbars= {yes/no/1/0}是否显示滚动条，默认yes
● resizable= { yes/no/1/0}是否窗口可调整大小，默认no
● width=number窗口宽度(像素单位）
● height=number窗口高度（像素单位）
● top=number窗口离屏幕顶部距离（像素单位）
● left=number窗口离屏幕左边距离（像素单位）

各个参数之间用逗号隔开就行，但我们最好是把它们统一放到json里。

2、关闭窗口: window.close()


```javascript
    //新窗口= window.open(地址,是否开新窗口,新窗口的各种参数);
    var al = document.getElementsByTagName("a")[0];
    var a2 = document.getElementsByTagName("a")[1];
    a1.onc1ick = function(){
    //举例1:window.open("http://www.jx.com" ,"_blank");
    var json = {
    "name": "helloworld",
    "fu11screen" : "no",
    "location" : "no",
    "width": "100px",
    "height": "100px",
    "top": "100px",
    "left":"100px"
    };
    window.open("http://www.baidu.com","_blank",json);//举例2
}

//关闭本页面 
a2.onclick =function(){
    window.close();
}

3、新窗口相关∶
● 新窗口.moveTo(5,5)
● 新窗口.moveBy()
● 新窗口.resizeTo()
● window.resizeBy()
代码举例:

var newwin = window. open("demo.htm1"，"_blank"， json);
newwin.moveTo(500，500);

4、location对象

window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。
location对象的属性
● href:跳转
● hash返回url中#后面的内容，包含#
● host主机名，包括端口
● hostname主机名
● pathnameurl中的路径部分
● protocol协议一般是http、https
● search查询字符串

location.href属性举例:

var btn1 = document.querySelector( ".btn1")
btn1.onclick = function(){
 location.href = "http:/ /wWw.4399.com"//修改href属性也可以跳转页面
// location.assign( "http://www.qq.com")
//替换是将当前页面替换掉,不能用回退按钮进行回退
//location.replace( "http://www.qq.com")
//重新加载当前页面,相当于点击了刷新按钮
//location .reload()
}