HTML5+css3+jquery

HTML5
简介：是跨平台的，最新的HTML标准，拥有新的语义、图形和多媒体元素等。

 - 新标签 ：<header>   <footer>
 - 新表单控件：<date>
 - 图像：<canvas> <svg>
 - 多媒体 <video> <audio>
 - 新增的API：本地存储  地理定位

CSS3：
1.线性渐变

/*添加渐变：渐变并不是一个单一够，它产生的是图像，所以需要使用background
linear-gradient(方向，开始颜色，位置，颜色2，位置，颜色3，位置。。。)
方向：
to top:0deg
to right:90deg
to bottom:180deg  默认
to left:270deg*/
background:linear-gradient(pink,orange);

2.径向渐变

添加径向渐变：产生的是图像
    background:radial-gradient(red,blue);
    语法：radial-gradient（形状）
    形状shape：circle：产生正方形的渐变色， ellipse：适配当前的形状如果是正方形的形状，两者的
    效果一样。如果宽高不一样，默认效果切换到ellipse
    关键字（left center right top bottom）
    大小：size ： closest-side 最近变；farthest-side：最远边 ；close-corner：最近角
    farthest-corner：最远角 默认是最远的角
    at position：坐标，默认在正中心。可以
    /*background:radial-gradient(circle,red,blue);
    background: radial-gradient(at left top,red,blue);

3.重复渐变

background:repeating-radial-gradient(circle at center center,
#fff 0%,#fff 10%,
#000 10%,#000 20%);

4.Background

移动端使用较多
设置背景坐标的原点
border-box:从border的位置开始填充背景，会与border重叠
padding-box：从padding的位置开始填充背景，会与padding的重叠
content-box：从内容的位置开始填充背景
background-origin:content-box;
设置内容的剪裁：设置的是裁剪，控制的是显示
border-box:其实是显示border及以内的内容
padding-box：其实是显示padding及以内的内容
content-box：其实是显示content及以内的内容
background-clip:content-box;

5.边框样式

  /*  border-image-source: url():可以指定边框图片的路径，
    默认是添加到容器的四个角*/
    border-image-source: url("images/花.jpg");
    /*让图成为九宫格： border-image-slice:设置四个方向上的裁剪距离
    fill作为内容的填充*/
    border-image-slice: 27 ;
    /* border-image-width:边框图片的看度，如果没有设置这个属性，
 那么默认的宽度就是元素原始的宽度;
 细节：1.便利康图片的本质是背景，并不会影响元素的内容放置
    2.内容只会被容器的border和padding影响
    建议： 一般讲值设置为原始的边框的宽度*/
    border-image-width: 27px;
    /*border-image-outset: 扩展边框; 会扩大当前的范围*/
    border-image-outset: 0px;
    /*border-image-repeat: repeat(直接重复平铺)；
    round(将内容缩放进行完整的重复平铺);*/
border-image-repeat: round;
    /*样式连写：
    border-image: source  slice  /width/outset/ repeat;*/
    border-image: url("images/花.jpg") 27 / 27px/0px round;

6.过渡效果

  /*
添加过渡效果：过渡效果执行完毕后，默认会还原到原始的状态
transition-property:添加过渡效果的样式属性名称*/
    transition-property: left;
    /* transition-duration:过渡效果的耗时，以秒为单位*/
    transition-duration: 2s;
    /*  transition-timing-function: 设置时间函数--控制运动的速度*/
    transition-timing-function: linear;
    /*transition-delay: 过渡效果的延迟*/
    transition-delay: 2s;
    /*简写：
    transition：属性名称  过渡时间  时间函数   延迟*/
    transition:left 2s  linear 0s;
    /*为多个样式同时添加过渡效果*/
    transition:left 2s  linear 0s,background-color 5s  linear 0s;;
 /*为所有的样式添加过渡效果:all
   1.所有的样式的过渡效果一样；
    2.效率低，它会去查询所有添加的样式
    3建议：不要这样写*/
    transition: all 2s;
}

7.2D效果转换

