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

最新推荐文章于 2019-06-01 18:15:57 发布

GeniusTeam-夜光

最新推荐文章于 2019-06-01 18:15:57 发布

阅读量181

点赞数

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

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

版权

My thoughts 同时被 3 个专栏收录

911 篇文章 25 订阅

订阅专栏

前端工程师

48 篇文章 0 订阅

订阅专栏

JS核心技术

23 篇文章 1 订阅

订阅专栏

夜光序言：

与你在这最后的夏天

抹不去的思念

斜阳里的微笑

渐行渐远

你总是这样微微笑着仿佛在说：“我在身边……”

正文：

Js第三天

夜光

帅气：

01 淘宝搜索框

夜光

1.2 判断用户输入事件：

正常浏览器： oninput

雏形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .search{
            width: 300px;
            height: 30px;
            margin: 100px auto;;
        }
    </style>
</head>
<body>
<div class="search">
         <input type="text" id="a">
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .search{
            width: 300px;
            height: 30px;
            margin: 100px auto;;
            position: relative;
        }
        .search input{
            width: 200px;
            height: 25px;
        }
        .search label{
            font-size: 12px;
            color: #ccc;
            position: absolute;   /*//父亲是.search*/
            top: 10px;
            left: 20px;
        }
    </style>
</head>
<body>
<div class="search">
         <input type="text" id="a">
         <label for=>国际log</label>
</div>
</body>
</html>

<div class="search">
<input type="text" id="a">
<label for="a">国际log</label> 
</div>

//这十分重要十分关键

<label for="a" id="message">国际log，夜光设计</label> 

// 这里赋值一个id为了JS操作

背景文字在输入文本情况下会隐藏掉，为了烘托

检测用户输入内容

夜光

内部写也可以外连式适合复杂情况

<script>
    window.onload=function(){
        function $(id){return document.getElementById(id)}{
            $("a").oninput = function(){
                $("message").style.display="none";
            }

        }
    }
</script>

// 这个JS写法有助于隐藏背景文字~~~~

IE：onpropertychange

// onput 大部分浏览器支持检测用户表单输入内容

// onpropertychange ie678 检测用户表单输入内容

<script>
/*        window.οnlοad=function(){*/
     /*       function $(id){return document.getElementById(id)}{
           /!*     $("a").oninput = function(){
                    $("message").style.display="none";
                }*!/

            }
        }
        */
        window.onload =function(){
            function $(id){return document.getElementById(id);}
            $("a").oninput = $("a").onpropertychange = function(){
                if(this.value == "")
                {
                    $("message").style.display="nlock";
                }
                else
                {
                    $("message").style.display="nene";
                }
            }
        }
    </script>

数组的申明使用遍历

夜光

<script>
    var arr=[1,2,3,4,5];          // 第一种方式
    var arr=new Array(1,2,3);              // 第二种方式

</script>

var textArr=["刘备","孔明","赵云"];

1.3.2 使用数组

使用的方法数组名【索引值】；函数名（）；

索引号是从0开始的 0 1 2 3 4 5

console.log(textArr[0]); //取出，第一个

1.3.3 数组的长度

数组名：length；

// 思考为什么会有一个undefined 因为数组从0开始 i<=textArr.length出错

<script>
    var arr=[1,2,3,4,5];
    var arr=new Array(1,2,3);
    var textArr=["刘备","孔明","赵云"];
    for (var i=0;i<=textArr.length;i++){
        console.log(textArr[i]);            //第一种方法
    }
    for (var i= 0,len=textArr.length;i<len;i++){
        console.log(textArr[i]);          //第二种方法
    }
</script>

// var i= 0,len=textArr.length 中间有一个逗号帅气

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

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

夜光序言：与你在这最后的夏天抹不去的思念斜阳里的微笑渐行渐远你总是这样微微笑着仿佛在说：“我在身边……”正文： Js第三天夜光帅气： 01 淘宝搜索框夜光 1.2 判断用户输入...
复制链接

扫一扫