【Web前端学习系列03-2】—JavaScript入门

最新推荐文章于 2024-08-18 10:54:05 发布
最新推荐文章于 2024-08-18 10:54:05 发布
阅读量558 收藏 3
点赞数
分类专栏： Web前端学习系列 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50849185/article/details/112908194
版权

【Web前端学习系列03-2】—JavaScript入门


仅为博主自用学习笔记，本篇学习平台：http://www.lvyestudy.com/javascript
推荐的学习路线:

HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js

JavaScript入门

为了后续阅读便利，做一下内容拆分，本文为JavaScript入门第二部分。

事件基础

在JavaScript中，一个事件应该有3部分。
（1）事件主角：是按钮呢？还是div元素呢？还是其他？
（2）事件类型：是点击呢？还是移动呢？还是其他？
（3）事件过程：这个事件都发生了些什么？

JavaScript常见的事件共有以下5种。
（1）鼠标事件
（2）键盘事件
（3）表单事件
（4）编辑事件
（5）页面事件

事件操作是JavaScript的核心

事件调用方式

在JavaScript中，调用事件的方式有两种。
（1）在script标签中调用
（2）在元素中调用

在script标签中调用

在script标签中调用事件，指的是在< script >< /script >标签内部调用事件。

obj.事件名 = function()
{
    ……
};

oBtn.onclick = function () {alert("绿叶学习网");};

在这里插入图片描述
其实从本质上来说，这种事件调用方式就是操作元素的属性。只不过这个属性不是一般的属性，而是“事件属性”。

在元素中调用事件

指的是直接在HTML属性中来调用事件，这个属性又叫做“事件属性”。

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function alertMes()
        {
            alert("绿叶学习网");
        }
    </script>
</head>
<body>
    <input type="button" onclick="alertMes()" value="弹出" />
</body>

在实际开发中，我们更倾向于在script标签中调用事件，因为这种方式可以使得结构（HTML）与行为（JavaScript）分离，代码更具有可读性和维护性。

鼠标事件

常见的鼠标事件：
onclick 鼠标单击事件
onmouseover 鼠标移入事件
onmouseout 鼠标移出事件
onmousedown 鼠标按下事件
onmouseup 鼠标松开事件
onmousemove 鼠标移动事件

鼠标单击
任何元素我们都可以为它添加单击事件

oBtn.onclick = alertMes;
function alertMes() 
{
    alert("欢迎来到绿叶学习网！");
};

等价于：

oBtn.onclick = function () 
{
    alert("欢迎来到绿叶学习网！");
};

鼠标移入和鼠标移出
当用户将鼠标移入到某个元素上面时，就会触发onmouseover事件。
如果将鼠标移出某个元素时，就会触发onmouseout事件。

鼠标按下和鼠标松开
当用户按下鼠标时，会触发onmousedown事件。
当用户松开鼠标时，则会触发onmouseup事件。

在实际开发中，onmousedown、onmouseup和onmousemove经常配合实现拖拽、抛掷等效果

键盘事件

常用的键盘事件共有2种。
（1）键盘按下：onkeydown，表示键盘按下一瞬间所触发的事件。
（2）键盘松开：onkeyup，onkeyup表示键盘松开一瞬间所触发的事件。
onkeydown发生在onkeyup之前
键盘事件一般有两个用途：表单操作和动画控制。

表单事件

在JavaScript中，常用的表单事件有3种。
（1）onfocus和onblur
（2）onselect
（3）onchange

onfocus和onblur

onfocus表示获取焦点时触发的事件。
onblur表示失去焦点时触发的事件，两者是相反操作。
onfocus和onblur这两个事件往往都是配合一起使用的。
例如用户准备在文本框中输入内容时，此时它会获得光标，就会触发onfocus事件。当文本框失去光标时，就会触发onblur事件。

并不是所有的HTML元素都有焦点事件，具有“获取焦点”和“失去焦点”特点的元素只有2种。
（1）表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）
（2）超链接

判断一个元素是否具有焦点很简单，我们打开一个页面后按Tab键，能够选中的就是具有焦点特性的元素。

在实际开发中，焦点事件（onfocus和onblur）一般用于单行文本框和多行文本框这两个，其他地方比较少用。
举例：搜索框

 <script>
        window.onload = function () 
        {
            //获取元素对象
            var oSearch = document.getElementById("search");
            //获取焦点
            oSearch.onfocus = function () 
            {
                if (this.value == "百度一下，你就知道") 
                {
                    this.value = "";
                }
            };
            //失去焦点
            oSearch.onblur = function () 
            {
                if (this.value == "") 
                {
                    this.value = "百度一下，你就知道"; 
                }
            };
        }
    </script>

在这里插入图片描述
像上面这种搜索框的提示文字效果，其实我们也可以使用HTML5表单元素新增的placeholder属性来实现.

<input id="search" type="text" placeholder="百度一下，你就知道" />

