浅述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 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
js Math 对象的方法
Sep 01 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
Python守护线程用法实例
2017/06/23 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
Python常见数据类型转换操作示例
2019/05/08 Python
Python读写文件基础知识点
2019/06/10 Python
python实现日志按天分割
2019/07/22 Python
Django异步任务线程池实现原理
2019/12/17 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
学生宿舍管理制度
2014/01/30 职场文书
销售活动策划方案
2014/08/26 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
介绍信怎么写
2015/01/30 职场文书
大学毕业生个人总结
2015/02/28 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript