day09——BOM

什么是BOM:

BOM,Browser Object Model,即浏览器对象模型。

其实就是操作浏览器的一些能力

我们可以操作哪些内容:

- 获取一些浏览器的相关信息(窗口的大小)

- 操作浏览器进行页面跳转

- 获取当前浏览器地址栏的信息

- 操作浏览器的滚动条

- 浏览器的信息(浏览器的版本)

- 让浏览器出现一个弹出框(alert/confirm/prompt)

- BOM 的核心就是 window 对象 window 是浏览器内置的一个对象,里面包含着操作浏览器的方法

window对象包含了核心对象:
  location,即当前页面的地址
  history,即页面的历史记录
  navigator,包含浏览器相关信息
  screen,用户显示屏幕相关属性
  document,即文档对象

图示理解 

窗口对象(window): 

常用方法
  alert
  confirm
  prompt  

定时器
  什么叫定时器?我们可以看到很多网站首页有一个“图片轮播”特效,每隔2s图片变换一次,这里就用到了定时器。 定时器用途非常广,在图片轮播、在线时钟、弹窗广告等地方大显身手。凡是自动执行的东西,很大可能都是跟定时器有关。
  setTimeout()和clearTimeout();
  setInterval()和clearInterval();


  在JavaScript中,我们可以使用setTimeout()方法来设置“一次性”调用的函数。其中clearTimeout()可以用来取消执行setTimeout()方法。
  在JavaScript中,我们可以使用setInterval()方法来设置“重复性”调用的函数。其中clearInterval()可以用来取消执行setTimeout()方法。 

对话框
  alert() 消息提示框
  confirm() 消息确认框
  prompt() 

获取浏览器窗口的尺寸

浏览器的 onscroll 事件 

浏览器滚动的距离
   scrollTop  获取的是页面向上滚动的距离
  两个获取方式

区别


  scrollLeft 获取页面向左滚动的距离 
  两个方法 

历史记录对象(history):

获取history对象 window.history 

位置对象(location):

常用属性:location.href
  获得当前页面的URL地址:location.href (window.location.href)

常用方法
  重新加载当前文档:location.reload();

属性 

屏幕对象(screen了解):

提供了用户显示屏幕的相关属性,比如显示屏幕的宽度、高度,可用宽度、高度。 

浏览器的版本信息(navigator了解):

- window 中有一个对象叫做 navigator

- 是专门用来获取浏览器信息的

navigator.userAgent 

navigator.appNamenavigator.appVersion 

navigator.platform 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery是一种流行的JavaScript库,它可以简化编写JavaScript代码的过程。在这里,我将向你介绍如何使用jQuery创建一个简单的日历插件。 首先,我们需要在HTML文件中引入jQuery库和我们自己的脚本文件: ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="calendar.js"></script> ``` 接下来,我们需要在HTML文件中创建一个空的`<div>`元素,用于容纳我们的日历: ```html <div id="calendar"></div> ``` 现在,我们已经准备好开始编写JavaScript代码了。在我们的脚本文件中,我们将定义一个名为`Calendar`的对象,该对象将具有以下属性和方法: ```javascript var Calendar = { // 初始化日历 init: function(selector) { // ... }, // 绘制日历 draw: function(year, month) { // ... }, // 获取指定月份的天数 getDaysInMonth: function(year, month) { // ... }, // 获取指定月份的第一天是星期几 getFirstDayOfWeek: function(year, month) { // ... } }; ``` 现在,我们来看看这个对象的实现细节。首先是初始化方法: ```javascript init: function(selector) { var now = new Date(); var year = now.getFullYear(); var month = now.getMonth() + 1; $(selector).data('year', year); $(selector).data('month', month); this.draw(year, month); } ``` 在这里,我们获取当前的年份和月份,然后将它们存储在`<div>`元素的数据属性中。然后,我们调用`draw`方法来绘制日历。 接下来是绘制方法: ```javascript draw: function(year, month) { var daysInMonth = this.getDaysInMonth(year, month); var firstDayOfWeek = this.getFirstDayOfWeek(year, month); var html = '<table>'; html += '<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>'; var day = 1; for (var i = 0; i < 6; i++) { html += '<tr>'; for (var j = 0; j < 7; j++) { if (i === 0 && j < firstDayOfWeek) { html += '<td></td>'; } else if (day > daysInMonth) { html += '<td></td>'; } else { html += '<td>' + day + '</td>'; day++; } } html += '</tr>'; if (day > daysInMonth) { break; } } html += '</table>'; var selector = '#calendar'; $(selector).html(html); } ``` 在这里,我们首先获取指定月份的天数和该月份的第一天是星期几。然后,我们使用一个表格来绘制日历。我们遍历6行和7列,并根据当前日期填充单元格。如果日期超出了该月份的天数,我们就停止绘制。 最后,我们将HTML代码插入到`<div>`元素中。 最后是获取指定月份的天数和第一天是星期几的方法: ```javascript getDaysInMonth: function(year, month) { return new Date(year, month, 0).getDate(); }, getFirstDayOfWeek: function(year, month) { return new Date(year, month - 1, 1).getDay(); } ``` 这些方法分别使用JavaScript的`Date`对象来计算指定月份的天数和第一天是星期几。 现在,我们已经完成了一个简单的日历插件的开发。你可以在HTML文件中使用以下代码来初始化日历: ```javascript $(document).ready(function() { Calendar.init('#calendar'); }); ``` 当然,你还可以根据自己的需要对插件进行扩展和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值