javascript学习第三天笔记

最新推荐文章于 2022-07-22 23:54:55 发布

lingzhisen

最新推荐文章于 2022-07-22 23:54:55 发布

阅读量165

点赞数

分类专栏： javascript 文章标签： JavaScript

本文链接：https://blog.csdn.net/lingzhisen/article/details/81368821

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

javascript学习第三天笔记

本次学习JavaScript的判断用户输入事件，数组（包括声明数组，使用，数组长度，遍历，平均值），排他思想，变量和属性。

1.1 判断用户输入事件
判断用户输入的事件有 oninput 和onpropertychange 。由于浏览器兼容的问题，他们出现的场合有所不同。正常浏览器支持oninput ，而 IE6、IE7、IE8 支持的 onpropertychange 。
当页面一打开，搜索框中就可以看到灰色字体“欢迎你输入:”。当用户点击输入的时候，灰色字消失。当用户清空文本框的所有内容的时候，灰色字自动恢复。

接下来，这个小案例就是要介绍如何实现这种效果，即用户输入事件。
效果图：这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .search {
            width: 300px;
            height: 30px;
            margin: 100px auto;
            position: relation;
        }
        .search input {
            width:200px;
            height:25px;

        }
        .search label {
            font-size: 12px;
            color:#ccc;
            position: absolute;
            top:8px;
            left:20px;
            cursor: text;
        }
    </style>
    <script>
        window.onload = function(){
            function $(id){return document.getElementById(id);}
            //oninput 大部分浏览器支持  检测用户表单输入内容
            //onpropertychange  ie678  检测用户表单输入内容
            $("txt").oninput = $("txt").onpropertychange = function(){
                if(this.value == " ")
                {
                    $("message").style.display = "block";
                }
                else
                {
                    $("message").style.display = "none";

                }
            }
        }
    </script>
</head>
<body>
<div class="search">
    <input type="text" id="txt"/>
    <label for="txt" id="message">欢迎你输入:</label>
</div>
</body>
</html>

-1.2 数组

1.21 数组的作用
数组对象的作用是：使用单独的变量名来存储一系列的值。
1.22 声明数组

var array1 = [1,2,3,4,5];
var array2 = new Array(1,3,5,7,9);

1.23 数组的使用
1.使用的方法: 数组名[索引值];
2.函数名();
3.索引号是从0开始的。 0 1 2 3 4 5 …

var array = ["小名","小敏","小红","莉莉"];
console.log(array[2]);

1.24 数组的长度
数组名.length;

var array = ["小名","小敏","小红","莉莉"];
console.log(array.length);

1.25 遍历数组
1.运用for循环遍历数组
2.getElementsByTagName() 得到一个伪数组

var array = ["小名","小敏","小红","莉莉"];
for(var i = 0; i < array.length; i++){
    console.log(array[i]);
};

下面举例一个例子：隔行变色
效果图：这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 300px;
        }
        li {
            line-height: 30px;
            list-style-type: none;
        }
        li span {
            margin:5px;
        }
        .current{
            background-color: #aaa!important;
        }
    </style>
    <script>
        window.onload = function(){
            var lis = document.getElementsByTagName("li");
            for(var i=0;i<lis.length;i++)
            {
                if(i % 2 == 0)
                {
                    lis[i].style.backgroundColor = "#eee";
                }
                else
                {
                    lis[i].style.backgroundColor = "#ddd";
                }

                lis[i].onmouseover = function(){

                    this.className = "current";
                }
                lis[i].onmouseout = function(){

                    this.className = "";
                }
            }

          /*  var lis = document.getElementsByTagName("li");  // 得到所有的li
//alert(lis.length);
            for(var i = 0; i<lis.length; i++)
            {
                if(i%2 == 0)  // 只有偶数能被2整除
                {
                    lis[i].style.backgroundColor = "#eee";
                }
                //鼠标经过li 的时候， 当前的底色变亮
                lis[i].onmouseover = function(){
                    this.className = "current";
                }
                lis[i].onmouseout = function(){
                    this.className = "";
                }
            }*/
        }
    </script>
</head>
<body>
<div class="box">
    <ul>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
    </ul>
</div>
</body>
</html>

1.26 求数组平均值

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    /*var arr = [1,2,3,4,5,6];
    var sum = 0;
    for( var i = 0, leg =arr.length; i < leg; i++){
        sum = sum +arr[i];
    }
    console.log(sum/arr.length)*/
    var arr = [10,20,30,34,67];
    function avg(array){  // 封装求平均值函数
        var len = array.length;  // 数组的长度
        var sum = 0;
        for(var i=0; i<len; i++)
        {
            sum += array[i];   //     sum = sum +array[i];
        }
        return sum / len;
    }
    //a*=3   a= a*3
    console.log(avg(arr));
</script>
</body>
</html>

