JS进阶1

一表格案例

二 onchange事件（二级联动）

三 onmouse事件

四事件委派

五作用域链

一表格案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button class="selectAll">全选</button>

<button class="reverse">反选</button>

<button class="cancel">取消</button>

<hr>

<table border="">

    <tr>

        <td><input type="checkbox" class="check"></td>

        <td>111</td>

        <td>111</td>

    </tr>

    <tr>

        <td><input type="checkbox" class="check"></td>

        <td>111</td>

        <td>111</td>

    </tr>

    <tr>

        <td><input type="checkbox" class="check"></td>

        <td>111</td>

        <td>111</td>

    </tr>

    <tr>

        <td><input type="checkbox" class="check"></td>

        <td>111</td>

        <td>111</td>

    </tr>

</table>

<script>

//     方式1

    var ele_selectAll=document.getElementsByClassName("selectAll")[0];

    var ele_reverse=document.getElementsByClassName("reverse")[0];

    var ele_cancel=document.getElementsByClassName("cancel")[0];

    var ele_input=document.getElementsByClassName("check");

    ele_selectAll.onclick=function () {

          for(var i=0;i<ele_input.length;i++){

              ele_input[i].checked="checked"

          }

    };

    ele_cancel.onclick=function () {

         for(var i=0;i<ele_input.length;i++){

              ele_input[i].checked=""

          }

    };

    ele_reverse.onclick=function () {

         for(var i=0;i<ele_input.length;i++){

             var ele=ele_input[i];

              if(ele.checked){

                  ele.checked=""

              }

              else {

                  ele.checked="checked"

              }

          }

    };

    // 方式2

//    var eles_button=document.getElementsByTagName("button");

//    var ele_input=document.getElementsByClassName("check");

//    for (var i=0;i<eles_button.length;i++){

//       eles_button[i].onclick=function () {

//           if(this.innerHTML=="全选"){

//             for(var i=0;i<ele_input.length;i++){

//             ele_input[i].checked="checked"

//              }

//           }

//

//           else if (this.innerHTML=="取消"){

//

//           }

//

//           else {

//

//           }

//

//       }

//    }

</script>

</body>

</html>

table案例

二 onchange事件（二级联动）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="">

    <select name="pro" id="s1">

        <option value="">请输入省份</option>

        <option value="hebei">河北省</option>

        <option value="henan">河南省</option>

        <option value="beijing">北京省</option>

    </select>

    <select name="city" id="c1">

       <option value="">请输入城市</option>

    </select>

</form>

<script>

    var arr=[1121,22,344];

    var obj={"username":"Yuan","age":12};

//    console.log(typeof arr);//object

//    console.log(typeof obj);//object

//    console.log(obj["username"]);//Yuan

//    for(var i in arr){

//        console.log(arr[i]);//里面的数字

//        console.log(i);//数组的索引

//    };

//

    for(var i in obj){

        console.log(obj[i]);//相当于字典里的value

        console.log(i);//相当于字典里的key

    };

//

//    var data={"hebei":["保定","石家庄"],"henan":["郑州","开封"],"beijing":["朝阳","昌平"]};

//

//    var select_province=document.getElementById("s1");

//    var select_city=document.getElementById("c1");

//

//    select_province.onchange=function () {

//            // console.log(this.value);

//            var province=this.value;

//            var citys=data[province];

//            // console.log(citys);

//

//            // 清空操作

//            console.log(select_city.options.length);

//            select_city.children.length=1;

//

//            for(var i=0;i<citys.length;i++){

//                var ele_option=document.createElement("option"); // <option></option>

//                ele_option.innerHTML=citys[i];  // <option>郑州</option>

//                ele_option.value=i+1;  // <option value=1>郑州</option>

//

//                select_city.appendChild(ele_option)

//            }

//    }

</script>

</body>

</html>

二级联动

三 onmouse事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            width: 200px;

            height: 200px;

            background-color: #0e90d2;

        }

        .title{

            background-color: goldenrod;

            line-height: 30px;

        }

        .item{

            line-height: 20px;

            background-color: #cccccc;

        }

        .hide{

             display: none;

        }

    </style>

</head>

<body>

<div class="c1"></div>

<div class="box">

    <div class="title">onmouseover</div>

    <div class="con hide">

        <div class="item"><a href="">111</a></div>

        <div class="item"><a href="">222</a></div>

        <div class="item"><a href="">333</a></div>

    </div>

</div>

<script>

//    var ele=document.getElementsByClassName("c1")[0]

//    ele.onmouseover=function () {

//        console.log(1234)

//    };

////    ele.onmouseleave=function () {

////        console.log(666)

////    }

//     ele.onmouseout=function () {

//        console.log(888)

