一、HTML

1.编写html文件

a.格式

<!DOCTYPE html>

<html>

<head>

    <title>标题</title>

</head>

<body>

　　<!-- 内容 -->

</body>
</html>

b.注释

<!-- 注释内容 -->

2.标签分类

a.自闭合标签

<meta charset="UTF-8">

b.主动闭合标签　

<title>我的HTML页面</title>

3.标签<head>

a.标题<title>
b.内联样式<style>
c.引入资源<link>

<link rel="stylesheet" href="commons.css" />

<link rel="shortcut icon" href="commons.ico" />

d.引入js文件<script>

<script src='commons.js'></script>

<script> /*JavaScript代码*/ </script>

e.页面信息<meta>

编码：<meta http-equiv="content-type" content="text/html;charset=utf-8">

刷新和跳转：<meta http-equiv="Refresh" Content="10">

　　　　　　<meta http-equiv="Refresh" Content="5;Url=baidu.com"/>

关键字：<meta name="keywords" content="关键字1;关键字2;关键字3">

描述：<meta name="description" content="页面描述........">

IE兼任：(先兼任IE8，再考虑IE7):<meta http-equiv="X-UA-Compatible" content="IE=IE8;IE=IE7;" />4.body标签

a.基本分类(依据：是否独占一行)

- 块级标签：<div>

- 行内标签：<span>

b.段落标签

- H系列标签

- <p>两段落间有间距

- <br/>换行

- <hr/>水平线

c.超链接<a>

页面跳转　　<a href="www.baidu.com">百度</a> 当前页面跳转　　<a href="www.baidu.com" target="_blank">百度</a> 新建一个页面跳转
锚(位置跳转) 　　<a href="#某个标签的id">跳转</a>

d.图片标签<img>

<img src="URL" title="描述" alt="替换文本">

e.特殊符号：

- &nbsp;(space)

- &gt;(<)

- &lt;(>)

- &amp;(&)

f.表格标签

<table>

　　<thead>

　　　　<tr>

　　　　　　<th>

　　<tbody>

　　　　<tr>

　　　　　　<td>

　　colspan = '2' 横向合并单元格
　　rowspan = '2' 纵向合并单元格
g.列表标签

无序列表

　　　　<ul>

　　　　　　<li>

有序列表

　　　　<ol>
　　　　

　　　　　　<li>

  PS：默认：数字列表

  type="A"大写字母、type="a"小写字母

　type="I"罗马数字、type="i"小写罗马数字

自定义列表

　　　　<dl> 　　　　

　　　　　　<dt> 　　　　　　

　　　　　　<dd>

h.框架标签(同一个窗口显示不止一个页面)

<iframe src="URL" width="200" height="200" frameborder="0"></iframe>

i.表单

格式:

　　　　　　<input type='submit'>

　　　　</form>

　　GET：http://dddddd?q=值&b=值
　　POST：放在报表里面传输

input系列

　　　　文本框：type='text'

　　　　密码框：type='password'

　　　　提交按钮：type='submit'

　　　　普通按钮：type='button'

　　　　单选按钮：type='radio'(互斥选项，name相同,得到选中的value)

　　　　复选按钮：type='checkbox'(name相同,得到选中的个value)

　　　　文件上传按钮(依赖form属性：enctype="multipart/form-data")

　　　　重置按钮(重置当前页面所有按钮)

其他控件

　　　　多行输入框：

　　　　下拉选择框：

　　　　　　</select>

　　　　下拉框分组：

属性： size="2" 默认列数 multiple="multiple" 是否多选

label标签(点击文字关联的控件获得光标 )

　　　　<label for="username">用户名：</label> 
　　　　<input id="username" type="text" name="user" />

控件分组框 <fieldset>

　　　　<legend>分组标题</legend>

　　　　</fiedset>

二、CSS样式

1.结构

选择器：{

　　属性1:值;

　　属性1:值

}

/* 注释.... */

2.选择器

<标签 class="mcls" id="mid"></标签>

a.id选择器:

#mid{

　　样式。。。

}

b.class选择器

.mcls{

　　样式。。。

}

c.标签选择器

标签{

　　样式。。。

}

d.属性选择器（已选标签再通过属性二次筛选）

input[type='text']{ width:100px;height:200px; }

.c1[n='alex']{ width:100px;height:200px; }

