zoukankan      html  css  js  c++  java
  • 前端冷知识

    前端冷知识

       前端中有很多冷知识,但都非常有意思,下面我们一起来看一看吧。

    HTML中的冷知识

    浏览器地址栏运行JavaScript代码

    直接在浏览器地址栏中输入  javascript:alert("hello")   就可以发现弹框出现。 _注意_:不能直接将这句复制粘贴,必须手打进去才可以。
    

    浏览器地址栏运行HTML代码

    直接在地址栏中输入   data:text/html,<h1>Hello,world!</h1>  就可以发现页面中出现了Hello,world!的内容。
    

    浏览器变成编辑器

    直接在浏览器地址啊中输入 data:text/html,<html contenteditable> 这时就可以在页面中输入任何文字了。 _注意_:其中HTML5中的属性contenteditable使得html可编辑。
    

    编辑页面

    在console控制台输入 document.body.contentEditable="true";即可使得整个页面可编辑。
    

    页面拥有ID的元素会创建全局变量

    在一张HTML页面中,所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量。于是:页面中若有<div id="example"></div>那么我们就可以在script中直接`console.log(example)`.
    

    利用script标签保存任意信息

    将script标签设置为 type=text 并在里面保存任意信息,然后我们就可以在JavaScript中很方便的获取。
    
    ><script type="text" id="template">
    ><h1> This won't display </h1>
    ></script>
    
    > var text = document.getElementById("template").innerHTML;
    

    CSS中的冷知识

    *{cursor :none!important}

    相信你知道这是什么。
    

    实时编辑style标签的display:block样式可以让页面的style标签显示出来,并且加上contentEditable属性后可以让样式成为可编辑状态。注意:将style放在body中。

    JS中的冷知识

    整数的操作

    Javascript中是没有整数概念的,但是利用好操作符可以轻松处理,同时获得效率上的提升。  |0和~~是很好的例子,使用这两者将浮点转化成整形效率比parseInt和Math.round要快。
    如: >console.log((9/5)|0); // 1
        >console.log((6/5)|0);// 1
        >console.log(~~(9/5)); //1 
        >console.log(~~(6/5)); //1
  • 相关阅读:
    Angular基础(三) TypeScript
    Angular基础(二) 组件的使用
    Angular 2基础(一) 环境搭建
    Web API 方法的返回类型、格式器、过滤器
    WebAPI路由、参数绑定
    《ASP.NET MVC企业实战》(三)MVC开发前奏
    《ASP.NET MVC企业实战》(二) MVC开发前奏
    《ASP.NET MVC企业实战》(一) MVC开发前奏
    《Inside C#》笔记(完) 程序集
    巨杉数据库助力民生银行、广发银行前台智慧化业务
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/6371816.html
Copyright © 2011-2022 走看看