(四) JavaScript 高级篇

其他 2020-03-18 18:19:17 阅读次数: 0

1.事件监听机制：

1概念

某些组件被执行了某些操作后，触发某些代码的执行。

  • 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
  • 事件源：组件。如： 按钮 文本输入框…
  • 监听器：代码。
  • 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。

2常见的事件：

  1. 点击事件：

    1. onclick：单击事件
    2. ondblclick：双击事件

  2. 焦点事件

    1. onblur：失去焦点
    2. onfocus:元素获得焦点。

  3. 加载事件：

    1. onload：一张页面或一幅图像完成加载。

  4. 鼠标事件：

    1. onmousedown 鼠标按钮被按下。
    2. onmouseup 鼠标按键被松开。
    3. onmousemove 鼠标被移动。
    4. onmouseover 鼠标移到某元素之上。
    5. onmouseout 鼠标从某元素移开。

  5. 键盘事件：

    1. onkeydown 某个键盘按键被按下。
    2. onkeyup 某个键盘按键被松开。
    3. onkeypress 某个键盘按键被按下并松开。

  6. 选择和改变

    1. onchange 域的内容被改变。
    2. onselect 文本被选中。

  7. 表单事件：

    1. onsubmit 确认按钮被点击。
    2. onreset 重置按钮被点击。

3单机事件案例

<body>
    <img id="light" src="img/off.gif"  onclick="fun();">
    <img id="light2" src="img/off.gif">
    
    <script>
        function fun(){
            alert('我被点了');
            alert('我又被点了');
        }
    
        function fun2(){
            alert('咋老点我？');
        }
    
        //1.获取light2对象
        var light2 = document.getElementById("light2");
        //2.绑定事件
        light2.onclick = fun2;
    
    
    </script>
</body>

2.BOM:

1 概念：

  • Browser Object Model 浏览器对象模型
  • 将浏览器的各个组成部分封装成对象。

2 组成：

  • Window：窗口对象
  • Navigator：浏览器对象
  • Screen：显示器屏幕对象
  • History：历史记录对象
  • Location：地址栏对象

3 Window：窗口对象

1. 创建

  • Window对象不需要创建可以直接使用 window使用。 window.方法名();
  • window引用可以省略。 方法名();

2. 方法

  1. 与弹出框有关的方法：
  • alert() 显示带有一段消息和一个确认按钮的警告框。
  • confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
    • 如果用户点击确定按钮，则方法返回true
    • 如果用户点击取消按钮，则方法返回false
  • prompt() 显示可提示用户输入的对话框。
    • 返回值：获取用户输入的值
  1. 与打开关闭有关的方法：
  • close() 关闭浏览器窗口。
    • 谁调用我 ，我关谁
  • open() 打开一个新的浏览器窗口
    • 返回新的Window对象
  1. 与定时器有关的方式

  • setTimeout() 在指定的毫秒数后调用函数或计算表达式。

    • 参数：
      1. js代码或者方法对象
      2. 毫秒值
    • 返回值：唯一标识，用于取消定时器

  • clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

  • setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

  • clearInterval() 取消由 setInterval() 设置的 timeout。

3. 属性：

  1. 获取其他BOM对象：
  • history
  • location
  • Navigator
  • Screen
  1. 获取DOM对象
  • document

4.轮播图代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
    <img id="img" src="img_1.jpg" width="100%">
    <script>
        //修改图片src属性
        var number = 1;
        function fun(){
            number ++ ;
            //判断number是否大于3
            if(number > 3){
                number = 1;
            }
            //获取img对象，获取对象必须在创建对象之后
            var img = document.getElementById("img");
            //更换图片源，形成轮播图效果
            img.src = "img_"+number+".jpg";
        }
        //2.定义定时器 每3s执行一次fun
        setInterval(fun,3000);
    </script>
</body>
</html>

4. Location：地址栏对象

1. 创建(获取)：

  • window.location 或 location

2. 方法：

  • reload() 重新加载当前文档。刷新

3. 属性

  • href 设置或返回完整的 URL。

4.Location代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location对象</title>
</head>
<body>
    <input type="button" id="btn" value="刷新">

    <input type="button" id="gobaidu" value="去百度">
    <script>
        //reload方法，定义一个按钮，点击按钮，刷新当前页面
        //1.获取按钮
        var btn = document.getElementById("btn");
        //2.绑定单击事件
        btn.onclick = function(){
            //3.刷新页面
            location.reload();
        }

        //获取href
        var href = location.href ;
        //alert(href);
        //点击按钮，去访问www.baidu.cn官网
        //1.获取按钮
        var gobaidu = document.getElementById("gobaidu");
        //2.绑定单击事件
        gobaidu.onclick = function(){
            //3.去访问百度
            location.href = "https://www.baidu.com";
        }

    </script>
</body>
</html>

5. History：历史记录对象

  1. 创建(获取)：
  • window.history 或 history
  1. 方法：
  • back() 加载 history 列表中的前一个 URL。
  • forward() 加载 history 列表中的下一个 URL。
  • go(参数) 加载 history 列表中的某个具体页面。
    • 参数：
      • 正数：前进几个历史记录
      • 负数：后退几个历史记录
  1. 属性：
  • length 返回当前窗口历史列表中的 URL 数量。

