发表于 | 阅读次数

画一个正方形很容易，画一个响应式的正方形，怎么画？

无论 width 和 height 怎么变化，永远是一个正方形。width 和 height 肯定不能写死了。
div 的内容宽度和高度就是 div 的 width 和 height，如果不写 height，默认 height 为0。padding-top 撑起 div，对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的是父容器的宽度。当我们设置padding-top 为 100%时，就是父容器的宽度，子元素不写 width 时，就是跟父元素的 width 一样。这时就画成了一个正方形。无论怎么变化，都是一个正方形。

1
<style>
2
  div{
3
    border: 1px solid red;
4
    padding-top: 100%;
5
    background:red;
6
  }
7
</style>
阅读全文 »

发表于 | 阅读次数

增

添加元素，子元素（子元素，文本），属性

1
window.dom={};
2
window.dom.create = function (tagName,children,attributes) {
3
    var tag = document.createElement(tagName);
4
    if(typeof children === 'string'){
5
        var text =document.createTextNode(children);
6
        tag.appendChild(text);
7
    }else if(children instanceof HTMLElement){
8
        tag.appendChild(children)
9
    } else if(children instanceof Array){
10
        for(var i=0;i<children.length;i++){
11
            if(typeof children[i] === 'string'){
12
                tag.appendChild(document.createTextNode(children[i]))
13
            }else if(children[i] instanceof HTMLElement){
14
                tag.appendChild(children[i])
15
            }
16
        }
17
    }
18
    if (typeof attributes === 'object'){
19
        for(var key in attributes){
20
            tag.setAttribute(key,attributes[key])
21
        }
22
    }
23
    return tag;
24
};
阅读全文 »

发表于 | 阅读次数

DOM 是什么

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。 DOM 提供了一种表述形式— 将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将 web 页面和脚本或编程语言连接起来了。

DOM API 获取元素的 N 种方法

1.document.getElementById()

getElementById方法返回匹配指定id属性的元素节点。

语法

1
element = document.getElementById(id);
阅读全文 »

发表于 | 阅读次数

Error对象

JavaScript解析或执行时，一旦发生错误，引擎就会抛出一个错误对象。JavaScript原生提供一个Error构造函数，所有抛出的错误都是这个构造函数的实例。

根据语言标准，Error对象的实例必须有message属性，表示出错时的提示信息，其他属性则没有提及。大多数JavaScript引擎，对Error实例还提供name和stack属性，分别表示错误的名称和错误的堆栈，但它们是非标准的，不是每种实现都有。

message：错误提示信息
name：错误名称（非标准属性）
stack：错误的堆栈（非标准属性）

阅读全文 »

发表于 | 阅读次数

meta标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

meta 的属性有：name属性、http-equiv属性 、content属性和charset属性 。

阅读全文 »

发表于 | 阅读次数

关键字

关键字不能作为标识符（变量名），有特殊功能。

break case catch class
const continue debugger default
delete do else extends
finally for function if
import in instanceof return
super switch this throw
typeof var void while
with yield
阅读全文 »

发表于 | 阅读次数

JavaScript 是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

数据类型

最新的 ECMAScript 标准定义了7种数据类型：

  • 6种基本类型：
    • 数值（number）
    • 字符串（string）
    • 布尔值（boolean）
    • undefined
    • null
    • Symbol
  • 和对象（object）
    阅读全文 »

发表于 | 阅读次数

HTML input元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。

在HTML表单中，input标签是最常用的控件标签，包括最常见的文本域、按钮都是采用这个i标签。这个标签的基本语法是：

1
<form>
2
    <input name="控件名称" type="控件类型" />
3
</form>
阅读全文 »

发表于 | 阅读次数

什么是Flex布局？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。

Flex之前 我们用什么布局

  • normal flow （正常流，也叫文档流）
  • float + clear
  • position relative + absolute
  • display inline-block
  • 负 margin

Flex 来了

一种新的布局方式——Flex布局

1.块级布局侧重垂直方向、行内布局侧重水平方向，flex 布局是与方向无关的。
2.flex 布局可以实现空间自动分配、自动对齐 （flexible：弹性、灵活）。
3.flex 适用于简单的线性布局，更复杂的布局要交给 grid 布局（还没发布）。

阅读全文 »