java筑基期(5)----javascript（高级(1)）

最新推荐文章于 2022-12-07 20:44:53 发布
最新推荐文章于 2022-12-07 20:44:53 发布
阅读量264 收藏
点赞数
分类专栏： 暑假java学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40739219/article/details/96140528
版权

什么是DOM?

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。

DOM：
* 概念： Document Object Model 文档对象模型
    * 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

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

    * 核心 DOM - 针对任何结构化文档的标准模型
        * Document：文档对象
        * Element：元素对象
        * Attribute：属性对象
        * Text：文本对象
        * Comment:注释对象

        * Node：节点对象，其他5个的父对象
    * XML DOM - 针对 XML 文档的标准模型
    * HTML DOM - 针对 HTML 文档的标准模型

 

DOM简单学习：为了满足案例要求

* 功能：控制html文档的内容
* 获取页面标签(元素)对象：Element
    * document.getElementById("id值"):通过元素的id获取元素对象

* 操作Element对象：
    1. 修改属性值：
        1. 明确获取的对象是哪一个？
        2. 查看API文档，找其中有哪些属性可以设置
    2. 修改标签体内容：
        * 属性：innerHTML
        1. 获取元素对象
        2. 使用innerHTML属性修改标签体内容

什么是BOM?

1. 概念：Browser Object Model 浏览器对象模型
    * 将浏览器的各个组成部分封装成对象。

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

3. Window：窗口对象
    1. 创建
    2. 方法
         1. 与弹出框有关的方法：
            alert()    显示带有一段消息和一个确认按钮的警告框。
            confirm()    显示带有一段消息以及确认按钮和取消按钮的对话框。
                * 如果用户点击确定按钮，则方法返回true
                * 如果用户点击取消按钮，则方法返回false
            prompt()    显示可提示用户输入的对话框。
                * 返回值：获取用户输入的值
         2. 与打开关闭有关的方法：
            close()    关闭浏览器窗口。
                * 谁调用我 ，我关谁
            open()    打开一个新的浏览器窗口
                * 返回新的Window对象
         3. 与定时器有关的方式
            setTimeout()    在指定的毫秒数后调用函数或计算表达式。
                * 参数：
                    1. js代码或者方法对象
                    2. 毫秒值
                * 返回值：唯一标识，用于取消定时器
            clearTimeout()    取消由 setTimeout() 方法设置的 timeout。

            setInterval()    按照指定的周期（以毫秒计）来调用函数或计算表达式。
            clearInterval()    取消由 setInterval() 设置的 timeout。

    3. 属性：
        1. 获取其他BOM对象：
            history
            location
            Navigator
            Screen:
        2. 获取DOM对象
            document
    4. 特点
        * Window对象不需要创建可以直接使用 window使用。 window.方法名();
        * window引用可以省略。  方法名();

Demo03Window对象

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

</head>
<body>
    <input id="openBtn" type="button" value="打开窗口">
    <input id="closeBtn" type="button" value="关闭窗口">

    <script>
        /*
            Window：窗口对象
                1. 创建
                2. 方法
                     1. 与弹出框有关的方法：
                        alert()	显示带有一段消息和一个确认按钮的警告框。
                        confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
                            * 如果用户点击确定按钮，则方法返回true
                            * 如果用户点击取消按钮，则方法返回false
                        prompt()	显示可提示用户输入的对话框。
                            * 返回值：获取用户输入的值
                     2. 与打开关闭有关的方法：
                        close()	关闭浏览器窗口。
                            * 谁调用我 ，我关谁
                        open()	打开一个新的浏览器窗口
                            * 返回新的Window对象
                     3. 与定时器有关的方式
                        setTimeout()	在指定的毫秒数后调用函数或计算表达式。
                            * 参数：
                                1. js代码或者方法对象
                                2. 毫秒值
                            * 返回值：唯一标识，用于取消定时器
                        clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

                        setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
                        clearInterval()	取消由 setInterval() 设置的 timeout。

                3. 属性：
                    1. 获取其他BOM对象：
                        history
                        location
                        Navigator
                        Screen:
                    2. 获取DOM对象
                        document
                4. 特点
                    * Window对象不需要创建可以直接使用 window使用。 window.方法名();
                    * window引用可以省略。  方法名();

         */

        /*alert("hello window");
        window.alert("hello a")*/
       
      

        /*

               //输入框
               var result =  prompt("请输入用户名");
               alert(result);
        */
       //打开新窗口
        var openBtn = document.getElementById("openBtn");
        var newWindow;
        openBtn.onclick = function(){
            //打开新窗口
            newWindow = open("https://www.baidu.com");
        }

        //关闭新窗口
        var closeBtn = document.getElementById("closeBtn");
        closeBtn.onclick = function(){
           // 关闭新窗口
		   
		   
					//确认框， 询问是否退出
					 var flag = confirm("您确定要退出吗？");
					 if(flag){
						 //退出操作

						 alert("欢迎再次光临！");
					 }else{
						 //提示：手别抖...
						 alert("手别抖...");
					 }
					 
            newWindow.close();
        }

       //一次性定时器
       //setTimeout("fun();",2000);
        //var id = setTimeout(fun,2000);
        //clearTimeout(id);
       /* function fun(){
            alert('boom~~');
        }

        //循环定时器
        var id = setInterval(fun,2000);
		
		//clearInterval可以解除循环
        clearInterval(id);
*/


      /* //获取history
       var h1 =  window.history;
       var h2 = history;

       alert(h1);
       alert(h2);
*/
        var openBtn = window.document.getElementById("openBtn");
        alert(openBtn);
        /*document.getElementById("");*/
    </script>