4.Location代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>History对象</title>
</head>
<body>

    <input type="button" id="btn" value="获取历史记录个数">
    <a href="09_History对象2.html">09页面</a>
    <input type="button" id="forward" value="前进">
<script>
    //1.获取按钮
    var btn = document.getElementById("btn");
    //2.绑定单机事件
    btn.onclick = function(){
        //3.获取当前窗口历史记录个数
        var length = history.length;
        alert(length);
    }


    //1.获取按钮
    var forward = document.getElementById("forward");
    //2.绑定单机事件
    forward.onclick = function(){
       //前进
       // history.forward();
        history.go(1);
    }
</script>

</body>
</html>

3.DOM：

1.概念

Document Object Model 文档对象模型

  • 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

2.DOM组成部分

W3C DOM 标准被分为 3 个不同的部分：

  1. 核心 DOM - 针对任何结构化文档的标准模型
    • Document：文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment:注释对象
    • Node：节点对象，其他5个的父对象
  2. XML DOM - 针对 XML 文档的标准模型
  3. HTML DOM - 针对 HTML 文档的标准模型

3.核心DOM模型：

1.Document：文档对象

  1. 创建(获取)：在html dom模型中可以使用window对象来获取
    • window.document 或 document
  2. 方法：
    1. 获取Element对象：
      1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
      2. getElementsByTagName() ：根据元素名称获取元素对象们。返回值是一个数组
      3. getElementsByClassName() :根据Class属性值获取元素对象们。返回值是一个数组
      4. getElementsByName() : 根据name属性值获取元素对象们。返回值是一个数组
    2. 创建其他DOM对象：
      • createAttribute(name)
      • createComment()
      • createElement()
      • createTextNode()
  3. 属性 innerHTML
    1. 获取元素对象
    2. 使用innerHTML属性修改标签体内容
  4. document代码演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document对象</title>   
</head>
<body>


    <div id="div1">div1</div>
    <div id="div2">div2</div>

    <div id="div3">div3</div>

    <div class="cls1">div4</div>
    <div class="cls1">div5</div>

    <input type="text" name="username">

<script>
    //1.根据id属性值获取元素对象。id属性值一般唯一
    var div = document.getElementById("div1");
    //2.根据元素名称获取元素对象们。返回值是一个数组
    var divs = document.getElementsByTagName("div");
    //alert(divs.length);
    //3.根据Class属性值获取元素对象们。返回值是一个数组
    var div_cls = document.getElementsByClassName("cls1");
   // alert(div_cls.length);
    //4.根据name属性值获取元素对象们。返回值是一个数组
    var ele_username = document.getElementsByName("username");
    //alert(ele_username.length);

    var table = document.createElement("table");
    alert(table);
</script>
</body>
</html>

2.Element：元素对象

  1. 获取/创建：通过document来获取和创建
  2. 方法：
    1. removeAttribute() ：删除属性
    2. setAttribute() ：设置属性
  3. Element代码演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element对象</title>
</head>
<body>
    <a>点我试一试</a>
    <input type="button" id="btn_set" value="设置属性">
    <input type="button" id="btn_remove" value="删除属性">

<script>
    //获取btn
    var btn_set =document.getElementById("btn_set");
    btn_set.onclick = function(){
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.setAttribute("href","https://www.baidu.com");
    }


    //获取btn
    var btn_remove =document.getElementById("btn_remove");
    btn_remove.onclick = function(){
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.removeAttribute("href");
    }   
</script>
</body>
</html>

3.Node：节点对象，其他5个的父对象

  1. 特点：所有DOM对象都可以被认为是一个节点
  2. 方法：CRUD DOM树：
    • appendChild()：向节点的子节点列表的结尾添加新的子节点。
    • removeChild() ：删除（并返回）当前节点的指定子节点。
    • replaceChild()：用新节点替换一个子节点。
  3. 属性：
    • parentNode 返回节点的父节点。

---插图---
4. Node代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
        #div3{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>
    <a href="javascript:void(0);" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="add">添加子节点</a>
    <--!javascript:void(0)则停留在原地，一动不动，我们称之为“死链接”-->
<script>
    //1.获取超链接
    var element_a = document.getElementById("del");
    //2.绑定单击事件
    element_a.onclick = function(){
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);
    }

    //1.获取超链接
    var element_add = document.getElementById("add");
    //2.绑定单击事件
    element_add.onclick = function(){
        var div1 = document.getElementById("div1");
       //给div1添加子节点
        //创建div节点
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3");

        div1.appendChild(div3);
    }

    var div2 = document.getElementById("div2");
    var div1 = div2.parentNode;
    alert(div1);
</script>
</body>
</html>
Code-Coke
发布了6 篇原创文章 · 获赞 0 · 访问量 59
私信 关注

猜你喜欢

转载自blog.csdn.net/j572864517/article/details/104949913
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022