默认情况下，文本框是不会自动获取焦点的，而必须点击文本框才会获取。
我们却经常看到很多页面一打开的时候，文本框就已经自动获取到了焦点，这就用到了focus()方法。

<script>
        window.onload = function () 
        {
            var oTxt = document.getElementById("txt");
            oTxt.focus();
        }
    </script>

focus()跟onfocus是不一样的。focus()是一个方法，仅仅用于让元素获取焦点。 而onfocus是一个属性，它是用于事件操作的。

onselect

在JavaScript中，当我们选中“单行文本框”或“多行文本框”中的内容时，就会触发onselect事件。

onselect事件在实际开发中用得极少

实际开发中，我们在使用搜索框的时候，每次 点击搜索框，它就自动帮我们把 文本框内的文本全选中了，这个又是怎么实现的呢？这就用到了select()方法。

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function ()
        {
            var oSearch = document.getElementById("search");
            oSearch.onclick = function () 
            {
                this.select();
            };
        }
    </script>
</head>
<body>
    <input id="search" type="text" value="百度一下，你就知道" />
</body>

在这里插入图片描述
select()跟onselect是不一样的。select()是一个方法，仅仅用于全选文本。而onselect是一个属性，它是用于事件操作的。

onchange

onchange事件常用于“具有多个选项的表单元素”。
（1）单选框选择某一项时触发。
（2）复选框选择某一项时触发。
（3）下拉列表选择某一项时触发。

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oFruit = document.getElementsByName("fruit");
            var oP = document.getElementById("content");
            for (var i = 0; i < oFruit.length; i++) 
            {
                oFruit[i].onchange = function () 
                {
                    if (this.checked) 
                    {
                        oP.innerHTML = "你选择的是：" + this.value;
                    }
                };
            }
        }
    </script>
</head>
<body>
    <div>
        <label><input type="radio" name="fruit" value="苹果" />苹果</label>
        <label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
        <label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
    </div>
    <p id="content"></p>
</body>

使用getElementsByName ()方法获得具有同一个name属性值的表单元素，然后使用for循环遍历，目的是为了给每一个单选按钮都添加onchange事件。
当我们选中任意一个单选按钮（也就是触发onchange事件）时，判断当前单选按钮是否选中（this.checked）。

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oList = document.getElementById("list");
            oList.onchange = function () 
            {
                var link = this.options[this.selectedIndex].value;
                window.open(link);
            };
        }
    </script>
</head>
<body>
    <select id="list">
        <option value="http://wwww.baidu.com">百度</option>
        <option value="http://www.sina.com.cn">新浪</option>
        <option value="http://www.qq.com">腾讯</option>
        <option value="http://www.sohu.com">搜狐</option>
    </select>
</body>

obj.options[n]的方式来得到某一个列表项，这个列表项也是一个DOM对象。
使用obj.selectedIndex来获取你所选择的这个列表项的下标。
这两个都是下拉列表所独有的也是经常用的方法。

编辑事件

在JavaScript中，常用的编辑事件有3种。
oncopy
onselectstart
oncontextmenu

oncopy

使用oncopy事件来防止页面内容被复制。

document.body.oncopy = function () 
{
    return false;
}
onselectstart

使用onselectstart事件来防止页面内容被选取。

document.body.onselectstart=function()
{
    return false;
}

防止页面内容被选取，从本质上来说也是为了防止用户复制内容。
也就是说，为了防止用户复制内容，我们有两种实现方式：oncopy事件和onselectstart事件。

oncontextmenu

使用oncontextmenu事件来禁止鼠标右键。

document.oncontextmenu = function () 
{
    return false;
}

虽然鼠标右键功能被禁止了，但是我们依旧可以用快捷键，如使用ctrl+c快捷键来复制内容；使用ctrl+s快捷键来保存网页等。

总的来说，oncopy、onselectstart、oncontextmenu这3个在大多数情况下都是用来保护版权的。不过为了更好的用户体验，我们还是少用为妙，除非是迫不得已的情况。

页面事件

常用的页面事件只有两个。

onload

onload表示文档加载完成后再执行的一个事件。

window.onload = function(){
    ……
}

并不是所有情况都需要用到window.onload的，一般来说，只有在想要“获取页面中某一个元素”的时候才会用到。

浏览器从上到下解析到window.onload时，就会先不解析window.onload里面的代码，而是继续往下解析，直到把整个HTML文档解析完了之后才会回去执行window.onload里面的代码。

onbeforeunload

onbeforeunload表示离开页面之前触发的一个事件。

window.onbeforeunload = function(){
    ……
}

与window.onload相对的应该是window.onunload，不过一般情况下我们极少用到window.onunload，而更倾向于使用window.onbeforeunload。

<script>
        window.onload = function () 
        {
            alert("欢迎来到绿叶学习网！");
        }
        window.onbeforeunload = function (e) 
        {
            e.returnValue = "记得下来再来喔！";
        }
    </script>