</body>
</html>


4. Location：地址栏对象
    1. 创建(获取)：
        1. window.location
        2. location（可在直接写，省略window）

    2. 方法：
        * reload()    重新加载当前文档。刷新
    3. 属性
        * href    设置或返回完整的 URL。

Demo05Location对象

<!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="goItcast" value="百度搜索">
    <script>
        //reload方法，定义一个按钮，点击按钮，刷新当前页面
        //1.获取按钮
        var btn = document.getElementById("btn");
        //2.绑定单击事件
        btn.onclick = function(){
            //3.刷新页面
            location.reload();
        }


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

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

 


5. History：历史记录对象
    1. 创建(获取)：
        1. window.history
        2. history

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

Demo07History对象1

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

    <input type="button" id="btn" value="获取历史记录个数">
    <a href="Demo09History对象2.html">09页面</a>
    <input type="button" id="forward" value="前进">
<script>
    /*
        History：历史记录对象
            1. 创建(获取)：
                1. window.history
                2. history

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


     */
    //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>

 

Demo08History对象2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>



</head>
<body>

    <img id="img" src="img/1.jpg" width="100%">
    <input type="button" id="back" value="后退">
    <script>
        /*
            分析：
                1.在页面上使用img标签展示图片
                2.定义一个方法，修改图片对象的src属性
                3.定义一个定时器，每隔3秒调用方法一次。


         */


        //修改图片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.定义定时器
        setInterval(fun,3000);


        //1.获取按钮
        var back = document.getElementById("back");
        //2.绑定单机事件
        back.onclick = function(){
            //后退
           // history.back();
            history.go(-1);
        }

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

事件的简单学习

 功能： 某些组件被执行了某些操作后，触发某些代码的执行。
    * 造句：  xxx被xxx,我就xxx
        * 我方水晶被摧毁后，（触发）我就责备对友。
        * 敌方水晶被摧毁后，（触发）我就夸奖自己。


 如何绑定事件
    1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
        1. 事件：onclick--- 单击事件

    2. 通过js获取元素对象，指定事件属性，设置一个函数

案例

Demo01绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>



</head>
<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>
</html>

 

Demo02电灯开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>

</head>
<body>

<img id="light" src="img/off.gif">

<script>
    /*
        分析：
            1.获取图片对象
            2.绑定单击事件
            3.每次点击切换图片
                * 规则：
                    * 如果灯是开的 on,切换图片为 off
                    * 如果灯是关的 off,切换图片为 on
                * 使用标记flag来完成

     */

    //1.获取图片对象
    var light = document.getElementById("light");

    var flag = false;//代表灯是灭的。 off图片

    //2.绑定单击事件
    light.onclick = function(){
        if(flag){//判断如果灯是开的，则灭掉
            light.src = "img/off.jpg";
            flag = false;

        }else{
            //如果灯是灭的，则打开

            light.src = "img/on.jpg";
            flag = true;
        }


    }
    
    

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

 

 