移动
div{
    width: 100px;
    height: 100px;
    background-color: RED;
    /*添加过渡效果：css样式名称  耗时
    transition：transform 2s；*/
}
div:active{
    /*使用transform实现元素的移动 移动是参照元素的左上角  执行完后元素会恢复
    到原始的状态
    1.如果只有一个参数，就表示x方向
    2.如果是两个参数，就表示x/y方向*/
    transform:translate(20px,500px);
}

/*缩放 scale*/
    div:nth-of-type(2):active{
        /*是吸纳缩放：1 指不缩放，>1.01 放大  <0.99 缩小 参照元素的几何中心
        1.如果只有一个参数，就代表x和y方向都要进行等比例的缩放
        2.如果有两个参数，就代表x/y方向*/
        /*transform:scale(10);*/
        /*transform:scale(2,3);*/
        transform:scaleY(2);
    }

/*旋转：只能围绕Z轴来旋转*/
div:nth-of-type(3):active{
    transform:rotate(20deg);
}

/*斜切：skew*/
div:nth-of-type(4):active{
    /*如果角度为正，则往当前轴的负方向斜切，
    如果角度为负，则往当前轴的正方向斜切*/
    /*transform:skew(30deg)；*/
    /*transform:skew(-30deg);*/
    /*transform：skewX(20deg);*/
    transform:skew(30deg,-30deg);
}

  /*设置旋转轴心
    1  x y
    2 关键字： left top right bottom  center*/
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
}

8.添加三维移动—3D移动

/*translate3d(X方向的偏移，Y方向的偏移，Z方向的偏移)*/
transfrom:translate3d(400px ,0,0);

/*三维缩放：scale3d（）*/
div:nth-of-type(2):active{
transform:scale3d(2,0.5,1);
}
/*添加三维旋转*/
div:nth-of-type(3):active{
    /*transform:rotate3d(x,y,z,angle);
    x:代表x方向上的一个向量值
    y:代表y方向上的一个向量值
    z:代表z方向上的一个向量值*/
    transform:rotate3d(1,1,1,330deg);
}





/*让box默认旋转，方便观察*/
transform:rotate3d(1,1,1,30deg);
/*让子元素保留3D变换之后的效果*/
transform-style: preserve-3d;

/*添加透视景深效果*/
perspective: 0px;
/*设置透视的观察角度*/
perspective-origin: top;

9.添加动画

div {
    width: 100px;
    height: 100px;
    background-color: red;
     /*添加动画*/
    /*1.animation-name：指定动画的名称
    animation-name：;*/
    /*创建动画*/
    animation-name:  moveTest;
    /*2.设置动画总耗时*/
    animation-duration: 2s;
    /*3.设置动画的播放次数，默认为1 可以指定具体的次数，也可以指定infinite*/
    animation-iteration-count:2;
    /*4.交替动画  alternate:来回交替*/
    animation-direction: alternate;
    /*5.设置动画延迟*/
    animation-delay: 2s;
    /*6.设置动画结束时的状态：默认情况下，动画执行完毕之后，会回到原始的状
    态
    forwards：会保持动画结束的时候的状态， 在有延迟的情况下，并不会
            立即进行到动画的初始状态
    backwards:不会保持动画结束的时候的状态，如果动画有初始状态，
            那么会立即进入到初始状态
     both：即会保留动画的结束时的状态，在有延迟的情况下也会立即进入
     到动画的初始状态
    */
    animation-fill-mode: both;
    /*7.动画的时间函数*/
    animation-timing-function: ease;
    /*8.设置动画的播放状态 paused:暂停  running:播放*/
    animation-play-state: running；
}
    @keyframes moveTest {
    /*百分比是指整个动画耗时的百分比*/
        0%{;
            transform: translate(0,0);

        }
        /*from:0%*/
        30%{
            transform: translate(0,200px);
        }
        100%{
            transform: translate(500px,600px);
        }
        /*to:100%*/
    }

10.Web字体

1.自定义想生成对应字体文件的内容
2.使用网络资源生成web字体
3，使用： 1--自定义字体   2--定义样式使用自定义字体   3-指定样式，调用样式

