浅述Javascript的外部对象


Posted in Javascript onDecember 07, 2016

浅述Javascript的外部对象

Window 浏览器:

- location:地址
- history:历史
- Document:文档
- screen:窗口
- navigator:帮助

> 1.外部对象就是浏览器提供的API -- **BOM**

> 2.这些对象由w3c规定,由浏览器开发者设计并开发

> 3.这些对象分为2部分,其中BOM包含了DOM

> 4.我们可以通过js访问这些对象

# 外部对象

> BOM (Browser Object Model)

    浏览器对象模型,用来访问和操纵浏览器窗口,是JavaScript有能力与浏览器对话。

> DOM (Document Object Model)

    文档对象模型,用来操作文档。

##1.对话框

- alert(str)
    - 提示对话框,显示str字符串的内容

- confirm(str)
    - 确认对话框,显示str字符串的内容
    - 按"确定"按钮返回true,其他操作返回false

>案例

//调用window对象的属性或方法,可以省略"window."
 //1.弹出框
  //1)弹出框
  function f1(){
   alert("你好,小俊子");
  }
  //2)确认框
  function f2(){
   var v = confirm("你吃了吗?");
   //点击确定返回true,否则返回false
   console.log(v);
  }
  //3)输入框
  function f3(){
   var p = prompt("你吃的什么?");
   //点击取消返回null
   console.log(p);
  }

## 2. 定时器

- 多用于网页动态时钟,制作倒计时,跑马灯效果

- 周期性时钟

    - 以一定的间隔执行代码,循环往复

    - setInterval(exp,time);

    - 返回已经启动的定时器对象

- 停止启动的定时器

    - clearInterval(tID)

    - tID:启动的定时器对象

- 一次性时钟

    - 在一个设定的时间间隔之后来执行代码,而不是在函数被调用后执行

 - setTimeout(exp,time);

- 停止启动的定时器

    - clearTimeout(tID)   

- tID:启动的定时器对象

> 案例

1)周期性定时器

//每隔N毫秒执行一次函数,反复执行,直到达到停止条件位置。
  function f4(){
   var n = 5;
   //启动定时器,返回定时器的ID,用来停止定时器 
   var id = setInterval(function(){
    console.log(n); 
    switch(n%4){
     case 0: btn1();break;
     case 3: btn2();break;
     case 2: btn3();break;
     case 1: btn4();break; 
     default: ;
    }
    n++;
   },100);
   //启动定时器就相当于启动了一个支线程,当前方法f4相当于主线程。
   //2个线程并发执行,不互相等待,
   //因此主线程在启动完支线程后立刻向下执行,而支线程却需要在1秒后才执行
   console.log("蹦");
  }

2)一次性定时器

//推迟N毫秒执行一次函数,执行完之后,自动停止,
  //也可以在未执行前手动停止
 var id;
 function f5(){
  //启动定时器,若想在未执行定时器前就将它停止,需要使用id
  id = setTimeout(function(){
   console.log("叮叮叮");
   f4();
  },3000);
 }
 function f6(){
  //若定时器已经执行,则取消无效; 若定时器还未执行,则可以取消
  clearTimeout(id);
  console.log("已停止!");
 }

 ## 3. 常用属性

- screen 对象

    - 包含有关客户端显示屏幕的信息
    - 常用于获取屏幕的分辨率和色彩
    - 常用属性:
        - width height
        - availWidth availHeight

-  history对象

    -  包含用户访问过的URL

        -  length属性:浏览器历史列表中的URL数量

    - 方法:

        - back();
        - forwird();

- location对象

    - 包含有关当前URL的信息

        - 常用于获取和改变当前浏览的网址

    - href属性:当前窗口正在浏览的网址地址

    - 方法

        - reload():重新载入当前网址,相当于刷新   

  - navigator 对象

    - 包含有关浏览器的信息

        - 常用于获取客户端浏览器和操作系统的信息

> 案例

//Location对象
 function f1(){
  var b = confirm("你真的要离开我吗?");
  if(b){
   location.href = "http://www.tmooc.cn";
  } 
 }
 //刷新页面
 function f2(){
  location.reload();
 }
 //screen 对象: 获取屏幕宽高
 function f3(){
  console.log(screen.width);
  console.log(screen.height);
  console.log(screen.availWidth);
  console.log(screen.availHeight);
 }
 //history对象 
 function f4(){
  history.forward();
 }
 //navigator对象
 function f5(){
  console.log(navigator.userAgent);
 }

    ## DOM

### DOM操作

- 查找节点
- 读取节点信息
- 修改节点信息
- 创建节点信息
- 删除节点

### 读取、修改

- 节点信息

    - nodeName:节点名称
    - nodeType:节点类型

- (1) 读取节点

    - 读取节点的名称,类型 

<p id="p1">1.<b>读写</b>节点</p>
      <p id="p2">2.<b>查询</b>节点</p>
      <p id="p3">3.<b>增删</b>节点</p>
      var p1 = document.getElementById("p1");
      console.log(p1.nodeName);
      console.log(p1.nodeType);

    - 读写节点的内容

         - 双标签中间的文本叫内容,任何双标签都有内容
         - innerHTML:包括子标签信息
         - innerText:忽略子标签

console.log(p1.innerHTML);
        p1.innerHTML="1.<i>读写</i>节点";
        console.log(p1.innerText);

    - 读写节点的值

        - 表单控件中的数据叫值,只有如下表单控件才有值:
        - input
        - select
        - textarea

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
javascript动画算法实例分析
Jul 31 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 #Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 #Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 #Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 #Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 #Javascript
JavaScript之Vue.js【入门基础】
Dec 06 #Javascript
浅析JavaScript中作用域和作用域链
Dec 06 #Javascript
You might like
PHP执行速率优化技巧小结
2008/03/15 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php数组键值用法实例分析
2015/02/27 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
javascript 简练的几个函数
2009/08/29 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
Python 基础教程之闭包的使用方法
2017/09/29 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
小学生班会演讲稿
2014/01/09 职场文书
个人授权委托书模板
2014/09/14 职场文书
工作年限证明模板
2014/11/01 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL