Web开发网站-05

目录

1 BOM

2 DOM

3 js事件监听

4 灯亮灯灭案例


1 BOM

  • 概念:Browser Object Model 浏览器对象模型,允许JavaScript与浏览器对话,JavaScript将浏览器的各个组成部分封装为对象。
  • 组成:
    • Window:浏览器窗口对象
    • Navigator:浏览器对象
    • Screen:屏幕对象
    • History:历史记录对象
    • Location:地址栏对象

Window

  • 介绍:浏览器窗口对象。
  • 获取:直接window.,其中window.可以省略。
  • 属性
    • history:对History对象的只读引用。
    • location:用于窗口或框架的Location对象。
    • navigator:对Navigator对象的只读引用。
  • 方法
    • alert():显示带有一段消息和一个确认按钮的警告框。
    • confirm():显示待有一段消息以及确认按钮和取消按钮的对话框。
    • setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。
    • setTimeout():在指定的毫秒数后调用函数或计算表达式。
  //获取
    window.alert("Hello BOM")
    alert("Hello BOM")

    //方法
    //confirm - 对话框 ---确认:true,取消:false
    var flag = confirm("您确认删除改记录吗?")
    alert(flag);

    //定时器 -setInterval  --周期性的执行某一个函数
    var i = 0;
    setInterval(function(){
        i++;
        console.log("定时器执行了"+i+"次");
    },2000);

    //定时器 --setTimeout  --延迟指定时间执行一次
    setTimeout(function(){
        alert("js")
    },3000)

 Location

  • 介绍:地址栏对象。
  • 获取:使用window.location获取,其中window.可以省略。
  • 属性:
    • href:设置或返回完整的url。
  //location
    alert(location.href);//拿到当前地址
    location.href = "https://www.baidu.com";//跳转到指定的域名

2 DOM

  • 概念:Document Object Model,文档对象模型。
  • 将标记语言的各个组成部分封装为对应的对象:
    • Document:整个文档对象(html)。
    • Element:元素对象(标签)。
    • Attribute:属性对象(标签中的属性)。
    • Text:文本对象(标签中文本)。
    • Comment:注释对象(注释)。
  • JavaScript通过DOM,就能够对HTML进行操作:
    • 改变HTML元素内容
    • 改变HTML元素的样式(css)
    • 对HTML DOM事件做出反应
    • 添加删除HTML元素
  • DOM是W3C(万维网联盟)的标准,定义类访问HTML和XML文档的标准,分为3个不同的部分:
    • Core(核心) DOM-所有文档类型的标准模型
      • Document:整个文档对象
      • Element:元素对象
      • Attribute:属性对象
      • Text:文本对象
      • Comment:注释对象
    • XML DOM-XML文档的标准模型
    • HTML DOM-HTML 文档的标准模型
      • image:<img>
      • Button:<input type='button'>
  • HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取的。
  • Document对象中提供了以下获取Element元素对象的函数:

        1、根据id属性值获取,返回单个Element对象

        var h1 = document.getElementById('h1');

        2、根据标签名称获取,返回Element对象数组

        var divs = document.getElementByTagName('div');

        3、根据name属性值获取,返回Element对象数组

        var hobbys = document.getElementsByName('hobby');

        4、根据class属性值获取,返回Element对象数组

        var clss = document.getElementByClassName('cls');

<script>
    //1.获取Element元素
    //1.1 获取元素 -根据id获取
     var img = document.getElementById("h1");
     alert(img);

    //1.2 获取元素-根据标签获取
     var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
        
    }

    //1.3 获取元素-根据name属性获取
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        alert(ins[i]);
        
    }

    //1.4 或取元素-根据class属性获取
    var divs = document.getElementsByClassName('cls');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
        
    }

    //2.查询参考手册,属性、方法
    var divs = document.getElementsByClassName('cls');
    var div1 = divs[0];

    div1.innerHTML = '小兔子666';

</script>

3 js事件监听

  • 事件:HTML事件是放生在HTML元素上的“事情”。比如:
    • 按钮被点击
    • 鼠标移动到元素上
    • 按下键盘按键
  • 事件监听:JavaScript可以在事件被侦测到时执行代码

        

事件绑定

        方式一:通过html标签中的事件属性进行绑定

        方式二:通过DOM元素属性绑定