事件进阶

在JavaScript中，想要给元素添加一个事件，其实我们有以下2种方式。
（1）事件处理器
（2）事件监听器

事件处理器

在前面的学习中，如果想要给元素添加一个事件，我们都是通过操作HTML属性的方式来实现，这种方式其实也叫“事件处理器”。

oBtn.onclick = function(){……};

事件处理器的用法非常简单，代码写出来也很易读。但是，事件处理器是没办法为一个元素添加多个相同事件的
如果想要为一个元素添加多个相同的事件，这就需要用到另外一种添加事件的方式了，那就是——事件监听器。

事件监听器

绑定事件

所谓的“事件监听器”，指的是使用addEventListener()方法来为一个元素添加事件，我们又称之为“绑定事件”

obj.addEventListener(type , fn , false)

type是一个字符串，指的是事件类型。例如单击事件用click，鼠标移入用mouseover等。一定要注意，这个事件类型是不需要加上“on”前缀的。
fn是一个函数名，或者一个匿名函数。
false表示事件冒泡阶段调用。

//fn是一个函数名
oBtn.addEventListener("click", alertMes, false);
function alertMes() 
{
    alert("JavaScript");
}

等价于

//fn是一个匿名函数
oBtn.addEventListener("click", function () {
    alert("JavaScript");
}, false);

 <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.addEventListener("click", function () {
                alert("第1次");
            }, false);
            oBtn.addEventListener("click", function () {
                alert("第2次");
            }, false);
            oBtn.addEventListener("click", function () {
                alert("第3次");
            }, false);
        }
    </script>

当我们点击按钮后，浏览器会依次弹出3个对话框。
我们可以使用事件监听器这种方式来为同一个元素添加多个相同的事件，而这一点是事件处理器做不到的。
一般情况下，如果想要为元素仅仅添加一个事件的话，下面两种方式其实是等价的。

obj.addEventListener("click", function () {……}, false);
obj.onclick = function () {……};

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        //第1次调用window.onload
        window.onload = function () 
        {
            var oBtn1 = document.getElementById("btn1");
            oBtn1.onclick = function () 
            {
                alert("第1次");
            };
        }
        //第2次调用window.onload
        window.onload = function () 
        {
            var oBtn2 = document.getElementById("btn2");
            oBtn2.onclick = function () 
            {
                alert("第2次");
            };
        }
        //第3次调用window.onload
        window.onload = function () 
        {
            var oBtn3 = document.getElementById("btn3");
            oBtn3.onclick = function () 
            {
                alert("第3次");
            };
        }
    </script>
</head>
<body>
    <input id="btn1" type="button" value="按钮1" /><br/>
    <input id="btn2" type="button" value="按钮2" /><br />
    <input id="btn3" type="button" value="按钮3" />
</body>

在实际开发中，我们有可能会使用多次window.onload，但是会发现JavaScript只执行最后一次window.onload。
在这个例子中，我们只需要将每一个window.onload改为以下代码即可：

window.addEventListener("load",function(){……},false);
解绑事件

使用removeEventListener()方法为元素解绑（或解除）某个事件。
解绑事件与绑定事件是相反的操作。

obj.removeEventListener(type , fn , false);

对于removeEventListener()方法来说，fn必须是一个函数名，而不能是一个函数。

removeEventListener()只可以解除“事件监听器”添加的事件，它是不可以解除“事件处理器”添加的事件。
如果想要解除“事件处理器”添加的事件，我们可以使用“obj.事件名 = null;”来实现

<script>
        window.onload = function () 
        {
            var oP = document.getElementById("content");
            var oBtn = document.getElementById("btn");
            //为P元素添加事件
            oP.onclick = changeColor;
            //点击按钮后，为p元素解除事件
            oBtn.addEventListener("click", function () {
                oP.onclick = null;
            }, false);
            function changeColor() 
            {
                this.style.color = "hotpink";
            }
        }
    </script>

event对象

一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。
每一个事件，都有一个对应的event对象。
在JavaScript中，我们可以通过event对象来获取一个事件的详细信息。

event对象常用属性：
type 事件类型
keyCode 键码值
shiftKey 是否按下shift键
ctrlKey 是否按下Ctrl键
altKey 是否按下Alt键

type