e.组合选择器（多个属性设置同样的样式）

.c1,.c2,div{

　　样式。。。

}

f.层级选择器（层以下的标签选择样式）

.c1 .c2 div{

　　样式。。。

}

g.后代选择器(space),子元素选择器(>）,相邻兄弟选择器（+）,普通兄弟选择器（~）

3.伪类/元素选择器

a.链接标签

a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */

b.常用选择器

:active 选择正在活动链接
:hover 把鼠标放在链接上的状态
:checked 选择所有选中的表单元素
:disabled 选择所有禁用的表单元素
:before 在每个<p>元素之前插入内容
:after 在每个<p>元素之后插入内容

4.文字文本

a.文本格式

- 颜色：color

- 行高：line-height

- 对齐方式：text-align(right,center,left,justify(展开行末尾无空格))

- 删除修饰：text-decoration:none;(主要用于删除链接的下划线)

b.字体

- 字体：font-family:"宋体", "微软雅黑","华文新魏";

- 斜体：font-style(normal,italic,oblique)

- 加粗：font-weight:900;(normal,lighter,bold)

- 大小：font-size:40px;(16px=1em)

5.背景样式

背景颜色：background-color:red;

背景图片：background-image:url('URL');

不重复图片：background-repeat:none;(no-repeat,repeat-x,repeat-y)

起始位置：background-position:right top;

单独设置：background-position-x/y

简写属性：background:#ffffff url('img_tree.png') no-repeat right top;

b.透明度和层

透明度：opacity:0.5;

层级顺序：z-index

6.表格样式

a.折叠边框：border-collapse: collapse;

b.文字上下对齐：vertical-align:bottom;

c.隐藏表格：visibility: collapse;

7.盒子模型

a.高度：height(像素、百分比)

b.宽度：width(像素、百分比)

c.最大最小高宽：max,min

d.外边距：margin

e.内边距：padding

f.边框：

边框属性：border-top-color:red;[top,bottom,left,right][style,width,color]

(solid,dotted,dashed,double,groove,ridge,inset,outset)

简写属性：border:5px solid red;

圆角：border-radius:50%;圆

8.内联块属性

display:inline;(none,inline,block,inline-block)

9.页面布局

a.position:(top,bottom,left,right)
　　- 流水定位:static(默认定位)

　　- 固定定位：fixed(固定在页面的某个位置)

　　- 相对定位：relative + absolute(先对于块的某个位置)

　　- 绝对定位：absolute(第一次定位，可以在指定位置，滚轮滚动时就不在了)

　　- 粘性定位：sticky,-webkit-sticky(Safari)(top:0)(滚动后黏在顶部)

b.Overflow(hidden,scroll,auto,visible内容溢出)

c.float+overflow:hidden

　　clear(left,right)

　　<div style="clear:both"></div>

10.页面对齐

a.水平居中：margin: auto;需置宽度

b.左右对齐

　　- position: absolute;

　　- float:left,right;(防溢出：verflow: auto;)

c.垂直居中

　　- line-height 属性值和 height 属性值相等

　　- 相对定位 + top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);

三、JavaScript

1.JavaScript代码需要放置在<body>标签内部的最下方
2.注释：

单行注释： //

多行注释： /* */

3.变量：

name = 'alex' ===> 全局变量

var name = 'alex' ===> 局部变量

4.基本数据类型

数字

　　a = 18

字符串

　　a = 'sjl'

　　a.chartAt(索引位置)

　　a.substring(起始位置，结束位置)

　　a.lenght 获取当前字符串长度

　　...

数组

　　a = [11,22,33,44]

字典

　　a = {'k1':'v1','k2':'v2'}

布尔类型

　　true、flase

5.for循环

1.循环时，循环的元素是索引

    a =[11,22,33,44]

    for(var item in a){

        console.log(a[item]);

    }

    a ={'k1':'v1','k2':'v2'}

    for(var item in a){

    console.log(a[item]);

    }

2.

    for(var i=0;i<a.lenght){

        ...

    }

6.判断

&& ||

== != 不严格比较（不比较数据类型）

=== !== 严格比较

if(条件){

　　...

}

else if(条件){

　　...

}

else{

　　...

}

var v = 条件 ? 真值 : 假值

