2022-7-12 学习日记（4th day）JS循环+函数+监听事件

激进的土豆

已于 2022-07-18 09:37:23 修改

阅读量275

点赞数 4

分类专栏： java学习日记文章标签：学习 javascript 前端

于 2022-07-12 21:13:20 首次发布

本文链接：https://blog.csdn.net/weixin_49627122/article/details/125749578

版权

java学习日记专栏收录该内容

48 篇文章 2 订阅

订阅专栏

JavaScript循环+内置函数+监听事件

循环：四个循环：

for in 循环
while循环
do...while循环
for 循环-------（个人认为最重要）

循环的思维导图：

JS内置函数:

Array函数:	1.concat()----连接 2.join()--------设置分隔符连接数组为一个字符串 3.pop()--------删除最后一个元素 4.sort()--------排序，从小到大排序.
Global函数:	1.isNaN():-----判断一个值是不是数字 2.parseFloat()把一个整数转换成小数。 3.parseInt()---把一个小数转换成整数。 4.number()----把一个值转成number类型。 5.string()-------把其他类型转换成字符串。
String函数:	1.charAt()------取出指定位置的字符。 2.indexOf()-----判断指定字符是否存在，如果存在返回下标。 3.lastIndexOf('a'):从后往前找 4.replace('a','b');替换字符串 5.split('-')--------根据-去拆分字符串，得到一个数组。 6.substring(1，6)字符串截取。
Math函数:	1.ceil()-----向上取整 2.floor()----向下取整 3.round()--四舍五入 4.random()随机,生成一个0-1的随机数. 5.tan() sin cos cot E pi
Date函数:	1.new Date();获取系统当前时间 2.getDate();返回日期的日1~31 3.getHours();返回时间中的时:0~23 4.getMinutes();返回时间的分 5.getSeconds();返回时间中的秒 6.getTime();获取系统当前时间 7.getYear();获取系统年

js特点：见名知意：

document.getElementById('div')//文档.获取元素根据ID.

document.getElementById() -------------------根据ID获取元素

document.getElementsByClassName()-----根据Class获取HTML元素,得到的是一堆元素.

document.getElementsByTagName()--------根据标签获取html元素,得到的也是一堆元素

新方式：

document.querySelector()----------------------里面填写选择器，什么不带就是标签，带.的是class，带#的是id。（跟css差不多）抓取一个元素。

document.querySelectorAll()-------------------基本同上，但返回值拿到的是一个集合（数组）。根据选择器抓取所有元素

示例：

首先先设置一个div：

innerText与innerHTML的区别：

innerText:无法识别标签。

innerHTML:可以识别标签。如下：

<div id="div1" class="div2">我是div</div>
<script>
    let div=document.querySelector('div');
</script>


div.innerText ="我是JS生成的";

div.innerHTML="<b>我是加粗的</b>";

事件：

事件就是当我们和HTML标签元素发生交互时产生的行为.

onclick:单击事件

ondblclick:双击事件

onblur:失去焦点

onfocus:获得焦点

onchange:改变(内容发生变化时)

onload:加载

onscroll:页面滚动时

onmouseup:左键抬起

onmousemove:鼠标移动等等等.

注：不要出现双引号套双引号的情况,要么双引套单引,要么反过来.

使用方式：

<input type="button" value="按钮" onclick="jump('欸嘿')">

<script>
    function jump(a){
            alert("按钮被点击了..."+a);
        }
</script>

点击按钮会有一个弹窗：

练习题1：

需求：在用户名的文本框中输入用户名.

如果用户名为admin,则在span中显示用户名已被占用,否则,显示用户名可用

分析:需要给文本框添加onchange/onblur.出发函数需要向span写入内容,innerText/innerHtml.

代码段：

<body>
    用户名:<input type="text" id="username" onblur="a()">
    <span id="span"></span>
    <script>
        function a(){
            let username=document.querySelector("#username").value;
            let span=document.querySelector('#span');
            if(username=="admin"){
                span.innerText="用户名已被占用";
            }else{
                span.innerText="用户名可用";
            }
        }
 </script>
</body>

实现效果：

打开界面：

输入admin界面：

输入别的内容：

练习题2：

需求:当用户名==admin,密码=123465,提示登陆成功.

否则,提示用户名或密码错误.

思路:

给按钮添加单击事件

当点击按钮时,获取用户名和面名框输入的值.获取用户名和面名框输入的值

然后进行判断,if()登陆成功,else()用户名或密码错误.然后进行判断。

代码段：

<body>
    <p class="username">
        账号:<input type="text" id="username">
    </p>
    <p class="password">
        密码:<input type="password" id="password">
    </p>
    <p>
        <input type="button" value="登录" onclick="a()">
    </p>
    <script>
        let username=document.querySelector("#username");
        let password=document.querySelector("#password");
        function a(){
            if(username.value=="admin" && password.value=="123456"){
                alert("登陆成功");
            }else{
                alert("用户名或密码错误");
            }
        }
    </script>
</body>