<body>

    <input type="button" id="btn1" value="事件绑定1" onclick="on()"> 
    <input type="button" id="btn2" value="事件绑定2"> 

</body>
<script>
   function on(){
        alert("按钮1被点击了...")
   }

   document.getElementById('btn2').onclick = function(){
        alert("按钮2被点击了...")
   }
</script>

常见事件

事件名 说明
onclick 鼠标单击事件
onblur 元素失去焦点
onfocus 元素获取焦点
onload 某个页面或图像被完成加载
onsubmit 当表单提交时触发该事件
onkeydown 某个键盘的键被按下
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开
<body onload="load()">
    <form action="" style="text-align: center;" onsubmit="subfn()">
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()"> 

        <input id ="b1" type="submit" value="提交">
        
        <input id="b1" type="button" value="单击事件" onclick="fn1()">

    </form>

    <br><br><br>
    
    <table width="800px" border ="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>01</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr> 
        <tr align="center">
            <td>02</td>
            <td>李四</td>
            <td>93</td>
            <td>很优秀</td>
        </tr>
        <tr align="center">
            <td>03</td>
            <td>王五</td>
            <td>80</td>
            <td>良好</td>
        </tr>

    </table>
</body>
<script>
    //onload:页面/元素加载完成后触发
    function load(){

        console.log("页面加载完成...")
    }

    //onclick:鼠标点击事件
    function fn1(){
        console.log("我被点击了...");
    }

    //onblur:失去焦点事件
    function bfn(){
        console.log("失去焦点...");
    }

    //onfocus:获得焦点事件
    function ffn(){
        console.log("获得焦点...");
    }

    //onkeydown:某个键盘被按下
    function kfn(){
        console.log("键盘按下了");
    }

       //onmouseover:鼠标移动到元素之上
       function over(){
        console.log("鼠标移入了..");
    }

          //onmouseout:鼠标移出某元素之上
          function out(){
        console.log("鼠标移出了..");
    }

          //consubmit:提交表单事件
          function subfn(){
        alert("表单被提交了..");
    }
</script>

4 灯亮灯灭案例

1.点击“点亮”按钮,点亮灯泡,点击“熄灭”按钮,熄灭灯泡;--onclick

2.输入框聚焦后,展示消息;输入框离焦后,显示大写;

3.点击“全选"按钮使所有复选框呈现选择状态;点击”反选“按钮使所有的复选框呈现取消勾选状态;--onclick

</head>
    <img  id="light" src="img/off.png" > <br>

    <input type="button" value="点亮" onclick="on()">
    <input type="button" value="熄灭" onclick="off()">

    <br><br>

    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
    <br><br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    
    <br>
    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="反选" onclick="reverse()">

<body>
    <script>
        //1.点击“点亮”按钮,点亮灯泡,点击“熄灭”按钮,熄灭灯泡;--onclick
        function on(){
            //a.获取img元素对象
            var img = document.getElementById("light");
            //b.设置src属性
            img.src = "img/out.png"
        }

        function off(){
             //a.获取img元素对象
             var img = document.getElementById("light");
            //b.设置src属性
            img.src = "img/off.png"
        }

        //2.输入框聚焦后,展示消息;输入框离焦后,显示大写;
        function lower(){
            //a.获取输入框元素对象
            var input = document.getElementById("name");
            //b.将值转为小写
            input.value = input.value.toLowerCase();
        }

        function upper(){
           //a.获取输入框元素对象
           var input = document.getElementById("name");
            //b.将值转为大写
            input.value = input.value.toUpperCase();
        }
        

        //3.点击“全选"按钮使所有复选框呈现选择状态;点击”反选“按钮使所有的复选框呈现取消勾选状态;--onclick
        function checkAll(){
           //a.获取所有复选框的元素对象
           var hobbys = document.getElementsByName("hobby");
            //b.设置选中状态
            for (let i = 0; i < hobbys.length; i++) {
                const element = hobbys[i];
                element.checked = true;
            }
        }

        function reverse(){
           //a.获取所有复选框的元素对象
           var hobbys = document.getElementsByName("hobby");
            //b.设置选中状态
            for (let i = 0; i < hobbys.length; i++) {
                const element = hobbys[i];
                element.checked = false;
            }
        }

    </script>