//    }

    var ele_title=document.getElementsByClassName("title")[0];

    var ele_box=document.getElementsByClassName("box")[0];

    ele_title.onmouseover=function () {

        this.nextElementSibling.classList.remove("hide")

    };

    ele_box.onmouseout=function () {

        ele_title.nextElementSibling.classList.add("hide")

    } ;

    ele_box.onmouseleave=function () {

        ele_title.nextElementSibling.classList.add("hide")

    }

 // 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

// 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

</script>

</body>

</html>

onmouse事件

四事件委派

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<ul>

    <li>111</li>

    <li>222</li>

    <li>333</li>

</ul>

<button>Add</button>

<script>

    var eles_li=document.getElementsByTagName("li");

    var ele_btn=document.getElementsByTagName("button")[0];

    var ele_ul=document.getElementsByTagName("ul")[0];

////   添加li

    ele_btn.onclick=function () {

        var ele_li=document.createElement("li");

        ele_li.innerHTML=444;

        ele_ul.appendChild(ele_li)

    };

//

//    绑定事件

//    for(var i=0;i<eles_li.length;i++){

//        eles_li[i].onclick=function () {

//            alert(this.innerHTML)

//        }

//    }

    // 事件委派

    ele_ul.addEventListener("click",function (e) {

//        alert(123)

//        console.log(e.target); // 标签

//        console.log(e.target.tagName); // 标签名称

//

        if(e.target.tagName=="LI"){

            console.log(e.target.innerHTML)

        }

    })

</script>

</body>

</html>

事件委派

五作用域链

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    var s=12;

    function f(){

        alert(s);//定义未赋值返回时undefind和无返回值的也是undefind//undefind

        var s=12;//12因为在编译时有s但是不会问它的赋值情况。

        alert(s);//12

    }

    f();//先编译在执行如果局部作用域没有赋值python中会报错；而js中出返回undefind

</script>

</body>

</html>

Js作用域链

JS进阶1的更多相关文章

2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
【 D3.js 进阶系列】进阶总结
进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...
web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从 ...
JS 进阶知识点及常考面试题
将会学习到一些原理相关的知识,不会解释涉及到的知识点的作用及用法,如果大家对于这些内容还不怎么熟悉,推荐先去学习相关的知识点内容再来学习原理知识. 手写 call.apply 及 bind 函数涉及 ...
js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件一.总结一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用一.总结一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么一.总结一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
Node.js进阶篇-koa、钩子函数、websocket、嵌入式开发
代码地址如下:http://www.demodashi.com/demo/12932.html 一.简介 koa是由Express原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的We ...
【 D3.js 进阶系列 — 4.0 】绘制箭头
转自:http://www.ourd3js.com/wordpress/?p=660 [ D3.js 进阶系列 — 4.0 ] 绘制箭头发表于2014/12/08 在 SVG 绘制区域中作图,在绘制 ...
js进阶 14 jquery的ajax有哪些函数和事件（多练）
js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...

随机推荐

ELK(elasticsearch+kibana+logstash)搜索引擎(一)：环境搭建
1.ELK简介这里简单介绍一下elk架构中的各个组件,关于elk的详细介绍的请自行百度 Elasticsearch是个开源分布式搜索引擎,是整个ELK架构的核心 Logstash可以对数据进行收集. ...
探秘小程序（7）：view组件
小程序中最基础,最常用的组件--view,类似于html中div的存在有四个属性: ①hover-class:指定按下去的样式类.当 hover-class="none" 时,没有 ...
Windows 10 将MySQL5.5升级为MySQL5.7
最近想学习一下java.找到一个开源项目需要mysql5.7.11+ 升级电脑上装的是MySQL 5.5,准备直接升级到最新版本的5.7,对于MySQL好像并没有直接升级到最新版本的功能,下载了Wi ...
linux shell脚本之-变量极速入门与进阶(2)
1,$$:显示当前的进程id号 ghostwu@dev:~/linux/shell/how_to_use_var$ cat show_pid.sh #!/bin/bash echo $$ ghostw ...
inheritConstructorStealing.js
// 借用构造函数 // 其基本思路是在子类型构造函数的内部调用父类型的构造函数 function Person(name){ this.name = name; this.friends = [&q ...
CSS元素（文本、图片）水平垂直居中方法
1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:center; 4.position:relati ...
HTML5实现video标签的自定义播放进度条
现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: <!DOCTYPE html> <html lang=" ...
REM在edge浏览器中不重新计算解决
经过多分析和排查,此问题解决的方案第一种: 在CSS样式中添加 body { font-size:100% } 如果不起作用,可以尝试将引用的REMjs放在head内引用
IIS http 错误 401.3 - unauthorized
iis http 错误 401.3 - unauthorized 向物理目录添加iis_iusrs用户权限.
MySQL主从复制--原理
简介 Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布到多个系统上去,这种分布的机制,是通过将Mysql的某一台主机的数据复制到其它主机(slaves)上,并重新执行一 ...

JS进阶1

JS进阶1的更多相关文章

随机推荐

热门专题