(四) JavaScript 高级篇

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.轮播图代码演示


<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.locationlocation

2. 方法:

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

3. 属性

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

4.Location代码演示


<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.historyhistory
  1. 方法:
  • back() 加载 history 列表中的前一个 URL。
  • forward() 加载 history 列表中的下一个 URL。
  • go(参数) 加载 history 列表中的某个具体页面。
    • 参数:
      • 正数:前进几个历史记录
      • 负数:后退几个历史记录
  1. 属性:
  • length 返回当前窗口历史列表中的 URL 数量。

4.Location代码演示


<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.documentdocument
  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代码演示

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document对象title>   
head>
<body>


    <div id="div1">div1div>
    <div id="div2">div2div>

    <div id="div3">div3div>

    <div class="cls1">div4div>
    <div class="cls1">div5div>

    <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代码演示

<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代码演示


<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">div2div>
        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>

你可能感兴趣的:(JavaWeb学习总结)