zoukankan      html  css  js  c++  java
  • JavaScript学习-4——DOM对象、事件

    本章目录

    --------window对象

    --------document对象

    --------事件

    一、window对象

    函数调用:

    自己封装的函数只写:函数名();

    数学函数Math  例:绝对值:Math.abs()

    window.Name();调用函数

    window.top;调用属性

    ①打开新窗口

    window.open(“一”,“二”,“三”,“四”)

    第一部分:页面地址

    第二部分:打开方式_blank在新窗口,_self在自身打开

    第三部分:控制窗口,用空格隔开

    toolbar=no新打开的窗口无工具条
    menubar=no无菜单栏 status=no无状态栏
    width=100 height=100 宽度高度
    left=100 打开的窗口距离左边多少距离
    resizable=no窗口大小不可调
    scrollbars=yes 出现滚动条
    location=yes 有地址栏

    ②关闭指定窗口

    window.close();关闭当前窗口

    a.close();关闭a窗口

    array[i].close();关闭多个窗口,创建数组存储多个窗口

    window.opnner.close();关闭打开窗口的源窗口

    ③间隔和延时

    window.setInterval("要执行的代码",间隔的毫秒数) 

    window.clearInterval(间隔的id); 循环一次之后用来清除隔几秒执行的代码

    window.setTimeout("要执行的代码",延迟的毫秒数)

    window.clearTimeout(延迟的id);清除setTimeout,一般延迟执行较为常用。

    例如每间隔1s打开一个新窗口:

        <script>
            function Show(){
                    window.open("1.html","_blank");
            }
            window.setInterval("Show()",1000);
        </script>

    清除间隔:

        <body>
            <input type="button" value="清除间隔" onClick="Clear()" />
            <script>
            function Show(){
                    window.open("1.html","_blank","width='100',height='100'");
            }
            var a = window.setInterval("Show()",3000);
            
            function Clear(){
                    window.clearInterval(a);
            }
        </script>
        </body>

    ④页面操作

    window.navigate("url") ;跳转页面;

    window.moveTo(x,y); 移动页面

    window.resizeTo(宽,高); 调整页面

    window.scrollTo(x,y);滚动页面至哪里。该方法可行,其他方法因浏览器原因,有不同表现

    ⑤历史对象

    window.history对象

    属性:

        length返回浏览器历史列表中的元素数量。

    方法:

    .back();加载 history 列表中的前一个 URL,返回。

    .forward();加载 history 列表中的下一个 URL,前进。

    .go(n); 加载 history 列表中的某个具体页面。n是正数代表前进n个页面,n是负数代表后退n个页面。

    ⑥window.location对象

    location 对象包含有关当前 URL 的信息。

    href 属性设置或返回当前显示的文档的完整 URL。

    var s = window.location.href;获取当前 页面的地址

    window.location.href="http://www.baidu.com";修改页面地址,会跳转页面 

    host 属性是一个可读可写的字符串,可设置或返回当前 URL 的主机名称和端口号。

    hostname 属性设置或返回当前 URL 的主机名。

    pathname 属性设置或返回当前 URL 的路径部分。

    port 属性设置或返回当前 URL 的端口部分。

    protocol 属性设置或返回当前 URL 的协议。

    search 属性设置或返回当前 URL 的查询部分(问号 ? 之后的部分)。

    ⑦显示屏幕

    Screen 对象包含有关客户端显示屏幕的信息。

    对象属性:

    height属性返回屏幕高度

    width属性返回屏幕宽度

    二、document对象

    document对象,使我们脚本中对 HTML 页面中的所有元素进行访问。

    ①找到元素

    id找到元素

    getElementById() ;

    class找到元素

    getElementsByClassName();

    标签名找

    getElementsByTagName() ;

    表单元素

    getElementsByName() ;

    ②操作内容

    (例如一个div标签<div id="aa"></div>)

    获取内容

    var a =document.getElementById("aa")

    修改内容

    ——aa.innerText="添加文本";

    ——aa.innerHTML="<a>添加</a>"

    ③获取属性

    找到属性

    .getAttribute("属性名");

    添加属性

    .aa.setAttribute("属性名","属性值")   

    移除属性

    .removeAttribute("属性名");

    ④获取样式

    (例如一个div标签<div id="aa"></div>)

    document.getElementById("aa").style.backgroundColor="red";

    三、事件

    ①鼠标事件

    onclick 鼠标点击。

    ondbonlclick 鼠标双击。

    onmousedown 事件会在鼠标按键被按下时发生。

    onmouseup 事件会在鼠标按键被松开时发生。

    onmouseover 事件会在鼠标指针移上时发生。

    onmousemove 事件会在鼠标指针移动时发生。

    onmouseout 事件会在鼠标指针移出指定的对象时发生。

    ②窗口图片

    onresize 事件会在窗口或框架被调整大小时发生。

    onunload 事件在用户退出页面时发生。

    onload 事件会在页面或图像加载完成后立即发生。

    onerror 事件会在文档或图像加载过程中发生错误时被触发。

    onabort 事件会在图像加载被中断时发生。

    ③表单元素

    onselect 事件会在文本框中的文本被选中时发生。

    onblur 事件会在对象失去焦点时发生。

    onchange 事件会在域的内容改变时发生。

    onfocus 事件在对象获得焦点时发生。

    onsubmit 事件会在表单中的确认按钮被点击时发生。

    onreset 事件会在表单中的重置按钮被点击时发生。

    ④键盘事件

    onkeydown 事件会在用户按下一个键盘按键时发生。

    onkeyup 事件会在键盘按键被松开时发生。

    onkeypress 事件会在键盘按键被按下并释放一个键时发生。

    event.keyCode;属性返回onkeypress事件触发的键的值的字符代码,或者onkeydown 或 onkeyup事件的键的代码。

    event. which 属性返回onkeypress事件触发的键的值的字符代码,或者onkeydown 或 onkeyup事件的键的代码。

    例子:

    在文本框中按下空格键弹窗

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    <body>
        <input type="text" name="a" onKeyDown="Show(event)" />
    </body>
    </html>
    <script>
        function Show(event){
                var a = event.keyCode;
                if(a==32){
                        alert("按下了空格键");
                }
        }
    </script>

     按键返回值参照表:

     

    Js使我们有能力创建动态页面,网页中的每个元素都可以产生某些可以触发js事件的函数,我们可以认为事件是可以被js侦测到的一种行为。

    事件主要分为冒泡型事件、以及捕获型事件。目前ie只支持冒泡型事件。火狐、Chrome等支持捕获型

    使用返回值改变元素的默认行为:
    HTML大多数元素包含默认行为,例如:超链接、提交按钮等,可以通过添加return flase来阻止默认事件发生。

    通用型绑定事件的方法

    绑定HTML元素属性<input type="button" vlaue="按钮" onclick="Btn()" />

    绑定DOM对象属性document.getElementById("btn").onclick;

  • 相关阅读:
    HTTP content-type
    python3学习--安装OCR识别库tesserocr
    http post get 类库 httphelper
    MD5
    解决python3中cv2读取中文路径的问题
    web api获得Post数据为空的解决办法
    python3项目打包成exe可执行程序
    pip install 使用国内镜像
    win10家庭版组策略安装
    在国企的日子(第七章 转正)
  • 原文地址:https://www.cnblogs.com/wannian/p/8333871.html
Copyright © 2011-2022 走看看