使用event对象的type属性来获取事件的类型。

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function (e) 
            {
                alert(e.type);
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="按钮" />
</body>

实际上，每次调用一个事件的时候，JavaScript都会默认给这个事件函数加上一个隐藏的参数，这个参数就是event对象。
一般来说，event对象是作为事件函数的第1个参数传入的。
其实e仅仅是一个变量名，它存储的是一个event对象。也就是说，e可以换成其他名字，如ev、event、a等都可以。

keyCode

如果我们想要获取按下了键盘中的哪个键，可以使用event对象的keyCode属性来获取。

event.keyCode

event.keyCode返回的是一个数值，常用的按键及对应的键码如表所示。

W（上）	87
S（下）	83
A（左）	65
D（右）	68
↑		38
↓		40
←		37
→		39

如果是shift、ctrl和alt键，我们不需要通过keyCode属性来获取，而是可以通过shiftKey、ctrlKey和altKey属性获取。

  <script>
        window.onload = function () {
            document.onkeydown = function (e) {
                if (e.shiftKey || e.altKey || e.ctrlKey) {
                    alert("禁止使用shift、alt、ctrl键！")
                }
            }
        }
    </script>

e.keyCode返回的是一个数字，而e.shiftKey、e.ctrlKey、e.altKey返回的都是布尔值（true或false）

<script>
       window.onload = function () 
       {
           var oSpan= document.getElementsByTagName("span")[0];
           window.addEventListener("keydown", function (e) 
           {
               if (e.keyCode == 38 || e.keyCode == 87) {
                   oSpan.innerHTML = "上";
               } else if (e.keyCode == 39 || e.keyCode == 68) {
                   oSpan.innerHTML = "右";
               } else if (e.keyCode == 40 || e.keyCode == 83) {
                   oSpan.innerHTML = "下";
               } else if (e.keyCode == 37 || e.keyCode == 65) {
                   oSpan.innerHTML = "左";
               } else {
                   oSpan.innerHTML = "";
               }
           }, false)
       }
   </script>

this

这一节我们只针对this在事件操作中的使用情况进行介绍.
在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。

<head>
  <meta charset="utf-8" />
  <title></title>
  <script>
      window.onload = function () 
      {
          var oDiv = document.getElementsByTagName("div")[0];
          oDiv.onclick = function () 
          {
              this.style.color = "hotpink";
          }
      }
  </script>
</head>
<body>
  <div>绿叶，给你初恋般的感觉~</div>
</body>

this所在的函数是一个匿名函数，然后这个匿名函数被oDiv调用了，因此this指向的就是oDiv。
在事件函数中，想要使用当前元素节点，我们尽量使用this来代替oBtn、oLi[i]等等这种DOM对象的写法。

window 对象

在JavaScript中，一个浏览器窗口就是一个window对象
简单来说，JavaScript会把一个窗口看成一个对象，这样我们就可以用这个对象的属性和方法来操作这个窗口。
实际上，我们每次打开一个页面时，浏览器都会自动为这个页面创建一个window对象。

window对象下面又分为很多对象：
在这里插入图片描述

window对象的属性

document	文档对象，用于操作页面元素
location	地址对象，用于操作URL地址
navigator	浏览器对象，用于获取浏览器版本信息
history		历史对象，用于操作浏览历史
screen		屏幕对象，用于操作屏幕宽度高度

document对象也是window对象下的一个子对象。很多人以为一个窗口就是一个document对象，其实这个理解是错的。因为一个窗口不仅仅包括HTML文档，还包括浏览器信息、浏览历史、浏览地址等等。而document对象仅仅专门用来操作我们HTML文档中的元素。一句话概括就是：“一个窗口就是一个window对象，这个窗口里面的HTML文档就是一个document对象，document对象是window对象的子对象。”
window对象及下面这些location、navigator等子对象，由于都是操作浏览器窗口的，所以我们又称之为“BOM”，也就是Browser Object Module（浏览器对象模型）。
所谓的对象模型，可以简单理解为把它们看成一个对象来处理。
也可以把window下的子对象看成是它的属性，只不过这个属性也是一个对象，所以我们才称之为“子对象”。

window对象的方法

alert()			提示对话框
confirm()		判断对话框
prompt()		输入对话框
open()			打开窗口
close()			关闭窗口
setTimeout()	开启“一次性”定时器
clearTimeout()	关闭“一次性”定时器
setInterval()	开启“重复性”定时器
clearInterval()	关闭“重复性”定时器

对于window对象来说，无论是它的属性，还是方法，都可以省略window前缀。例如window.alert()可以简写为alert()，window.open()可以简写为open()，甚至window.document.getElementById()可以简写为document.getElementById()

窗口操作

窗口常见的操作有两种：一种是“打开窗口”；另外一种是“关闭窗口”。

打开窗口

使用window对象的open()方法来打开一个新窗口。

window.open(url, target)

window.open()可以直接简写为open()，不过我们一般都习惯加上window前缀。
url指的是新窗口的地址，如果url为空，则表示打开一个空白窗口。
空白窗口很有用，我们可以使用document.write()往空白窗口输出文本，甚至输出一个HTML页面。
target表示打开方式，它的取值跟a标签中target属性的取值是一样的，常用取值有两个：_blank和_self。
当target为“_blank（默认值）”，表示在新窗口打开；
当target为“_self”时，表示在当前窗口打开。

window.open("http://www.lvyestudy.com", "_blank")
window.open("http://www.lvyestudy.com", "_self")

<script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                var opener = window.open();
                opener.document.write("这是一个新窗口");
                opener.document.body.style.backgroundColor = "lightskyblue";
            };
        }
    </script>

