【零散的前端day1】对零散知识点的整理

昨天忘记发了，没存草稿，重新编辑一下昨天的较为 实用的知识：

1.charAt(index)

根据位置返回字符，可以用来遍历字符串，如下：（H5新增str[index]等效用法）

<script>
        // var str = "abcde";
        // for (i = 0; i < str.length; i++) {
        //     now = str.charAt(i) //now用来记录当前循环遍历字符串位置的值
        //     console.log(now); //输出遍历结果
        // }
        function bianli(str) {
            for (i = 0; i < str.length; i++) {
                now = str.charAt(i) 
                console.log(now);
            }
            return 0;
        }
        bianli("abcde");
    </script>

可用于查一个字符串中出现次数最多的字符以及次数（主要用途）：（接上图）

        var max = 0; //定义一个变量max存放最大值
        var ch = 0; //定义一个空字符串ch存放出现次数最多的属性名（即字符串中出现次数最多的字母）
        for (var k in o) {//for in遍历对象o
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }
        }
        console.log('出现次数最多的字母是' + ch + ' 出现的次数是' + max);

2.replace方法：

replace（'a' , 'b'）把字符串中的第一个字符'a‘替换成'b'，（第一个！！）如果要全部替换得配合indexOf ！==-1循环使用，主要作用是屏蔽敏感词。

3.显示和隐藏密码的操作

<div class="box">
        <input type="password" id="pwd">
        <label for="">
            <img src="morning.png" alt="" id="pic">
        </label>
    </div>
    <script>
        var pic = document.getElementById('pic');
        var pwd = document.getElementById('pwd');
        var flag = 0;
        pic.onclick = function () {
            if (flag == 0) {  //第一次写没用==用了=，点了半天没反应0.0
                flag = 1;
                pwd.type = 'text';
                pic.src = 'afternoon.png';
            } else {
                flag = 0;
                pwd.type = 'password';
                pic.src = 'morning.png';
            }
        }
    </script>

4.onfocus()和onblur()

获得焦点事件onfocus()和失去焦点事件()。

5.复选框的功能实现

分两部分，全选按钮和下面的全部复选按钮：

全选按钮：注册一个点击事件，判断它的checked属性，选中时（全选按钮.checked==true）通过一个循环把下面全部复选框勾上，反之使全部复选框checked == false。也可以直接将所有复选框状态跟随全选按钮状态即可 （所有复选框.checked = 全选按钮.checked）

全部复选按钮：

通过循环全部注册一个点击事件，定义一个旗子变量flag=true；然后每次点击都全部遍历一遍，若其中有checked属性为false的（即存在未勾选的）按钮，则将flag变为false，这样既可实现JS代码如下：

<script>
        var j_cbAll = document.getElementById('j_cbAll');
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
        j_cbAll.onclick = function () {
            for (i = 0; i < j_tbs.length; i++) {
                if (this.checked == false) {
                    j_tbs[i].checked = false;
                } else {
                    j_tbs[i].checked = true;
                }
            }
            // console.log(this.checked);
        }
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function () {
                var flag = true; //flag用来判断下面复选框是否全部选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (j_tbs[i].checked == false) {
                        flag = false;
                    }
                }
                console.log(flag);
                j_cbAll.checked = flag;
            }
        }
    </script>