• web前端java script BOM学习笔记2017.8.1



    DOM: document object model
    文档对象模型提供了一套可以访问和修改HTML文档内容的方法
    访问:获取
    修改:设置
    1 JS要去操作HTML元素,必须要先用JS找到他,转换为JS的DOM对象
    操作:
    a 标签属性
    b css属性
    c 元素内容
    2 找对象的方法
    a 通过标签名来找对象
    var DOM_OBJ=document.getElementsByTagName("标签名");
    返回的是集合(数组),即使只有一个标签,返回的也是一个集合
    b 通过id名来找对象:id名是唯一的
    var DOM_OBJ=document.getElementById("id名");
    c 可以组合使用标签名和id名的方式来获取对象
    d 通过name属性名来找对象,返回的是一个集合
    var DOM_OBJ=document.getElementsByName("nameValue");
    e 通过css类名找对象,返回的是一个集合
    var DOM_OBJ=document.getElementsByClassName("类名");

    3 操作标签的属性
    获取:var attVa=DOM_OBJ.属性名;//attruibute
    设置:DOM_OBJ.属性名=attVa;
    4 操作CSS属性
    获取:var cssVa=DOM_OBJ.style.css属性名;//只能获取内联式(嵌入式)的css属性值
    设置:DOM_OBJ.style.css属性名=cssVa;//设置的是内联式(嵌入式)的css属性值
    background-color===>backgroundColor
    list-style===>listStyle
    5 操作内容
    获取
    非表单元素:var txt=DOM_OBJ.innerHTML;
    表单元素:var txt=DOM_OBJ.value;
    设置
    非表单元素:DOM_OBJ.innerHTML=txt;//会将原有的内容替换掉
    表单元素:DOM_OBJ.value=txt;
    区分document.write()和innerHTML
    前者是方法后者是属性
    前者只能用document这个对象,后者可以是任意的非表单元素DOM对象
    前者不会覆盖原有的东西,后者会覆盖原来的内容
    ***************计时器***************
    是属于BOM里面的方法
    BOM:brower object model---提供了可以操作浏览器的方法和属性
    能够直接访问和修改的方法和属性是跟window相关

    计时器:
    window.setInterval();
    语法:
    setInterval(函数名,毫秒数);每隔多少毫秒去调用这个函数
    setInterval("函数名()",毫秒数);每隔多少毫秒去调用这个函数
    setInterval(function(){
    代码块;
    },毫秒数);每隔多少毫秒去调用这个函数
    setInterval("console.log(1111)",毫秒数);每隔多少毫秒去执行js代码
    清除计时器:
    var timer=setInterval();//定义了一个计时器
    clearInterval(timer);// 清除的是哪个计时器

    延时器:
    window.setTimeout();
    语法:
    setTimeout(函数名,毫秒数);过了多少毫秒后去执行一次这个函数
    setTimeout("函数名()",毫秒数);过了多少毫秒后去执行一次这个函数
    setTimeout(function(){
    代码块;
    },毫秒数);过了多少毫秒后去执行一次这个函数
    setTimeout("console.log(1111)",毫秒数);延迟多少毫秒去执行一次js代码
    清除延时器:
    var timer=setTimeout();//定义了一个延时器
    clearTimeout(timer);// 清除的是哪个延时器

    ***************事件***************
    事件:是用来实现JS与HTML之间的交互的。
    1 可以作用于任何对象
    2 通过函数来进行事件处理的。相关的函数是在事件发生时才执行
    3 事件分类:鼠标事件 键盘事件 表单事件 window事件
    ---事件分类
    1 鼠标事件
    click 单击
    dbclick 双击
    mouseover 悬停
    mouseout 离开
    mousedown 按下
    mouseup 抬起
    mousemove 移动

  • 相关阅读:
    翻译:实时通信协议UDP-RT——Michael Pan
    翻译:为DAW优化Windows
    翻译:Windows and Real-Time——Daniel Terhell
    笔记4:IIS6发布网站后“对XX路径的访问被拒绝”
    杂记3:VS使用Web Deploy一键发布网站到服务器
    杂记2:VS2013创建Windows服务实现自动发送邮件
    杂记1:不安装Oracle客户端远程连接Oracle的方法
    DevExpress随笔系列
    DevExpress(5): ASPxUploadControl上传照片后用ASPxBinaryImage展示
    DevExpress(4): ASPxGridView随笔
  • 原文地址:https://www.cnblogs.com/jiandandeboke/p/7389393.html
Copyright © 2020-2023  润新知