实际上，window.open()就像函数调用一样，会返回（也就是return）一个值，这个值就是新窗口对应的window对象。
也就是说，此时opener就是这个新窗口的window对象。
既然我们可以获取到新窗口的window对象，那么想要在新窗口页面干点什么，如输出点内容、控制元素样式等，就很简单了。

如果你打开的是同一个域名下的页面或空白窗口，就可以像上面那样操作新窗口的元素或样式。但是如果你打开的是另外一个域名下面的页面，是不允许操作新窗口的内容的，因为这个涉及跨越权限的问题。

关闭窗口

使用window.close()来关闭一个新窗口。

window.close()

window.close()方法是没有参数的。

实现打开一个新窗口，然后关闭该新窗口：

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var btnOpen = document.getElementById("btn_open");
            var btnClose = document.getElementById("btn_close");
            var opener = null;
            btnOpen.onclick = function ()
            {
                opener = window.open("http://www.lvyestudy.com");
            };
            btnClose.onclick = function () {
                opener.close();
            }
        }
    </script>
</head>
<body>
    <input id="btn_open" type="button" value="打开新窗口" />
    <input id="btn_close" type="button" value="关闭新窗口" />
</body>

window.close()关闭的是当前窗口，opener.close()关闭的是新窗口。
从本质上来说，window和opener都是window对象，只不过window指向的是当前窗口，opener指向的是新窗口。

对话框

在JavaScript中，对话框有3种： alert()、confirm()和prompt()。
它们都是window对象的方法。
window对象的属性和方法，是可以省略window前缀的，例如window.alert()可以简写为alert()。

alert

在JavaScript中，alert()对话框一般仅仅用于提示文字。
在alert()中实现文本换行，用的是\n。

confirm()

confirm()对话框不仅提示文字，还提供确认。

confirm("提示文字")

如果用户点击【确定】按钮，则confirm()返回true。如果用户点击【取消】按钮，则confirm()返回false。

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                if (confirm("确定要跳转到绿叶首页吗？")) {
                    window.location.href = "http://www.lvyestudy.com";
                }else{
                    document.write("你取消了跳转");
                }
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="回到首页"/>
</body>
prompt()

prompt()对话框不仅提示文字，还返回一个字符串。

prompt("提示文字")

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function ()
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                var name = prompt("请输入你的名字");
                document.write("欢迎来到<strong>" + name + "</strong>");
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="按钮"/>
</body>

在这里插入图片描述
在弹出的对话框中，有一个输入文本框。
入内容，然后点击对话框中的【确定】，就会返回刚刚你输入的文本。

总结
alert() 仅提示文字，没有返回值
confirm() 具有提示文字，返回“布尔值”（true或false）
prompt() 具有提示文字，返回“字符串”

在实际开发中，为了更好的用户体验，我们都倾向于使用div元素来模拟出来，并且结合CSS3、JavaScript等来实现酷炫的动画效果。

定时器

所谓的“定时器”，指的是每隔一段时间就执行一次代码。

在JavaScript中，对于定时器的实现，有以下2组方法：

setTimeout()和clearTimeout()

使用setTimeout()方法来“一次性”地调用函数，并且可以使用clearTimeout()来取消执行setTimeout()。

setTimeout(code, time);

参数code可以是一段代码，可以是一个函数，也可以是一个函数名。
参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function ()
        {
            setTimeout('alert("欢迎来到绿叶学习网");', 2000);
        }
    </script>
</head>
<body>
    <p>2秒后提示欢迎语。</p>
</body>

由于setTimeout()方法只会执行一次，所以只会弹出一次对话框。

 setTimeout(function () {
                alert("欢迎！");
            }, 2000);

这里setTimeout()第一个参数是一个函数，这个函数是没有名字的，也叫匿名函数。
下面两种写法是等价的

setTimeout(alertMes, 2000)
setTimeout("alertMes()", 2000)

我们只需要掌握setTimeout(alertMes, 2000)这一种写法就可以了
一是这种写法性能更高；
二是可以避免两种写法造成记忆混乱。

<script>
        window.onload = function () 
        {
            //获取元素
            var oBtn = document.getElementsByTagName("input");
            //timer存放定时器
            var timer = null;
            oBtn[0].onclick = function () 
            {
                timer = setTimeout(function () {
                    alert("欢迎来到绿叶学习网");
                }, 2000);
            };
            oBtn[1].onclick = function () 
            {
                clearTimeout(timer);
            };
        }
    </script>
setInterval()和clearInterval()

使用setInterval()方法来“重复性”地调用函数，并且可以使用clearInterval()来取消执行setInterval()。

setInterval(code, time);

参数code可以是一段代码，可以是一个函数，也可以是一个函数名。
参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。

setInterval()跟setTimeout()语法是一样的，唯一不同的是：setTimeout()只执行一次；而setInterval()可以重复执行无数次。

