JavaScript常用的小功能

一键全选/全不选

一、实现效果

这是原本的表格，当你点击全选/全不选前面的给选项框的时候就会全部选中，当取消下面复选框的选中的时候上面的“全选/全不选”前面的选项框就会自动取消勾选，且如果不点击“全选/全不选”前面的选项框，当手动把下面几个选项框都选上的时候，“全选/全不选”前面的选项框会自动勾选 实现效果如下👇

二、效果原理：
html的radio和checkbox这两个标签都有一个checked属性，当checked=true的时候表示这个选项框被勾选了，当checked=false的时候表示这个选项框没有被选中，所以确保“全选/全不选”前面的选项框的checked属性和下面所有选项框的checked属性一致就可以了。
三、代码实现：

function f1() {
        //获取标题行checkbox的checked对象
        var flag = document.getElementById("one").checked;
        //定位数据行所有的checkbox
        var domarr = document.getElementsByName("two");
        //遍历所有的checkbox
        for (var i = 0; i < domarr.length; i++) {
            var dom = domarr[i];
            dom.checked = flag;
        }
    }

function1的功能只能保证勾选第一行的选项的时候下面所有的选项框会自动勾选。

function f2(){
            var num=0;
            var domarr=document.getElementsByName("two");
            for(var i=0;i<domarr.length;i++){
                var domobj=domarr[i].checked;
                if(domobj==true){
                    ++num;
                }
            }
            if(num==domarr.length){
                document.getElementById("one").checked=true;
            }else{
                document.getElementById("one").checked=false;
            }
        }

这下功能就算完整了，接下来给大家解读一下代码，
方法1：首先通过id标签利用document对象定位标题行，然后获取标题行的checked属性
然后通过name标签定位其他行数据并将数据存放到一个数组中，然后利用for循环遍历这个数组，一个一个的取出这些数据行的数据，然后将标题行的checked属性值赋给这些数据的checked属性，以此达到标题行控制其他数据行的目的。方法2：逻辑和方法1的逻辑是反过来的，这里就不赘述了。

鼠标经过之处单元格背景变色

一、实现效果

当鼠标经过的时候单元格就会变色，鼠标划走的时候单元格就会变成原来的颜色

二、效果原理
这个效果的实现涉及到js中的鼠标监听事件：onmouseover（表示发现鼠标）onmouseout（表示鼠标离开），当发现鼠标的时候利用标签的dom对象直接调用其背景颜色，将背景颜色设置为你想要的颜色，当发现鼠标离开的时候，利用dom对象将背景颜色设置为白色就可以
三、代码实现
js代码：

function f1(domobj) {
        //1.调用对应行的style值然后去赋值
        domobj.style.backgroundColor="green";
    }

function f2(domobj) {
        domobj.style.backgroundColor="white";
    }

html代码：

<tr onmouseover="f1(this)" onmouseout="f2(this)">

每一行的标签都要调用这两个函数，在html中函数中传入的实参this表示当但标签的dom对象

结束语

第一次写博客，如果有错误的地方，希望大家多多指正！谢谢大家的观看。