Demo04轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>



</head>
<body>

    <img id="img" src="img/banner_1.jpg" width="100%">

    <script>
        /*
            分析：
                1.在页面上使用img标签展示图片
                2.定义一个方法，修改图片对象的src属性
                3.定义一个定时器，每隔3秒调用方法一次。


         */


        //修改图片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.定义定时器，3秒执行一次fun函数，此处为死循环
        setInterval(fun,3000);

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

 

 

Demo06自动跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color:red;
        }

    </style>


</head>
<body>
    <p>
        <span id="time">5</span>秒之后，自动跳转到首页...
    </p>


    <script>
        /*
            分析：
               1.显示页面效果  <p>
               2.倒计时读秒效果实现
                   2.1 定义一个方法，获取span标签，修改span标签体内容，时间--
                   2.2 定义一个定时器，1秒执行一次该方法
               3.在方法中判断时间如果<= 0 ，则跳转到首页

         */
       // 2.倒计时读秒效果实现

        var second = 5;
        var time = document.getElementById("time");

        //定义一个方法，获取span标签，修改span标签体内容，时间--
        function showTime(){
            second -- ;
            //判断时间如果<= 0 ，则跳转到首页
            if(second <= 0){
                //跳转到首页
                location.href = "https://www.baidu.com";
            }

            time.innerHTML = second +"";
        }


        //设置定时器，1秒执行一次该方法
        setInterval(showTime,1000);



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

 

 

Demo09Document对象

<!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>
    /*
    Document：文档对象
        1. 创建(获取)：在html dom模型中可以使用window对象来获取
            1. window.document
            2. document
        2. 方法：
            1. 获取Element对象：
                1. getElementById()	： 根据id属性值获取元素对象。id属性值一般唯一
                2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
                3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
                4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
            2. 创建其他DOM对象：
                createAttribute(name)
                createComment()
                createElement()
                createTextNode()
        3. 属性



     */

    //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>

 

 

Demo010Element对象

<!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>

 

 

 