下面3种方式都是正确的，这个跟setTimeout()一样：

//方式1
setInterval(function(){…}, 2000)
//方式2
setInterval(alertMes, 2000)
//方式3
setInterval("alertMes()", 2000)

  <script>
        //定义全局变量，用于记录秒数
        var n = 5;
        window.onload = function ()
        {
            //设置定时器，重复执行函数countDown
            setInterval(countDown, 1000);
        }
        //定义函数
        function countDown()
        {
            //判断n是否大于0，因为倒计时不可能有负数
            if (n > 0) {
                n--;
                document.getElementById("num").innerHTML = n;
            }
        }
    </script>

<script>
        window.onload = function () 
        {
            //获取元素
            var oBtn = document.getElementsByTagName("input");
            var oDiv = document.getElementsByTagName("div")[0];
            //定义一个数组colors，存放6种颜色
            var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
            //timer用于定时器
            var timer = null;
            //i用于计数
            var i = 0;
            //“开始”按钮
            oBtn[0].onclick = function () 
            {
                //每隔1秒切换一次背景颜色
                timer = setInterval(function () {
                    oDiv.style.backgroundColor = colors[i];
                    i++;
                    i = i % colors.length;
                }, 1000);
            };
            //“暂停”按钮
            oBtn[1].onclick = function () 
            {
                clearInterval(timer);
            };
        }
    </script>

div元素每隔一秒就会切换一次背景颜色。

i = i % colors.length;

使得i可以不断循环0、1、2、3、4、5，这是一个非常棒的技巧，特别是在图片轮播开发中非常有用。
当我们快速不断地点击【开始】按钮，神奇的一幕发生了：背景颜色切换的速度加快了。然后点击【暂停】按钮，却发现根本停不下来！那是什么原因导致的呢？
其实每一次点击，都会新开一个setInterval()，当你不断点击按钮，setInterval()就会累加起来。也就是说，当你点击3次按钮时，其实已经开了3个setInterval()，此时如果你想要停下来，就必须点击3次【暂停】按钮。为了避免这个累加的bug，我们在每次点击【开始】按钮的一开始就要清除一次定时器

 <script>
        window.onload = function () 
        {
            //获取元素
            var oBtn = document.getElementsByTagName("input");
            var oDiv = document.getElementsByTagName("div")[0];
            //定义一个数组colors，存放6种颜色
            var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
            //timer用于存放定时器
            var timer = null;
            //i用于计数
            var i = 0;
            //“开始”按钮
            oBtn[0].onclick = function () 
            {
                //每次点击“开始”按钮，一开始就清除一次定时器
                clearInterval(timer);
                //每隔1秒切换一次背景颜色
                timer = setInterval(function () {
                    oDiv.style.backgroundColor = colors[i];
                    i++;
                    i = i % colors.length;
                }, 1000);
            };
            //“暂停”按钮
            oBtn[1].onclick = function () 
            {
                clearInterval(timer);
            };
        }
    </script>

location对象

使用window对象下的location子对象来操作当前窗口的URL。
所谓URL，指的就是页面地址。

对于location对象，我们只需要掌握以下3个属性

href	当前页面地址
search	当前页面地址“？”及后面的内容
hash	当前页面地址“#”及后面的内容
window.location.href

使用location对象的href属性来获取或设置当前页面的地址。

window.location.href

window.location.href可以直接简写为location.href，不过我们一般都习惯加上window前缀。

  <script>
        var url = window.location.href;
        document.write("当前页面地址是：" + url);
    </script>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        setTimeout(function () {
            window.location.href = "http://www.lvyestudy.com";
        }, 2000);
    </script>
</head>
<body>
    <p>2秒后跳转</p>
</body>
window.location.search
window.location.search

地址“?”后面这些内容，也叫querystring（查询字符串），一般用于数据库查询.

window.location.hash

使用location对象的hash属性来获取和设置当前页面地址井号（#）后面的内容。井号（#）一般用于锚点链接。

在实际开发中，window.location.hash用得还是比较少

navigator对象

使用window对象下的子对象navigator来获取浏览器的类型。

window.navigator.userAgent

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        if (window.navigator.userAgent.indexOf("MSIE") != -1) {
            alert("这是IE");
        }else if (window.navigator.userAgent.indexOf("Chrome") != -1) {
            alert("这是Chrome");
        }else if (window.navigator.userAgent.indexOf("Firefox") != -1) {
            alert("这是Firefox");
        }
    </script>
</head>

对于IE浏览器来说，上面代码只能识别IE10及以下版本，如果想要识别所有的IE浏览器，我们应该使用下面代码来进行判断：

if (!!window.ActiveXObject || "ActiveXObject" in window){
    alert("这是IE");
}

判断浏览器类型也是经常用到的，特别是在处理不同浏览器兼容性上，我们就需要根据浏览器的类型来加载对应的JavaScript处理代码。

document对象