11.多列布局

.wrper{
    width: 100%;
    padding: 20px;
    box-sizing:border-box;
    /*设置多列布局*/
    /*1.设置列数*/
    column-count: 3;
    /*2.添加列间隙样式，与边框样式的添加一样*/
    column-rule: dashed 3px red;
    /*3.设置列间隙大小*/
    colum-gap:50px;
    /*4.设置列宽
    原则：取大优先
    1.如果人为设置宽度更大，则取更大的值，但是会填充整个屏幕，
    意味着最终的宽度可能也会大于设置的宽度--填充满整个屏幕；
    2.如果人为设置的宽度更小，就使用默认计算的宽度*/
    column-width:200px;
    /*设置跨列显示*/
    column-span: 3; /*all跨所有列*/
}

12.伸缩盒子

.box{
    width: 1000px;
    height: 200px;
    border:1px solid black;
    /*设置父容器为盒子，会使每一个子元素自动变成伸缩项*/
    display: flex;
    /*设置子元素在主轴方向的排列方式
    flex-start:让子元素从父容器的起始位置开始排列
    flex-end:让子元素从父容器的结束为止开始排列
    center:让子元素从父容器的中间开始排列
    space-between:左右对齐父容器的开始和结束，中间平均分页，产生相同的间距
    space-around:将多余的空间平均的分页在每一个子元素的两边，
        margin：0 auto 造成中间盒子的间距是左右两边盒子的间距的两倍*/
    justify-content: flex-end;
/*flex-flow：flex-wrap和flex-direction的综合
flex-wrap:控制子元素是否换行显示，默认不换行
wrap：换行
nowrap:不换行-收缩
wrap-reverse:翻转，原来是从上到下，反转之后就是从下到上*/
flex-wrap: wrap;
/*flex-direction:设置子元素的排列方向：就是用来主轴的方向，
     默认主轴的方向是row
    row:水平排列方向，从左到右
    row-reverse；水平方向排列，从右到左
    column：垂直排列方向，从上到下
    column-reverse：垂直方向排列，从下到上*/
flex-direction: column;
flex-flow:wrap row;

/*flex-grow: 可以来扩展子元素的宽度;
设置当前元素应该占据剩余空间的比例值
比例值计算：当前空间的flex-grow/所有兄弟元素的flex-grow
默认为0 子元素并不会去占用剩余的空间*/
flex-grow: 1;

/*flex-shrink:定义收缩比例，通过设置的值来计算收缩空间
默认值为1*/
flex-shrink:1;

伸缩布局的常用属性
/*写在父元素中
align-items: 设置子元素(伸缩项)在侧轴方向上的对齐方式
center：设置在侧轴方向上居中对齐
flex-start:设置在侧轴方向上顶对齐
flex-end:设置在侧轴方向上底对齐
stretch：拉伸，让子元素在侧轴方向上进行拉伸，填充满整个侧轴方向  默认值
baseline：基文本线;*/
align-items: center;

/*写在子元素中
设置单个元素在侧轴方向上的对齐方式*/
align-self: flex-end;

jquery
1.jQuery基本概念
1.2为什么要学习jQuery？

1.2什么是jQuery？
jquery的官网：http://jquery.com/

Query 查询的意思, jQuery就是用javascript更加方便的查询和控制页面控件。说白了：jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。
js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）

1.3怎样使用jQuery？
使用jQuery的三个基本步骤：

1)引包（引入jQuery文件）
<script src="jquery-1.11.1.js"></script>
2)入口函数
$(document).ready(function () {});
3)功能实现
$("#btnShowDiv").click(function () {
	$("div").show(1000);
});

div动态展示案例中JavaScript与jquery的对比
		JavaScript	jquery
	入口函数	只能有一个，如果有多个，后面的会覆盖前面可以有多个，并且不会发生覆盖的情况代码容错性代码容错性差，代码出现错误，会影响到后面代码的运行。
		代码容错性好，屏蔽错误，并且不会影响后面代码的运行。
		浏览器兼容性兼容性差，比如火狐不支持innerText对浏览器兼容性做了封装，因此不存在兼容性问题
		操作复杂性DOM操作复杂，对于一些简单的动画效果，实现起来比较麻烦DOM操作简单，支持隐式迭代，实现动画非常简单。

