夜光带你走进前端工程师（三十 jS ）

最新推荐文章于 2019-06-01 18:19:51 发布

GeniusTeam-夜光

最新推荐文章于 2019-06-01 18:19:51 发布

阅读量162

点赞数

分类专栏： My thoughts 前端工程师 JS核心技术文章标签： js

本文链接：https://blog.csdn.net/weixin_41987706/article/details/90710308

版权

My thoughts 同时被 3 个专栏收录

911 篇文章 25 订阅

订阅专栏

前端工程师

48 篇文章 0 订阅

订阅专栏

JS核心技术

23 篇文章 1 订阅

订阅专栏

夜光序言：

也许一个人在真正无可奈何的时候，除了微笑，也只好微笑了。

正文：

JS 简单验证表单

夜光

1.8 ： this(自己的)

指的是本身

This 主要是指事件的动用者

className 类名

   $("result").className="wrong";
    $("result").innerHTML="内容不可以为空"；
// 更换盒子里面的内容   文字标签都可以换

//表单更换内容 Input.value

isNaN() nan不是一个数字【不是一个数字】

下面是经典：多做几遍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            margin-left: 300px;
            padding: 300px;
        }
        .box span{
            border: solid;
            border-width: 1px;
            background-color: #cccccc;
            margin-left: 10px;

        }
        .wrong{
            background-color: aquamarine;
            border: 1px solid #FFAC91;
            color: #FF6B39;;
        }

    </style>
    <script>
        window.onload = function(){
            function $(id){return document.getElementById(id);}
            $("a").onblur = function(){   //离开焦点判断
               /* alert(this.value);   //this 指 a 就近原则*/
               if(this.value == "")
               {
                   $("result").className="wrong";
                   $("result").innerHTML="内容不可以为空";
               }
                elseif(isNaN(this.value));
                {
                    $("result").className="wrong";
                    $("result").innerHTML="hellow black";
                }
            }

        }

    </script>
</head>
<body>
<div class="box">
    线性代数：<input type="text" id="a"/><span id="result">亲，输入成绩</span>
</div>
</body>
</html>

两个小的表单验证方法

夜光

方法肯定有小括号

属性等号赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var a = document.getElementById("a");
            a.focus();
        }
    </script>
</head>
<body>
自动获得焦点：
<input type="text" id="a">
</body>
</html>

1.9.1 表单自动获得焦点

Txt.focus(); 方法

Onfocus

1.9.2 鼠标经过选择表单

// 运用select(); 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var a = document.getElementById("a");
            var b = document.getElementById("b");
            a.focus();    // 自动获得焦点
            b.onmouseover=function(){   // 鼠标经过选择表单
                this.select();
            }
        }
    </script>
</head>
<body>
自动获得焦点：
<input type="text" id="a">
鼠标经过选择表单：
<input type="text" id="b">
</body>
</html>

For 循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    for(var a=0;a<=100;a++){
        if(a==0)
        {
            document.write("这个英雄已经出生<br/>");
        }
        else if(a == 26)   //else if 之间有空格
        {
            document.write("已经结婚了<br/>");
        }
        else if(a == 28) //else if 之间有空格
        {
            document.write("世界闻名<br/>");
        }
        else
        {
            document.write("飞黄腾达<br/>");
        }
    }
</script>
</body>
</html>

获取某类元素

夜光

1.11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    window.onload = function(){
        var lis = document.getElementsByTagName("li"); //获得li数组六行吧
        alert(lis.length);
    }
</script>
<ul>
    <li>123456</li>
    <li>123456</li>
    <li>123456</li>
    <li>123456</li>
    <li>123456</li>
    <li>123456</li>
</ul>
</body>
</html>

getElementsByTagName() 【可以得到很多盒子】

getElementById() 【可以得到一个盒子】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    window.onload = function(){
        var lis = document.getElementsByTagName("li"); //获得li数组六行吧
     /*   lis[3].innerHTML="abc"; // 充分理解数组这个概念*/
        alert(lis.length);        // 这个十分重要
        for(var i=0;i<=lis.length;i++){
              lis[i].innerHTML="abc";
        }
    }
</script>
<ul>
    <li>123456</li>
    <li>123456</li>
    <li>123456</li>
    <li>123456</li>
    <li>123456</li>
    <li>123456</li>
</ul>
</body>
</html>

//帅气

1：编写一个程序：计算增加后的工资

工龄满足5：增加20%

2-4：增加15%

<2:增加10%

【if else 核心】

2:编写一个程序

用户输出这个数，可以算出阶乘

3：for循环遍历京东图片

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进前端工程师（三十 jS ）

夜光序言：也许一个人在真正无可奈何的时候，除了微笑，也只好微笑了。正文： JS 简单验证表单夜光 1.8 ： this(自己的)指的是本身This 主要是指事件的动用者className 类名...
复制链接

扫一扫