2020-8-18js练习

2020-8-18js练习

      • 复选框操作
      • DOM操作
      • js函数面试题

复选框操作

2020-8-18js练习_第1张图片

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>
  <style>
      form{
          padding-top: 200px;
          padding-left: 300px;
      }
  style>
  <body>
    <form method="post" action="#">
      你爱好的运动是?
      <input type="checkbox" id="checkedAll_2" />全选/全不选
      <br />
      <input type="checkbox" name="items" value="足球" />足球
      <input type="checkbox" name="items" value="篮球" />篮球
      <input type="checkbox" name="items" value="羽毛球" />羽毛球
      <input type="checkbox" name="items" value="乒乓球" />乒乓球
      <br />
      <input type="button" id="CheckedAll" value="全 选" />
      <input type="button" id="CheckedNo" value="全不选" />
      <input type="button" id="CheckedRev" value="反 选" />

      <input type="submit" id="send" value="提 交" />
    form>
    <script>
    	// 1. 获取元素
        let checks = document.querySelectorAll('input[name=items]');
        let checkedAll_2 = document.getElementById('checkedAll_2');
        let CheckedAll = document.getElementById('CheckedAll');
        let CheckedNo = document.getElementById('CheckedNo');
        let CheckedRev = document.getElementById('CheckedRev');

        function judge(){
            let flag =true;
            for(let i=0,len=checks.length;i<len;++i){
                if(!checks[i].checked){
                    flag = false;
                    break;
                }
            }
            checkedAll_2.checked = flag;
        }// 遍历当前的复选框状态,修改checkedAll_2的值

        CheckedAll.onclick = function(){
            for(let i=0,len=checks.length;i<len;++i){
                checks[i].checked = true;
            }
            checkedAll_2.checked = true;
        }

        CheckedNo.onclick = function(){
            for(let i=0,len=checks.length;i<len;++i){
                checks[i].checked = false;
            }
            checkedAll_2.checked = false;
        }

        CheckedRev.onclick = function(){
            for(let i=0,len=checks.length;i<len;++i){
                checks[i].checked = !checks[i].checked;
            }
            judge(); //进行判断
        }
        for(let i=0,len=checks.length;i<len;++i){
            checks[i].onclick = judge;// 当每个复选框点击了,需要进行判断
        }
        checkedAll_2.onclick = function(){
            for(let i=0,len=checks.length;i<len;++i){
                checks[i].checked = this.checked;
            }
        }
    script>
  body>
html>

DOM操作

2020-8-18js练习_第2张图片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <center>
        <br> <br> 添加新员工 <br> <br> name: <input type="text"
            name="name" id="name" />   email: <input type="text"
            name="email" id="email" />   salary: <input type="text"
            name="salary" id="salary" /> <br> <br>
        <button id="addEmpButton">Submitbutton>
        <br> <br>
        <hr>
        <br> <br>
        <table  border="1" cellpadding="5" cellspacing=0>
            <tbody id="employeetable">
                <tr>
                    <th>Nameth>
                    <th>Emailth>
                    <th>Salaryth>
                    <th>操作th>
                tr>
                <tr>
                    <td>Tomtd>
                    <td>[email protected]td>
                    <td>5000td>
                    <td><a href="deleteEmp?id=001">Deletea>td>
                tr>
                <tr>
                    <td>Jerrytd>
                    <td>[email protected]td>
                    <td>8000td>
                    <td><a href="deleteEmp?id=002">Deletea>td>
                tr>
                <tr>
                    <td>Bobtd>
                    <td>[email protected]td>
                    <td>10000td>
                    <td><a href="deleteEmp?id=003">Deletea>td>
                tr>
            tbody>
        table>
    center>
    <script>
        // 1 获取元素
        let employeetable = document.getElementById('employeetable');
        let addEmpButton = document.getElementById('addEmpButton');
        let name = document.getElementById('name');
        let email = document.getElementById('email');
        let salary = document.getElementById('salary');
        // 对添加的按钮绑定事件
        addEmpButton.onclick = function (){
            let tr =  document.createElement("tr");
            tr.innerHTML = `${name.value}
            ${email.value}
            ${salary.value}
            ${Date.now()}">Delete
            `
            // 使用模板字符串 ,创建子元素比较繁琐 直接使用innerHTML简洁
            employeetable.appendChild(tr);
            abind(); // 需要为新增的a标签添加事件 这里简写
        }
        function a(){
            let tr = this.parentNode.parentNode ;
            let name  = tr.firstElementChild.innerHTML;
            if(confirm('是否删除'+name)){
                employeetable.removeChild(tr);
            }
            return false;
        }
        function abind(){
            let alink = document.querySelectorAll("td>a");
            for(let i=0,len=alink.length;i<len;++i){
                alink[i].onclick = a;
            }
        } 
        abind();
    script>
body>
html>

js函数面试题

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function Fn(){
            getFn = function(){console.log(1);}
            return this;
        }
        Fn.getFn = function(){console.log(2);};
        Fn.prototype.getFn = function(){console.log(3);}
        var getFn = function(){console.log(4);};
        function getFn(){console.log(5);}

        Fn.getFn(); // 2 Fn作为函数对象,访问自己的属性
        getFn(); // 4  函数提升优于变量提升 被14 再重写
        Fn().getFn(); // 1 首先执行Fn函数 里面getFn在作用域里找,覆盖到全局的 this指向的是window 
        getFn(); // 1 被覆盖了
        new Fn.getFn(); //2 .运算符优先级高 等价于 new (Fn.getFn()) 输出2
        new Fn().getFn(); //3 (new fn()).getFn() 原型链上的
        new new Fn().getFn(); //3 new  (new fn()).getFn() 
    </script>
</body>
</html>

你可能感兴趣的:(前端)