2.jQuery详细解释
2.1版本介绍
下载jquery
官网下载地址：http://jquery.com/download/

版本分类 jquery大版本分为1.x和2.x和3.x 区别：2.x3.x版本不再支持IE6/7/8 同一版本分类
jQuery每一个版本又分为压缩版和未压缩版：
jquery.js：未压缩版本（开发版本），代码可读性高，推荐在开发和学习阶段使用，方便查看源代码。
jquery.min.js：压缩版本，推荐在项目生产环境使用，，减少网络压力。 关于jquery3.0
3.0是2.x分支的延续，但是有一些突破性的改变。但是1.12和2.2分支将会在同一时间继续获得关键性的支持补丁。但是他们不会再有任何新的功能和重大的修订。如果你需要兼容IE6-8，你可以继续使用1.12版本。

2.2入口函数
jQuery入口函数的两种写法

//第一种写法
$(document).ready(function() {
});
//第二种写法
$(function() {
});

对比JavaScript的入口函数jQuery的入口函数,执行时机：
1.JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2.jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
2.3了解jQuery的$符号

就是一个函数：$();参数不一样，功能不一样 $常用的几种情况：
$(function()
{});//参数是function，说明是入口函数
$(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素
$(“div”);//查找所有的div元素
$(document).ready(funciton(){})//将document转换成jQuery对象 补充 $ ===
jQuery,也就是说能用$的地方，完全可以用jQuery，$仅仅是简写形式。

2.4jQuery对象与DOM对象之间的转换
什么是DOM对象（js对象）？
使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
dom对象只可以使用dom对象的方法和属性
什么是jquery对象？
jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
jquery对象只能使用jquery对象的方法
深入了解jQuery对象
jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））

jQuery对象和DOM对象的相互转换
1.jquery对象转DOM对象
var $li = $(“li”);
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)
2.DOM对象转jquery对象（联想记忆：我有钱[美元]，所以我的功能就更强大）
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

2.5区分jQuery和JavaScript
JavaScript是一门编程语言，jquery是用JavaScript实现的一个JavaScript库，目的是简化开发。

3.jQuery选择器
3.1jQuery选择器概述
什么是jQuery选择器？
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。
3.2基本选择器

交集选择器（标签指定式选择器）	$(“div.redClass”);	注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。

总结：跟css的选择器用法一模一样。
3.3层级选择器

3.4过滤选择器
这类选择器都带冒号：

【案例：隔行变色】
3.5筛选选择器(方法)
筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

【案例：手风琴】
4.jquery操作样式（重点）
4.1css操作
功能：设置或者修改样式，操作的是style属性。
设置单个样式

//name：需要设置的样式名称
//value：对应的样式值
css(name, value);
//使用案例
$("#one").css("background","gray");//将背景色修改为灰色

设置多个样式

//参数是一个对象，对象中包含了需要设置的样式名和样式值
css(obj);
//使用案例
$("#one").css({
    "background":"gray",
    "width":"400px",
    "height":"200px"
});

获取样式

//name:需要获取的样式名称
css(name);
//案例
$("div").css("background-color");
注意：获取样式操作只会返回第一个元素对应的样式值。
隐式迭代：
1.设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
2.获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。
4.2class操作

添加样式类

//name：需要添加的样式类名，注意参数不要带点.
addClass(name);
//例子,给所有的div添加one的样式。
$(“div”).addClass(“one”);

移除样式类

//name:需要移除的样式类名
removeClass(“name”);
//例子，移除div中one的样式类名
$(“div”).removeClass(“one”);

判断是否有样式类

//name:用于判断的样式类名，返回值为true false
hasClass(name)
//例子，判断第一个div是否有one的样式类
$(“div”).hasClass(“one”);

切换样式类

//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
toggleClass(name);
//例子
$(“div”).toggleClass(“one”);
【案例：tab栏切换案例】