浅述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 相关文章推荐
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
javascript跨域刷新实现代码
Jan 01 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
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
WordPress判断用户是否登录的代码
2011/03/17 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
详解python单例模式与metaclass
2016/01/15 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
python生成大写32位uuid代码
2020/03/03 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
Python如何实现的二分查找算法
2020/05/27 Python
浅析Python 序列化与反序列化
2020/08/05 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
2014年党员自我评议(5篇)
2014/09/12 职场文书
社区文明倡议书
2015/04/28 职场文书
实施意见格式范本
2015/06/05 职场文书