document对象其实是window对象下的一个子对象，它操作的是HTML文档里所有的内容。
浏览器每次打开一个窗口，就会为这个窗口生成一个window对象，并且会为这个窗口内部的页面（即HTML文档）自动生成一个document对象，然后我们就可以通过document对象来操作页面中所有的元素了。
window对象是浏览器为每个窗口创建的一个对象。通过window对象，我们可以操作窗口如打开窗口、关闭窗口、浏览器版本等，这些又被统称为“BOM（浏览器对象模型）”。
document对象是浏览器为每个窗口内的HTML页面创建的一个对象。通过document对象，我们可以操作页面的元素，这些操作又被统称为“DOM（文档对象模型）”。
由于window对象是包括document对象的，所以我们可以“简单”地把BOM和DOM的关系理解成：BOM包含DOM。只不过对于文档操作来说，我们一般不把它看成是BOM的一部分，而是看成独立的，也就是DOM。

document 对象属性

document.title 获取文档的title
document.body 获取文档的body
document.forms 获取所有form元素
document.images 获取所有img元素
document.links 获取所有a元素
document.cookie 文档的cookie
document.URL 当前文档的URL
document.referrer 返回使浏览者到达当前文档的URL

document.forms、document.images、document.links这3个分别等价于下面3个，所以我们一般用document.getElementsByTagName来获取就行了，不需要去记忆。

document.getElementsByTagName("form")
document.getElementsByTagName("img")
document.getElementsByTagName("a")

cookie一般结合后端技术操作中用得比较多，document.cookie单纯在前端中用得也不是非常多

document.URL

使用document对象的URL属性来获取当前页面的地址。
document.URL和window.location.href都可以获取当前页面的URL，不过它们也有区别。
document.URL只能获取不能设置；
window.location.href既可以获取也可以设置。

document.referrer

使用document对象的referrer属性来获取用户在访问当前页面之前所在页面的地址，可以通过它来统计用户都是通过什么方式来到你的网站的。
例如我从页面A的某个链接进入页面B，如果在页面B中使用document.referrer，就可以获取到页面A的地址。

document对象方法

document对象常用的方法：
document.getElementById() 通过id获取元素
document.getElementsByTagName() 通过标签名获取元素
document.getElementsByClassName() 通过class获取元素
document.getElementsByName() 通过name获取元素
document.querySelector() 通过选择器获取元素，只获取第1个
document.querySelectorAll() 通过选择器获取元素，获取所有
document.createElement() 创建元素节点
document.createTextNode() 创建文本节点
document.write() 输出内容
document.writeln() 输出内容并换行

document.write()

 <script>
        document.write('<div style="color:hotpink;">绿叶学习网</div>');
    </script>

document.write()不仅可以输出文本，还可以输出标签。
document.write()都是往body标签内输出内容的。

document.writeln()
writeln()方法跟write()方法相似，唯一区别是：writeln()方法会在输出内容后面多加上一个换行符\n。
一般情况下，这两种方法在输出效果上是没有区别的，仅当在查看源码才看得出来区别，除非把内容输出到pre标签内。

document.writeln("绿叶学习网");
document.writeln("HTML");
document.writeln("CSS");
document.writeln("JavaScript");

等价于

document.write("绿叶学习网\n")
document.write("HTML\n")
document.write("CSS\n")
document.write("JavaScript\n")

在这里插入图片描述
writeln()方法输出的内容之间有一点空隙，而write()方法没有。

但是当我们把writeln()方法输出的内容放进<pre></pre>标签内，那效果就不一样了。

		document.writeln("<pre>绿叶学习网")
        document.writeln("HTML")
        document.writeln("CSS")
        document.writeln("JavaScript</pre>");

在这里插入图片描述

writeln()方法在实际开发中用得还是特别少的

