专栏首页谈补锅JS DOM学习笔记

JS DOM学习笔记

1、window对象代表当前浏览器窗口

2、使用window对象的属性、方法的时候可以省略window。例如:window.alert("hello")一般写成alert("hello"); window.document一般写成document

3、window.setInterval(method, delay);//每过delay毫秒就调用一次method函数,相当于是计时器

4、window.clearInterval(name); //取消计时器name

//setInterval(method, delay)函数和clearInterval(name)演示

//每隔一秒弹出“hello"
var timer = setInterval(function(){ alert("hello"); }, 1000);

//调用closeTimer方法停止timer计时器
function  closeTimer(){
      clearInterval(timer);    
}

5、setTimeout(method, delay); //deay毫秒之后执行method函数,和setInterval的区别是setTimeout只执行一次,setInterval可以不断的执行无数次

6、onload(页面加载后触发):网页加载完毕时触发,浏览器是一边下载文档、一边解析执行,可能会出现JavaScript执行时需要操作某个元素,这个元素还没有加载,如果这样就要把操作的代码放到body的onload事件中,或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发,body onload才是全部加载完成。

window.onload = function () { //...... }  //动态注册事件,窗体加载完成后执行,和body onload效果差不多

7、window.控件Id(不建议使用),推荐document.getElementById("控件Id")来获取标签对象

8、事件:onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeypress(按下按键)、onkeyup(松开按键)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)、oncontextmenu(在浏览器中单击鼠标右键显示‘右键菜单’时触发)

9、window.location对象: window.location.href = "*.html"; //重新导航到新页面,可以取值,也可以赋值

    window.location.reload();  //刷新当前页

10、window.event是IE下非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取得相关信息。

        window.event.altKey属性:bool类型,表示事件发生时是否按下了alt键。类似的还有cltKey、shiftkey。

function TestClt(){
      if  (window.event.altKey){
            alert("按下了alt键");
     }
}

11、用document.createElement(name):创建标签。

var btn = document.createElement("input");    //创建一个input标签
btn.type = "button";//input标签类型为按钮
btn.value = "提交"; //设置按钮值
document.appendChild(btn);    //将按钮添加到文档中

13、不同浏览器中对DOM支持的方法不一样

  • 获取网页中那个元素触发了事件,在IE中使用srcElement; 在FireFox里使用target
  • 使用Dom获取和更改网页标签元素内文本,在IE中使用innerText; 在FireFox里使用textContent
  • 动态为网页或元素绑定事件,在IE中绑定事件的方法是attachEvent; 在FireFox中绑定事件的方法是addEventListener
  • jQuery之类的框架进行了封装,解决了不同浏览器上Dom的不同

14、jQuery的ready和Dom的onload的区别:window.onload只能注册一次,是在所有的Dom元素创建完毕、图片、CSS都加载完毕后才被触发;而jQuery的ready则是在Dom元素创建完毕后被触发,这样可以提高网页的响应速度

15、js打印一个对象的所有属性:

//传入一个对象
function (swiper){
    var msg = "";
                    
     for(var item in swiper) msg += item +" : "+swiper[item] + "\n";

     alert("对象属性:\n" + msg);
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CocoaAsyncSocket + Protobuf 处理粘包和拆包问题

          在上一篇文章《iOS之ProtocolBuffer搭建和示例demo》分享环境的搭建, 我们和服务器进行IM通讯用了github有名的框架Cocoa...

    tandaxia
  • 2019windows上安装Mac OS 10.14过程详细截图

    之前VMware12里面的Mac OS10.10升级后,键盘鼠标就用不了了。试了几次都这样,只能重装VMware14, 安装Mac OS 10.14系统。把步骤...

    tandaxia
  • html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能。当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标...

    tandaxia
  • 设置WPF窗体全屏显示:

    //全屏代码: private void Window_Loaded(object sender, RoutedEventArgs e) { // 设...

    hbbliyong
  • [768]解决网页屏蔽F12或右键打开审查元素

    参考:https://www.jianshu.com/p/d5b8a84cbbd4 https://blog.csdn.net/qq_23013025/art...

    周小董
  • Art of Android Development Reading Notes 8

    《Android开发艺术探索》读书笔记 (8) 第8章 理解Window和WindowManager

    宅男潇涧
  • Python tkinter学习3 En

    #tk_entry_text.py #学习tk的Entry组件,学习在界面中如何实现输入及显示信息 import tkinter as tk ####...

    py3study
  • JavaScript面向对象之Windows对象

    JavaScript之Window对象 首先我们先了解一个概念:事件。 事件,就是把一段代码设置好,满足条件时触发。或者说,事件是可以被 JavaScript ...

    二十三年蝉
  • 分区操作后索引的状态

    导读:DDL操作是否会导致索引失效的原则上是看是否引起数据发生变化,如果分区的数据发生了改变,则索引需要失效才能保证结果的准确性,如果数据没有发生变化,则索引的...

    数据和云
  • 让前端监控数据采集更高效

    随着业务的快速发展,我们对生产环境下的问题感知能力越来越关注。作为距离用户最近的一层,前端的表现是否可靠、稳定、好用,很大程度上决定着用户对整个产品的体验和感受...

    桃翁

扫码关注云+社区

领取腾讯云代金券