1.27 三元运算符
一元： a++ b++ +a -a
二元: a+b a>=b
三元: 表达式 ? 结果1 : 结果2 等价于 if else
如果表达式结果为真，则返回结果1
如果表达式结果为假，则返回结果2
if(3>5) {alert(“3”)} else { alert(5)} ==
3>5 ? alert(3) : alert(5)

练习一个例子：全选，取消，反选
效果图：这里写图片描述
点击全选的时候，全部选上；点击取消的时候，全部被取消；点击反选时，是全选的就取消，反之亦然。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var btns = document.getElementsByTagName("button"); // 得到了所有的button
            var inputs = document.getElementById("bottom").getElementsByTagName("input");
            // bottom 里面的input
       /*     btns[0].onclick = function(){

                for(var i=0; i<inputs.length;i++)
                {
                    inputs[i].checked = true;  // 选中表单
                }
            }

            btns[1].onclick = function(){

                for(var i=0;i<inputs.length;i++)
                {
                    inputs[i].checked = false;
                }
            }

            btns[2].onclick = function(){

                for(var i=0;i<inputs.length;i++)
                {
                    if(inputs[i].checked == true)
                    {
                        inputs[i].checked = false;
                    }
                    else
                    {
                        inputs[i].checked = true;
                    }
                }
            }*/

            /*全选和取消 函数*/
             function all(flag){
                 for(var i=0;i<inputs.length;i++)
                 {
                     inputs[i].checked = flag;
                 }
             }
             btns[0].onclick = function(){
                  all(true);
             };
             btns[1].onclick = function(){
                  all(false);
             };
             btns[2].onclick = function(){

                 for(var i=0;i<inputs.length;i++)
                 {
                     inputs[i].checked == true ?  inputs[i].checked = false : inputs[i].checked = true;
                 }
             }
        }
    </script>
</head>
<body>
<div id="top">
    <button>全选</button>
    <button>取消</button>
    <button>反选</button>
</div>
<div id="bottom">
    <ul>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
    </ul>
</div>
</body>
</html>

1.3 排他思想
排他思想：首先干掉所有人，剩下我自己
效果图：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .damao {
            background-color: pink;
        }
    </style>
    <script>
        window.onload = function(){
            var btns = document.getElementsByTagName("button");
            for(var i=0;i<btns.length;i++)
            {
                btns[i].index = i;  // 给每个button 定义了一个index属性  索引号
                btns[i].onclick = function(){
                    //清除所有人的 类名   只能用 for 遍历
                    alert(this.index);
                    for(var j=0;j<btns.length;j++)
                    {
                        btns[j].className = "";
                    }
                    //就剩下自己 就是一个 而且是点击那个
                    this.className = "damao";
                }
            }
        }
    </script>
</head>
<body>
<button>思想原理</button>
<button>思想原理</button>
<button>思想原理</button>
<button>思想原理</button>
<button>思想原理</button>
<button>思想原理</button>

</body>
</html>

再来一个比较现实的例子：tab栏切换原理纯js
tab栏切换效果图js：这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 400px;
            margin:100px auto;
            border:1px solid #ccc;
        }
        .bottom div{
            width:100%;
            height: 300px;
            background-color: pink;
            display: none;
        }
        .purple {
            background-color: purple;
        }
        .bottom .show {
            display: block;
        }

    </style>
    <script>
        window.onload = function(){
            var btns = document.getElementsByTagName("button");
            var divs = document.getElementById("divs").getElementsByTagName("div");
            for(var i= 0;i<btns.length;i++)
            {
                btns[i].index = i;  // 难点
                btns[i].onclick = function(){
                    //让所有的 btn 类名清空
                    //alert(this.index);
                    for(var j=0;j<btns.length;j++)
                    {
                        btns[j].className = "";
                        divs[j].className = "";
                    }
                    // 当前的那个按钮 的添加 类名
                    this.className = "purple";
                    //先隐藏下面所有的 div盒子
                    //留下中意的那个 跟点击的序号有关系的
                    divs[this.index].className = "show";
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <div class="top">
        <button>第一个</button>
        <button>第二个</button>
        <button>第三个</button>
        <button>第四个</button>
        <button>第五个</button>
    </div>
    <div class="bottom" id="divs">
        <div class="show">1好盒子</div>
        <div>2好盒子</div>
        <div>3好盒子</div>
        <div>4好盒子</div>
        <div>5好盒子</div>
    </div>
</div>

</body>
</html>

1.4 变量和属性
1.变量：是独立存在的自由自在的
2.属性和方法：属于某个对象的属性和方法

lingzhisen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript学习第三天笔记

javascript学习第三天笔记本次学习JavaScript的判断用户输入事件，数组（包括声明数组，使用，数组长度，遍历，平均值），排他思想，变量和属性。1.1 判断用户输入事件判断用户输入的事件有 oninput 和onpropertychange 。由于浏览器兼容的问题，他们出现的场合有所不同。正常浏览器支持oninput ，而 IE6、IE7、IE8 支持的 onprope...
复制链接

扫一扫