<pre> 标签可定义预格式化的文本。被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。一个常见应用就是用来表示计算机的源代码。
Totoo___
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
下拉框触发单击事件_Select 点击下拉框触发onSelect / onChange 事件， 在该事件中发请求得到结果后setState，这时候下拉框不消失，会重新弹出来。...
weixin_39878646的博客
12-22 1486
Environment(required)antd version:^2.7.1OS and its version：mac os 10.12.3Browser and its version:chrome 55.0.2883.95What did you do? Please provide steps to re-produce your problem.import React from '...
Web前端----JavaScript入门(二)
xxyneymar的博客
10-12 199
2.JavaScript的基本语法 2.5 事件
关于onselect与onchange的介绍
qq_44334291的博客
07-01 3112
之前一直不知道还有一个属性的名字叫做onselect，知道后来才了解到，正如字面意思一样。但是，我还是想要解释一下两者之间的细微差别。 1.onselect：当你选中一段文字的时候才会触发的。 2.onchange：当输入框里面的文本发生变化之后才会触发的，就比如说，你文本内容原来什么都没有，现在你写入了值，这个时候，就说明文本内容发生变化了，这种情况下就会触发这个函数。 总结：这里我将会说明，他们在使用的时候的具体区别，非常重要的一点就是：比如说你有一个菜单叫做City，当用户选择box选项时触发，它的
真解决EasyUi的 select 使用 class=“easyui-combobox“ 样式绑定onSelect/onChange事件
qq_36056427的博客
09-02 1601
解决EasyUi的 select 使用 class="easyui-combobox" 样式后绑定onSelect/onChange事件
下拉框单选无法取消解决办法
wq_wangqiang的博客
07-17 855
onSelect = function(r){ var me = "#action1"; var id = $(me).combobox('getValue'); if(r.id==id){ }else{ $(me).combobox('unselect',id); $(me).combobox('select',r.id); } ...
Web前端----JavaScript入门(一)
xxyneymar的博客
10-09 252
1.简介 1.1 JavaScript概述 JavaScript是运行在浏览器上的脚本语言，简称JS。JavaScript运行在浏览器的内存当中，不需要程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。JavaScript的"目标程序"以普通文本形式保存，这种语言都叫做"脚本语言"(对于java来说，目标程序以.class形式存在，不能使用文本编辑器打开，不是脚本语言)。 JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。在JS中有很多事件，其中有一个事件叫做：鼠...
资料-Web前端入门教程资料下载地址.txt
03-30
|- web前端培训班_web前端开发优质教程_前端工程师培训-黑马程序员.png |- HTML入门及基础02资料.zip |- HTML5入门及基础01资料.zip |- CSS3入门及提高 08资料.zip |- CSS3入门及提高 07资料.zip |- CSS3入门及提高 ...
web前端工程师JavaScript基础入门路径学习专题课程
06-28
第2课 JavaScript流程控制语句 掌握JavaScript中条件分支语句和循环语句的使用，用简洁的代码实现强大功能 第3课 JavaScript函数 掌握函数的使用，学习函数的封装，体会代码复用的过程和它带来的便利 第二阶段: ...
html前端学习（2）--JavaScript
05-13
在这个"html前端学习（2）--JavaScript"的教程中，我们将深入探讨JavaScript的基础知识，包括变量声明、函数定义以及更多入门概念。 首先，变量是存储数据的容器，是JavaScript编程的基础。你可以使用`var`关键字来...
Web前端攻城狮培养计划-前端零基础入门
09-21
在“Web前端攻城狮培养计划-前端零基础入门”这个学习资源中，你将踏上成为一名优秀的Web前端开发者的旅程。这个课程专为初学者设计，无论你是否具备编程背景，都能逐步掌握Web前端开发的核心技能。以下是这个课程...
Web前端开发第4季：JavaScript基础入门
06-14
JavaScript是一种网页交互语言，为网页增添了巨大的表现力和交互能力，极大提高了用户... 建议在学习的过程中，一定要动手实战，这样才能真正的领悟到JavaScript的语法细节。 课程案例展示： 案例01:计算器 案例02:
vue、js onSelect事件 获取选中的值
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-26 5742
onselect属性可用于,,,,和.主要是借用event获取其值和selectionStart选中下标起始selectionEnd选中的下标结束。然后字符串截取出来。作用当文本被选中时，执行一段Javascript代码。onselect事件会在文本框中的文本被选中时发生。 vue、js onSelect事件 获取选中的值......
js 中的onselect 与jQuery中的select 事件的用法
世范水晶
05-03 2271
 1、   jQuery 的用法如下：   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;   &lt;style&gt;   p { color:blue; }   div { color:red; }   &lt;/style&gt;   &lt;script src="http://code.jquery.com/jquery...
select 的onchange方法失效问题
jiangjieyang的专栏
09-22 3648
我在做一个当select值发生改变时触发事件，但是浏览器报错，说searchSelect不是一个方法 代码如下： function searchSelect(obj) { switch ($(obj).val()){ case "0": alert(0); break; case "1": a
Select的OnChange()事件
灰豆宝宝.net的专栏
04-07 4112
我们用Select的onchange事件时,常会遇到这样一个问题,那就是连续选相同一项时,不触发onchange事件.select的onchange事件就是这样子的.你得有Change(改变),才能触发该事件....掌握了它的特性后,相应的解决办法也很简单.请选择Item 1Item 2Item 3function bao(s){    txt.value+=s;    //选择后,让第一项被选中
jqueryeasyui 事件方法onChange(),onSelect()
热门推荐
现役码农的博客
11-20 1万+
  $('#id').combobox({ onChange:function(){ ... } onSelect:function(){ ... } });       onChange：发生变化就会触发事件，对于下拉框这类控件不适合。对input类型比较合适 onSelect：发生选中事件触发方法。可以说是专门为下拉框类型或有选中事件类型的控件使用...
网上商品订单转手系统bootpf
最新发布
weixin_43213064的博客
08-18 528
【代码】springboot网上商品订单转手系统bootpf
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值