在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了，在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。
<!--[if lte ie 8]>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->描述：HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。
广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合。
H5范称：HTML + CSS3 + JS。
语法特点：
1、更简洁
2、更宽松
html、head、body、colgroup、tbody可以完全省略语义化标签：
语义标签对于我们并不陌生，如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。
传统的做法我们或许通过增加类名如class="header"、class="footer"，使HTML页面具有语义性，但是不具有通用性。
HTML5则是通过新增语义标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以使其具有通用性。
常用的语义化标签：<nav> 表示导航<header> 表示页眉<footer> 表示页脚<section> 表示区块<article> 表示文章 如文章、评论、帖子、博客<aside> 表示侧边栏 如文章的侧栏<figure> 表示媒介内容分组 与 ul > li 做个比较<mark> 表示标记 (带用“UI”，不怎么用)<progress> 表示进度 (带用“UI”，不怎么用)<time> 表示日期
本质上新语义标签与<div>、<span>没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成<div class="nav"> 相当于 <nav>。不要好奇，它只是一个标签！
尽量避免全局使用header、footer、aside等语义标签。
描述：
此处多库共存指的是：jQuery占用了$ 和jQuery这两个变量。当在同一个页面中引用了jQuery这个js库，并且引用的其他库（或者其他版本的jQuery库）中也用到了$或者jQuery这两个变量，那么，要保证每个库都能正常使用，这时候就有了多库共存的问题。
解决方式：
作用：让jQuery释放对$的控制权，让其他库能够使用$符号，达到多库共存的目的。此后，只能使用jQuery来调用jQuery提供的方法$.noConflict(); //true两个都交出来，返回值是新的调用方法。$.noConflict();放弃$的使用权。var MrLv = $.noConflict(true);放弃两个符号的使用权，同时定义一个新的使用权。
描述：该功能实现的事通过五角星的状态来展示等级。实心五角星表示等级。用户在没有点击五角星的时候，鼠标经过哪一个五角星，该五角星和之前的五角星变为实心的五角星，之后的五角星还是空心的五角星，鼠标离开之后，恢复为空心。当用户点击了某一五角星之后，该五角星和之前的五角星变为实心的五角星，之后的五角星还是空心的五角星，鼠标离开之后，点击的五角星及其之前的五角星变为实心的五角星。之后为空心五角星。jquery的版本是1.8.
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星等级</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: #fff536;
}
.comment li {
float: left;
cursor: pointer;
}
ul {
list-style: none;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function () {
var wjx_none = '☆';
var wjx_sel = '★';
//鼠标放上去当前的li和之前所有的li内容全部变为实心五角星，移开变为空心。
$(".comment li").on("mouseenter",function () {
$(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
});
$(".comment li").on("mouseleave",function () {
if($("li.current").length === 0){
$(".current").text(wjx_none);
}else {
$("li.current").text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
}
});
//鼠标点击那个li，当你前li和之前所有的li都变成实心五角星，其他变为空心。
$(".comment li").on("click",function () {
$(this).attr("class","current").siblings("li").removeAttr("class");
})
});
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>链式编程原理：return this;
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。
隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。
如果要对每个元素做不同的处理，这时候就用到了each方法
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
参数一:表示当前元素在所有匹配元素中的索引号
参数二:表示当前元素（DOM对象）$(selector).each(function(index,element){});
Element是一个 js对象，需要转换成jquery对象
描述：通过判断按的键盘上的那个按键，来控制颜色，并且把按键的编码显示出来。如果没有则提示没有。jQuery的版本是1.8.
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按键变色</title>
<style>
.wrap {
width: 400px;
height: 400px;
margin: 100px auto 0;
}
.wrap h1 {
text-align: center;
}
.wrap div {
width: 400px;
height: 300px;
background: pink;
font-size: 30px;
text-align: center;
line-height: 300px;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function () {
var div = $("#bgChange");
var span = $("#keyCodeSpan");
$(document).keyup(function (e) {
setColor(e.keyCode);
});
//接受按键并调用颜色和数值的函数
function setColor(e) {
switch (e) {
case 80:
setEle("pink", e);
break;
case 66:
setEle("blue", e);
break;
case 79:
setEle("orange", e);
break;
case 82:
setEle("red", e);
break;
case 89:
setEle("yellow", e);
break;
default :
alert("系统没有设置该颜色！");
}
//颜色和数值的函数
function setEle(a, b) {
div.css("background-color", a);
span.text(b);
}
}
});
</script>
</head>
<body>
<div class="wrap">
<h1>按键改变颜色</h1>
<div id="bgChange">
keyCode为：
<span id="keyCodeSpan">80</span>
</div>
</div>
</body>
</html>描述：当页面拥有多个表单输入框的时候，点击回车自动切换到一行，并且下一行已经存在的文字处于选中状态。当鼠标经过某一行的时候，该行的文字处于选的状态。所使用的jquery的版本是1.8.
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回车换行</title>
<script src="jquery.min.js"></script>
<script>
$(function () {
//点击回车之后，自动切换到下一行
$("input").on("keyup",function (event) {
if(event.keyCode === 13){
$(this).next().next().focus();
}
});
//鼠标经过某一行的时候，该行所有的文字全部被选中
$("input").on("mouseenter",function () {
$(this).select();
});
})
</script>
</head>
<body>
<input type="text" value="小宁博客"/><br>
<input type="text" value="小宁博客"/><br>
<input type="text" value="小宁博客"/><br>
<input type="text" value="小宁博客"/><br>
<input type="text" value="小宁博客"/><br>
<input type="text" value="小宁博客"/><br>
<input type="text" value="小宁博客"/><br>
</body>
</html>jQuery的事件机制，指的是：jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。
click(handler) 单击事件;blur(handler) 失去焦点事件;mouseenter(handler) 鼠标进入事件;mouseleave(handler) 鼠标离开事件;dbclick(handler) 双击事件;change(handler) 改变事件，如：文本框值改变，下来列表值改变等;focus(handler) 获得焦点事件;keydown(handler) 键盘按下事件;bind方式（1.7版本以后的jQuery版本被on取代）
作用：给匹配到的元素直接绑定事件。
第一个参数：事件类型
第二个参数：事件处理程序
$("p").bind("click mouseenter", function(e){
//事件响应方法
});优缺点：
delegate方式（特点：性能高，支持动态创建的元素）
作用：给匹配到的元素绑定事件，对支持动态创建的元素有效
第一个参数：selector，要绑定事件的元素
第二个参数：事件类型
第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件！
on方式（最现代的方式，兼容zepto(移动端类似jQuery的一个库)）
jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法
作用：给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点
语法：
第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
第二个参数：selector, 执行事件的后代元素
第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用
第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);
表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件$(selector).on( "click",“span”, function() {});
表示给$(selector)匹配的元素绑定单击和鼠标进入事件$(selector).on(“click mouseenter”, function(){});
$(selector).unbind(); //解绑所有的事件$(selector).unbind(“click”); //解绑指定的事件$( selector ).undelegate(); //解绑所有的delegate事件$( selector).undelegate( “click” ); //解绑所有的click事件$(selector).off();// 解绑匹配元素的所有事件;$(selector).off("click");// 解绑匹配元素的所有click事件;$(selector).off( "click", "**" ); // 解绑所有代理的click事件，元素本身的事件不会被解绑。$(selector).click(); //触发 click事件$(selector).trigger(“click”);$(selector).triggerHandler(“focus”);event.data传递给事件处理程序的额外数据event.currentTarget等同于this，当前DOM对象event.pageX鼠标相对于文档左部边缘的位置event.target 触发事件源，不一定===thisevent.stopPropagation()阻止事件冒泡event.preventDefault()阻止默认行为event.type 事件类型：click，dbclick…event.which 鼠标的按键类型：左1 中2 右3event.keyCode 键盘按键代码高度操作height() ：
作用：设置或获取匹配元素的高度值
$(selector).height(200);$(selector).height();宽度操作width() ：
作用：设置或获取匹配元素的宽度值
注意：
css()获取高度（或宽度width）和height获取高度（或宽度width）的区别：
offset()
作用：获取或设置元素相对于文档的位置
$(selector).offset();有参数表示设置，参数推荐使用数值类型$(selector).offset({left:100, top: 150});
注意：距离页面最顶端或者最左侧的距离和有没有定位没有关系。设置offset后，如果元素没有定位(默认值：static)，则被修改为relative。
position()
作用：获取相对于其最近的具有定位的父元素的位置。距离父系盒子中带有定位的盒子的距离(获取的就是定位值，和margin/padding无关)
$(selector).position();注意：只能获取，不能设置。
scrollTop()
作用：获取或者设置元素垂直方向滚动的位置
案例：$(selector).scrollTop(100);
scrollLeft()
作用：获取或者设置元素水平方向滚动的位置
案例：$(selector).scrollLeft(100);
描述：
描述：用户输入什么内容，点击按钮后，上面就动态显示什么内容。jquery版本1.8.
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态输入案例</title>
<style>
* {
margin: 0;
padding: 0;
}
@keyframes blink {
0%,
100% {
opacity: 1
}
50% {
opacity: 0
}
}
@-webkit-keyframes blink {
0%,
100% {
opacity: 1
}
50% {
opacity: 0
}
}
@-moz-keyframes blink {
0%,
100% {
opacity: 1
}
50% {
opacity: 0
}
}
.wrap {
width: 1000px;
text-align: center;
margin: 100px auto 0;
}
.wrap h1 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
.word {
font-weight: 700;
}
.typed-cursor {
opacity: 1;
-webkit-animation: blink .7s infinite;
-moz-animation: blink .7s infinite;
animation: blink .7s infinite;
display: none;
}
.saySection {
margin-top: 50px;
}
.saySection input {
font-size: 30px;
}
.saySection .txtSay {
padding-left: 10px;
}
.saySection .btnSay {
display: inline-block;
padding: 0 20px;
cursor: pointer;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function () {
//动态展示预留内容
var str = "小宁博客";
var arr = str.split("");
var str2 = "";
var num = 0;
var timer = null;
$(".typed-cursor").show();
timer = setInterval(function () {
if(arr[num]===undefined){
clearInterval(timer);
$(".typed-cursor").hide();
}else {
str2 += arr[num];
$(".word").text(str2);
num++;
}
},200);
//动态展示输入的内容
$("#btnSay").click(function () {
str = $("#inValue").val();
$("#inValue").val("");
arr = str.split();
str2 = "";
num = 0;
timer = setInterval(function () {
if(arr[num]===undefined){
clearInterval(timer);
$(".typed-cursor").hide();
}else {
str2+=arr[num];
$(".word").text(str2);
num++;
}
},200);
})
});
</script>
</head>
<body>
<div class="wrap">
<h1>
You want to say ： <span class="word"></span><span class="typed-cursor">|</span> ！
</h1>
<div class="saySection">
<input type="text" id="inValue" class="txtSay"/>
<input type="button" value="Say" id="btnSay" class="btnSay"/>
</div>
</div>
</body>
</html>