浅述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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
jquery控制listbox中项的移动并排序
Nov 12 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
Javascript的this详解
Mar 23 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
PHP 数组教程 定义数组
2009/10/23 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
Javascript中的 “&amp;” 和 “|” 详解
2017/02/02 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
JavaScript实现图片放大镜效果
2019/06/27 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python、Javascript中的闭包比较
2015/02/04 Python
机器学习python实战之手写数字识别
2017/11/01 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
python算的上脚本语言吗
2020/06/22 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
团代会闭幕词
2015/01/28 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS
python百行代码实现汉服圈图片爬取
2021/11/23 Python