switch(c){

　　case 1:

　　　　...

　　case 2:

　　　　...

　　case 3:

　　　　...

　　default:

　　　　...

}

7.函数

a.普通函数：

　　function func(){

　　　　console.log(666);

　　}

b.匿名函数：

　　setInterval(function(){

　　　　console.log(666);

　　},5000)

c.自执行函数（创建函数并且自动执行）

　　(function(arg){

　　　　console.log(arg);

　　})(666)

8.JavaScript库函数

1.序列化

    JSON.stringify(obj) 序列化

    JSON.parse(str) 反序列化

2.转义

    decodeURI( ) URl中未转义的字符

    encodeURI() URI中的转义字符

    decodeURIComponent() URI组件中的未转义字符

    encodeURIComponent() 转义URI组件中的字符

    escape() 对字符串转义

    unescape() 给转义字符串解码

3.eval

    eval("1+1") 表达式/代码都可以执行

4.时间

    Date类

    var d = new Date();

    d.getXXX 获取

    d.setXXX 设置

9.正则表达式

test - 判断字符串是否符合规定的正则

exec - 获取匹配的数据

/.../ 用于定义正则表达式

/.../g 表示全局匹配

/.../i 表示不区分大小写

/.../m 表示多行匹配

示例：

　　rep = /\d+/;

　　rep.text("sdkjahcuisan44454")

　　rep = /\d+/g; //全局匹配，后面加个g，匹配一个拿一个

　　rep.exec("sdkja66hcuisan44454")

　　rep.exec("sdkja66hcuisan44454")

10.作用域

a.JavaScript以函数为作用域

　　示例1：

　　　　function func(){

　　　　　　if(1==1){

　　　　　　var name = 'sjl';

　　　　}

　　　　console.log(name);

　　　　}

　　　　func();

//输出:sjl

b.函数的作用域在函数未被调用之前，已经创建

c.函数的作用域存在作用域链，而且也是在被调用前创建

　　实例2：

　　　　xo = "sjl";

　　　　function func(){

　　　　　　var xo = "lyy";

　　　　　　function inner(){

　　　　　　　　var xo = "lsm";

　　　　　　　　console.log(xo);

　　　　　　}

　　　　　　inner();

　　　　}

　　　　func();

//输出:lsm

　　示例3：

　　　　xo = "sjl";

　　　　function func(){

　　　　　　var xo = "lyy";

　　　　　　function inner(){

　　　　　　console.log(xo);

　　　　　　}

　　　　　　return inner;

　　　　}

　　　　var ret = func();

　　　　ret();

//输出:lyy

　　示例4：

　　　　xo = "sjl";

　　　　function func(){

　　　　　　var xo = "lyy";

　　　　　　function inner(){

　　　　　　　　console.log(xo);

　　　　　　}

　　　　　　var xo = "yp";

　　　　　　return inner;

　　　　}

　　　　var ret = func();

　　　　ret();

//输出:yp

　　==================================================

　　|| 全局　　　　　　|| func 　　　　 || inner 　　　　 ||

　　|| xo = sjl 　　 || xo = yp 　　  || : 　　　　　　||

　　|| 　　　　　　　　|| 　　　　　　　 || 　　　　　　　　||

　　==================================================

//func函数执行的时候xo就已经替换成"yp"了，所以执行inner函数往上一个函数链找得到的xo=yp

d.函数内局部变量在创建时就已经声明

　　示例5：

　　　　function func(){

　　　　　　console.log(xxoo);

　　　　}

　　　　func()

//程序直接报错

　　示例6：

　　　　function func(){

　　　　　　console.log(xxoo);

　　　　　　var xxoo = "sjl";

　　　　}

　　　　func();

//输出:undefined（变量声明了，但是在执行的时候才赋值）

11.JavaScript面向对象

a.this代指对象

b.创建对象时，new函数

    function foo(){

        var xo = "sjl";

    }    

    function Foo(n){

        this.name = n;

    }

    function Fooo(n){

        this.name = n;

        this.logName = function(){

            console.log(this.name);

        }

    }

    foo();

    var obj1 = new Foo("I");

    var obj2 = new Foo("WE");

c.原型：

    function Foo(n){

        this.name = n;

    }

    //Foo的原型,无论实例多少个对象，在内存里只会生成一个函数

    Foo.prototype = {

        'sayName': function(){

            console.log(this.name);

        }

    }

    obj1 = new Foo("we");

    obj1.sayName();

    obj2 = new Foo("wee");

