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事件这 ...

随机推荐

【微收藏】FourShadows.js – 时间感知的算法驱动的图标阴影JS库
废话一箩筐,筐筐有心得不小心养成了一个刷微博的习惯,主要还是关注一些前端人士,学习一些前端方面的知识,看到大家都有一些刷微博的小习惯.有的是转发一下,转发内容来一个标记(MARK).也有评论中标记为 ...
[POI2004] SZN
Description 给定$N(N\leq 10000)$个点的树,要求用最少的路径覆盖树边.路径之间可以有交点,不能有交边.问最少需要几条路径以及在第一问的基础上最长的路径最短是多少? Sol ...
前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由二.Vuex状态管理三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
发布webservice之后调用不通
在websrvice发布文件的webconfig中加入 <httpRuntime maxRequestLength="102400" /> <webServic ...
Python爬虫之网页图片抓取
一.引入这段时间一直在学习Python的东西,以前就听说Python爬虫多厉害,正好现在学到这里,跟着小甲鱼的Python视频写了一个爬虫程序,能实现简单的网页图片下载. 二.代码 __author ...
【SQLite】简单的基本使用步骤
SQLite介绍SQLite is a software library that implements a self-contained, serverless, zero-configuratio ...
idea/ecipse中使用maven集成springmvc相关jar包时候，出错：java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet
参考stackoverflow:https://stackoverflow.com/questions/11227395/java-lang-classnotfoundexception-org-sp ...
groovy使用范型的坑
java的范型 Map<String, Integer> map = new HashMap<>(); map.put("a", 100); map.put ...
X问题（中国剩余定理+不互质版应用）hdu1573
X问题 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
Opening Ceremony（贪心）
Problem E: Opening Ceremony Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 137 Solved: 30[Submit][S ...

JS进阶1

JS进阶1的更多相关文章

随机推荐

热门专题