JavaScript /

作者: 羊烊羴 | 来源:发表于2017-09-08 13:50 被阅读0次

JavaScript-01
锋利的 jQuery | 第1章_认识 jQuery
javascript学习思维导图
javaScript 基础知识
JavaScript 基础
JS——Hoisting(提升)
2018-06-22
JavaScript基础
JavaScript 学习脑图
JavaScript学习指南

一个装逼的小技巧，打印带颜色的log

console.log("%chellow","color:yellow");

以表格的方式打印数据

  var obj={
    name:"tom",
    age:18
  }
  console.table(obj);

检测方法的调用来源

console.trace()

输出运行次数

console.count()

测试速度

console.time();
$("div");
console.timeEnd();

唔，看到阮一峰的一个写法

setTimeout(fun,1000,'done')
//以上写法相当于
setTimeout(fun('done'),1000)
//在setTimeout中第三个参数开始，所有的参数会被是作为第一个参数也就是function的参数来处理
//这个蛮有意思的，之前在其它文档没有看过这个写法，MDN上有

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

验证码弹出


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .clearfix::after, .clearfix::before {
            display: table;
            content: "";
        }

        .clearfix::after {
            clear: both;
        }

        input {
            border: none;
            outline: none;
            background-color: #fff;
        }

        .current {
            background-color: #ccc;
        }

        .layerVerifcation {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            padding: 20px 10px;
            width: 80%;
            height: 200px;
            border: 1px solid #CCCCCC;
            box-sizing: border-box;
        }

        .layerVerifcation h4 {
            text-align: center;
        }

        .layerVerifcation .infoShow {
            margin-top: 10px;
        }

        .layerVerifcation .infoShow a {
            position: absolute;
            top: 20px;
            right: 10px;
            font-size: 18px;
        }

        .layerVerifcation .infoShow input {
            float: right;
        }

        .layerVerifcation .number-input {
            width: 250px;
            margin: 40px auto 0;
        }

        .layerVerifcation .number-input li {
            list-style: none;
        }

        .layerVerifcation .number-input .span_code {
            float: left;
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            margin-left: 10px;
            line-height: 50px;
            text-align: center;
            font-size: 24px;
        }

        .layerVerifcation .hide-input {
            opacity: 0;
        }
    </style>
    <title>Document</title>
</head>
<body>
<div class="layerVerifcation" id="verfication">
    <h4 class="layerVerifcation-title">请输入验证码</h4>
    <div class="infoShow clearfix">
        <span>187217054XX</span>
        <input type="button" value="重新发送">
        <a class=“close>✖</a>
    </div>
    <ul class="number-input  clearfix">
        <li><span class="span_code" style="margin: 0;"></span></li>
        <li><span class="span_code"></span></li>
        <li><span class="span_code"></span></li>
        <li><span class="span_code"></span></li>
    </ul>
    <div class="hide-input">
        <input class="hide_code" oninput="if(value.length>4)value=value.slice(0,4)" type="number">
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous"></script>
<script>
    $(function () {
        var lis = $(".number-input li");

        $(".span_code").on("click", function () {
            $(".hide_code").focus();
            $(".span_code").eq(0).addClass("current");
        })
        $(".hide_code").on("input", function () {
            var strCode = $(this).val(),
                len = strCode.length,
                spanlen = len - 1;
            lis.each(function (i, j) {
                console.log(i);
                if (i > spanlen) {
                    $(j).children(".span_code").html("");
                }
            })

            if (spanlen == -1) spanlen = 0;
            $(".span_code").removeClass("current");
            lis.eq(spanlen).children(".span_code").html(strCode.substring(spanlen, len)).addClass("current")

        })
    })
</script>
</body>
</html>

文字的展开、收起

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi cumque earum fugit magni nulla pariatur quos
    rem sapiente voluptates!
</div>
<button id="more">more</button>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    function more(options) {
        var init = {
            container: "#container",
            maxLength: 15,
            ending: "..."
        };
        this.option = $.extend({}, init, options);
        this.text = $(this.option.container).text();
        this.flag = false;
    }
    more.prototype.isStop= function () {
        if (this.flag) {
            $(this.option.container).text(this.text.toString().substring(0, this.option.maxLength) + this.option.ending);
            this.flag = false;
        }else{
            $(this.option.container).text(this.text);
            this.flag=true;
        }
    }
    
    var a=new more();
    $("#more").click(function () {
        a.isStop()
    })
</script>
</html>

Element.dataset

Element.dataset属性允许无论是在读取模式和写入模式下访问在HTML或DOM中的元素上设置的所有的自定义数据属性（data-）集，在H5中我们可以给HTML元素添加data-属性，我们可以为该元素设置任意名称，但是在使用element.datasetAPI时我们需要注意以下规则：