12.JavaScrip的AO
　　active object ===>> AO
　　1.形式参数
　　2.局部变量
　　3.函数声明表达式

//示例：

    function t1(age){

        console.log(age);

        var age = 27;

        console.log(age);

        function age(){}

        console.log(age);

    }

    //输出：function 27 27

四、DOM
1.查找标签

a.直接找

　　document.getElementById //根据ID获取一个标签

　　document.getElementsByName //根据name属性获取标签集合

　　document.getElementsByClassName //根据class属性获取标签集合

　　document.getElementsByTagName //根据标签名获取标签集合

b.间接找

　　parentNode      // 父节点

　　childNodes      // 所有子节点

　　firstChild      // 第一个子节点

　　lastChild       // 最后一个子节点

　　nextSibling     // 下一个兄弟节点

　　previousSibling // 上一个兄弟节点

　　parentElement          // 父节点标签元素

　　children               // 所有子标签

　　firstElementChild      // 第一个子标签元素

　　lastElementChild       // 最后一个子标签元素

　　nextElementtSibling    // 下一个兄弟标签元素

　　previousElementSibling // 上一个兄弟标签元素

2.操作标签

标签.innerText = "" // 仅文本，忽略标签 标签当字符串赋值进去

标签.innerHTML = "" // 全部内容 可以赋值标签

value       // 获取和赋值(input系列,textarea)

selectIndex // select标签特有的(select)

3.样式操作

className             // 获取所有类名 添加class

classList             // 获取所有类

classList.remove(cls) // 删除指定类

classList.add(cls)    // 添加类

标签.style.color           //操作单个样式

标签.style.backgroundColor //操作单个样式

4.属性操作

attributes              // 获取所有标签属性

setAttribute(key,value) // 设置标签属性

getAttribute(key)       // 获取指定标签属性

removeAttribute(key)    // 移除指定标签属性

5.标签操作

a.方式一

    var obj = "<input type='text' />";

    node.insertAdjacentHTML("beforeEnd",obj);

    node.insertAdjacentElement('afterBegin',document.createElement('p')) //外面套一个<p>标签

    //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

b.方式二

    var tag = document.createElement('a')

    node.appendChild(tag) //放入<a>标签里面

    document.getElementById("i1").appendChild(tag);

6.提交表单

//任何标签通过DOM提交表单

document.getElementById("form_id").submit();

7.其他操作

console.log // 控制台输出

alert       // 弹出框

confirm     // 确认框

location.href         // 获取URL

location.href = "url" // 重定向

location.reload()     // 重新加载

setInterval   // 多次定时器

clearInterval // 清除多次定时器

setTimeout    // 单次定时器

clearTimeout  // 清除单次定时器

8.事件

绑定事件的方式：

a.直接标签绑定 onclick="func()" onfocus

b.先获取Dom对象，然后进行绑定

　　document.getElementById("id").onclick

　　document.getElementById("id").onfocus

c.

　　document.getElementById("id").addEventListener("click",function(){console.log("666");},flase);

　　flase为冒泡

　　true为捕捉

this当前触发事件的标签

a.第一种绑定方式

　　<input id="i1" type="button" onclick="Clicked(this)">

　　function Clicked(self){

　　　　// self为当前点击的标签

　　}

b.第二种方法

　　<input id="i1" type="button">

　　document.getElementById("i1").onclick = function{

　　　　//this为当前标签

　　}

五、JQuery
1.基本信息

a.

　　DOM/BOM/JavaScript的类库

b.转换

　　jquery对象[0] => Dom对象

　　Dom对象 => $(Dom对象)

2.选择器，直接找到某个或者某类标签

1.id

　　$('#id')

2.class

　　$('.cl')

3.标签<a></a>

　　$('a')

4.组合

　　$('a,.cl,#id')

5.层级

　　$('#id a') //子子孙孙

　　$('#id>a') //儿子

6.基本

　　:first

　　:last

　　:eq()

7.属性

　　$('[sjl]')

　　$("[sjl='123']")

　　$("input[type='text']")

　　$("input[type='text'][value='ok']")

　　$(':text')

9.事件和其他

　　$('input').click(function(){ ... })