lkw23333
关注
专栏目录
Electron常见问题 36 - 用HTML和JS实现最简单的模态对话框（demo）
liuzhen007的专栏
10-20 791
目录 前言 正文 前言 在Electron项目工程中，有时可以利用嵌套的内部web页面实现一些特性，比如模态对话框效果。 正文 怎么使用HTML和JS实现模态对话框效果呢？本文就给出一个可以直接使用的html文件demo。 用HTML和JS实现最简单的模态对话框实例，代码如下：（复制粘贴可用，亲测！） <html> <head> <title>LIGHTBOX EXAMPLE</title> <meta http-equiv="C.
基于html5+css3实现的精美聊天界面demo
07-27
基于HTML5+css3实现的两人即时通讯聊天界面，界面风格相当漂亮，可直接使用，也可简单修改为自己想要的样式，仅供大家参考。
【代码片段】【HTML】弹出对话框点选加载文件
同学小张的博客
12-07 556
HTML弹出对话框点选加载文件，代码片段，拿来即用
var time=document.getElementById("time")这一行为啥可要可不要
Java技术
07-13 982
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>设置多少秒之后跳转百度页面</title> <style type="text/css"> p { text-align: center; } s...
JavaScript---定时器使用
maidu_xbd的博客
10-13 309
定时器分类 1、循环执行：一段程序能够每间隔一段时间执行一次【setInterval()】【clearInterval()】 2、定时执行（一次定时器）：某一段程序需要在延迟多少时间后执行【setTimeout()】【clearTimeout()】 定时器使用 使用注意：为了防止定时器累加，使用定时器要先清除后设置；要保证内存中只有一个定时器。 1、循环执行：一段程序能够每间隔一段时间执...
GDP平减指数-31个省级以2000年为基期2000-2021年的名义GDP、实际GDP、GDP平减指数.zip
06-14
1. **GDP平减指数**：GDP平减指数是衡量一国或地区在特定时期内，价格水平变动的指标。它通过比较不同时期的名义GDP和实际GDP来计算，可以反映出整个经济的通胀情况。当GDP平减指数上升时，意味着通货膨胀率增加；...
31个省级以2000年为基期2000-2021年的名义GDP、实际GDP、GDP平减指数.xlsx
06-06
2000-2021年各省市GDP平减指数，以2000年为基期，包括数据来源、计算方法、公式等。 计算步骤 第一步计算不变价GDP（以2000年为基期） 2001年实际GDP:2000年的名义GDP*2001年地区生产总值指数/100;2002年实际GDP...
31个省级以2010年为基期2010-2021年的名义GDP、实际GDP、GDP平减指数.xlsx
06-21
31个省级以2010年为基期2010-2021年的名义GDP、实际GDP、GDP平减指数.xlsx 表格内包含：原始数据、原始数据来源、计算公式、计算说明、计算结果。 变量包括： 年份 名义GDP(亿元) GDP指数(上年=100) 实际GDP(亿...
31个省级以1978年为基期1978-2021年的名义GDP、实际GDP、GDP平减指数.xlsx
06-21
表格内包含：原始数据、原始数据来源、计算公式、计算说明、计算结果。 变量包括： 年份 名义GDP(亿元) GDP指数(上年=100) 实际GDP(亿元) GDP平减指数(%) GDP平减指数=名义GDP/实际GDP ，实际GDP又称不变价GDP...
深度研究：_认识CPI基期轮换-20210208-华泰证券-15页.pdf
最新发布
07-28
深度研究：_认识CPI基期轮换-20210208-华泰证券-15页.pdf
5秒后跳转效果(setInterval/SetTimeOut)
09-05
实现5秒后自动跳转效果有两种方式setInterval与SetTimeOut，具体实现如下，感兴趣的朋友可以参考下
html5实现--提示框、--弹出框、--消息框、--对话框源码.zip
06-29
html5实现--提示框、--弹出框、--消息框、--对话框源码、--自动消失提示框，基于mui开发。
移动端页面弹出对话窗口效果Demo
07-24
移动端页面弹出对话窗口效果Demo，此文件中包含了展示效果所需的html，css和jQuery库文件。下载后可以直接查看效果。
crontab|定时器|计划任务|每隔数秒自动访问某个网址
04-11
crontab|定时器|计划任务|每隔数秒自动访问某个网址
document.getElementById 学习总结
热门推荐
bcbobo21cn的专栏
07-01 3万+
document.getElementById获取控件对象为空的解决方法   1.下面是一个简单的例子，页面加载时显示一段信息 代码如下:                   alert("hello!!!");                 在页面加载之前，会输出一些信息   执行后，确实是“在页面加载前，输出了信息”
移动端页面弹出对话框效果Demo
weixin_33906657的博客
06-08 400
核心思路：设置一个隐藏的(display:none;)、背景偏暗的div及其子div作为对话框。当点击某处时，将此div设置为显示。 核心代码例如以下(部分js代码用于动态调整div内容的行高。这部分代码能够忽略): &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&...
带有 HTML5 ＜dialog＞ Tag的原生弹出窗口对话框
allway2的博客
02-07 2796
对话框和灯箱广泛用于网站和应用程序。在此之前，它们需要定制——使用一系列<div>来创建容器，设置对话框的 CSS 使其居中，并使用 Javascript 事件处理程序来显示/隐藏模式框。 现在，浏览器引入了新的<dialog>标签，可以更轻松地创建对话框和灯箱。使用 Javascript，您可以调用方法来打开或关闭对话框，或者通过事件知道对话框何时关闭。 使用<dialog>标签，预计在创建模态框时可以减少 50% 的工作量。 演示 演示#1 这个演示显示了一个
5钟页面跳转
bugstack虫洞栈
07-20 1331
第一个页面   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 1  function jump(){   if($("textId").value=="付政委" && $("pwId").value == "zxcvbnm"){    w
Day06_DOM
weixin_45014721的博客
04-14 74
一、关于DOM * 概念： Document Object Model 文档对象模型 * 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作 * W3C DOM 标准被分为 3 个不同的部分： * 1.核心 DOM - 针对任何结构化文档的标准模型 * Document：文档对象 * Element：元素对象 * Attribute：属性对象 * Text：文本对象 * Comment:注释对象 * Node：节点对象，其他5个的父
厦门大学统计学试卷A详解：含选择题与参考答案
8. 同度量因素：在编制数量指标综合指数时，需要选择一个合适的基期，作为比较各个时期数量指标的共同参照，这个基期就是同度量因素。 9. 经济领土范围：国民经济核算通常以一国的经济领土范围为边界，包括境内经济...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值