element.dataset不能直接拿来使用，否则会遇到提示报错
在javascript里使用data-*属性名称时，要把名称转变为驼峰式命名法
名称不能以xml打头
名称里不能有大写字母

下面我们来举一个栗子：

<body>
  <div id="myDiv" data-name="my-name" data-id="my-id" data-my-custom-key="This is this value"></div>
<script>
    var element=document.getElementById("myDiv");
//   获取自定义属性
    var id=element.dataset.id,
        name=element.dataset.myCustomKey;
//  更改自定义属性的值
    element.dataset.myCustomKey="some other value"
//  如果之前在元素上不存在myCreate的属性，那么会添加到元素上
    element.dataset.myCreate="my create"
    console.log("id|" + id + "|name|" + name);
</body>

Object.freeze(obj)

该方法用来冻结对象，参数为要冻结的对象，返回值为冻结后的对象，在执行该命令之后，参数obj不能改变/添加自身的变量，要求参数必须为对象，否则会报 TypeError错误

 var obj={
        name:'tom',
        age:18
    }
    Object.freeze(obj);
    obj.name="jack"
    obj.sex="man"
    obj.name="jack"
    console.log(obj)

classList

返回元素的类名，该属性用于在元素中添加，移除以及切换css类

属性

length：返回列表中类的数量

方法

add(class1,class2...)

在元素中添加一个或多个类名，如果指定的类名已经存在，则不会添加
contains(class)

返回布尔值，判断指定的类名是否存在，true表示该类已经存在，false表示不存在
item(index)

返回元素引用的类集合的对应索引的类名，索引值从0开始，如果索引在区间范围外则返回null
remove(class1,class2....)

移除元素中的一个或多个类名，移除不存在的类名不会报错
toggle(class,true|false)

在元素中切换类名，如果类名已经存在了那么会一出类名返回false，如果类名不存在那么会添加类名返回true

第二个参数为可选参数，表示是否强制添加/移除该类，不管该类是否存在

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .color{
            background-color: red;
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="box" class="one">
        
    </div>
    <button>chang</button>
</body>
<script>
    document.getElementById("box").classList.add("color");
    document.getElementById("box").classList.remove("color");
    console.log(document.querySelector("#box").classList.item(1));
    document.getElementsByTagName("button")[0].onclick=function(){
        document.querySelector(".one").classList.toggle("color")
    }
</script>

transitionend

该事件会在transition完成之后触发

<body>
<div id="box" class="color-g color-y">
</div>
</body>
<script>
    document.querySelector("#box").addEventListener("click", function () {
        this.style.height = "300px"
    })
    document.querySelector("#box").addEventListener("transitionend",function () {
        alert("过渡结束事件触发了");
    })
</script>

在看全选反选时比较有意思的代码，这段代码是用来判断全选按钮是否应该是选中状态

$('#both').prop('checked',$tmp.length==$tmp.filter(":checked").length)

   console.time("a")
//    var i=1000;
    for(var i=10;i--;){
        console.log(i);
    }
    console.timeEnd("a")

    var arr=['tom',2,3,'jack'];
    for(var i=0,a;a=arr[i++];){
        console.log(arr[i]);
    }

localStorage存储数组

 var weekArray = ['周一'、'周二'、'周三'、'周四'、'周五']
//存：
localStorage.setItem('weekDay',JSON.stringify(weekArray));
//取：
 weekArray = JSON.parse(localStorage.getItem('weekDay'));

JavaScript-01
A 什么是JavaScript JavaScript 定义JavaScript JavaScript基础语法常用...
锋利的 jQuery | 第1章_认识 jQuery
一、JavaScript和JavaScript库 JavaScript简介 JavaScript是Netscape...
javascript学习思维导图
JavaScript 数据类型 JavaScript 变量 Javascript 运算符 JavaScript 流...
javaScript 基础知识
javaScript 基础知识一 JavaScript概述 JavaScript概述 JavaScript是客户...
JavaScript 基础
JavaScript基础 JavaScript简介JavaScript对象 JavaScript简介为什么使用j...
JS——Hoisting(提升)
Javascript Hoisting的概念 Javascript Hoisting：In javascript,...
2018-06-22
javascript之路 01-认识JavaScript 初始JavaScript JavaScript是一种直译...
JavaScript基础
JavaScript简介JavaScript变量JavaScript对象、函数JavaScript数字，字符串Ja...
JavaScript 学习脑图
javascript数据类型 javascript变量 javascript运算符 javascript数组 ja...
JavaScript学习指南
1.1 JavaScript基础概念： JavaScript (ECMAScript) ：JavaScript 是...