　　$('input').each(function(k){ ... }) //循环每个元素,k为索引

3.筛选器

$(this).eq(1)           //索引

$(this).first()         //第一个

$(this).last()          //最后一个

$(this).hasClass(class) //是否具有某个class

$(this).next()      //下一个

$(this).nextAll()   //下面所有的

$(this).nextUntil() //下一个直到..

$(this).prev()      //上一个

$(this).prevAll()   //上面所有的

$(this).prevUntil() //上一个直到..

$(this).parent()      //父标签

$(this).parents()     //所有的父标签

$(this).parentUntil() //所有的父标签

$(this).children() //孩子标签

$(this).siblings() //兄弟标签

$(this).find('.content') //找到某个标签

4.文本操作

$('#id').text() //获取文本内容

$('#id').html() //获取包括标签和内容

$('#id').text('666')        //修改文本内容

$('#id').html('<a>666</a>') //解析标签

$('#id').val()      //获取input文本

$('#id').val('666') //修改input文本

5.样式操作

$('#id').removeClass()     //移除class

$('#id').addClass()        //添加class

$('#id').toggleClass('cl') //有cl就去掉，没有cl就加上

6.属性操作

- 一般用于自定义属性

　　$('#id').attr('type')        //获取type的值

　　$('#id').attr('name','sjl')  //设置type的值

　　$('#id').removeAttr('value') //删除某个属性 

- 专门用于checkbox，radio

　　:enabled

　　:disabled

　　:checked

　　:selected

　　$('input').prop('enabled')      //得到某个属性

　　$('input').prop('enabled',true) //设置input属性

PS：$('#id').index() //索引位置

7.文档处理

$('#id').append()  //添加到标签内后

$('#id').prepend() //添加到标签内前

$('#id').after()   //添加到标签外后

$('#id').before()  //添加到标签外前

$('#id').remove() //移除标签和内容

$('#id').empty()  //移除包括标签和内容

$('#id').clone()  //复制包括标签和内容

8.css处理

$('#id').css('样式名称','样式值')

9.位置

$(window).scrollTop()   //获取位置

$(window).scrollTop(12) //设置位置

$(window).scrollLeft([val]) 

$('#id').offset().top  //指定标签在html中的坐标

$('#id').offset().left //指定标签在html中的坐标

$('#id').position()    //指定标签相对父标签(relative)中的坐标

$('#id').height([val|fn])

$('#id').innerHeight()

$('#id').outerHeight([options])

$('#id').width([val|fn])

$('#id').innerWidth()

$('#id').outerWidth([options])

10.事件

$('#id').click();

         blur([[data],fn])

         change([[data],fn])

         click([[data],fn])

         dblclick([[data],fn])

         error([[data],fn])1.8-

         focus([[data],fn])

         focusin([data],fn)

         focusout([data],fn)

         keydown([[data],fn])

         keypress([[data],fn])

         keyup([[data],fn])

         mousedown([[data],fn])

         mouseenter([[data],fn])

         mouseleave([[data],fn])

         mousemove([[data],fn])

         mouseout([[data],fn])

         mouseover([[data],fn])

         mouseup([[data],fn])

         resize([[data],fn])

         scroll([[data],fn])

         select([[data],fn])

         submit([[data],fn])

//委托，点的时候才绑定事件

$('#id').delegate("a","click",function(){...})

        .undelegate

//阻止其他事件

$('#id').click(function(){

　　...

　　return false;

});

//当页面框架加载完毕后，自动执行(绑定事件和默认执行的操作)

$(function(){

　　...

})

11.扩展JQuery

示例一：

　　$.fn.extend({

　　　　"wefun1":function(){

　　　　　　return "666";

　　　　}

　　});

　　var v = $('#id').wefun1();

示例二：

　　$.extend({

　　　　"wefun2":function(){

　　　　　　return "666";

　　　　}

　　});

　　var v = $.wefun2();

　　- $.extend //$.方法

　　- $.fn.extend //$(..).方法

　　(function(){

　　　　var status = 1;

　　　　//封装变量

　　})(jquery)

w3cschool速查：https://www.w3cschool.cn/html/dict/

CSS3查找手册：http://css.cuishifeng.cn/

JQuery查找手册：http://jquery.cuishifeng.cn/

秒客网

HTML、CSS、JS、JQ速查笔记