abstract：$(document).ready(function(){}) 页面加载完毕运行,windows.onload=function(){}基本选择器：$('#id')根据给定的id获取元素名$('.class')根据给定的class获取元素名$('element&
$(document).ready(function(){}) 页面加载完毕运行,windows.onload=function(){}
基本选择器：
$('#id')根据给定的id获取元素名
$('.class')根据给定的class获取元素名
$('element')根据标签获取元素名
$('*')匹配所有元素
$('#id，.class,*')多个获取获取元素名
$('.class').css('background','red') 改变该class背景颜色
jquery层级选择器
$('父级元素 > 自己元素') 给定的父级元素下匹配所有自己元素
$('祖先元素 后代元素') 给定的祖先元素下匹配所有后代元素
$('prev + next')(同级元素) 匹配紧跟在prev元素后面的next元素
$('prev ~ siblings') 匹配prev元素后面所有的siblings元素
jquery顺序选择器
1.顺序
$(':frist') 第一个选择器
$(':last') 最后一个选择器
2.比较
$(':gx(x)') 表示大于值x的元素
$(':lt(x)') 表示小于值x的元素
3.奇偶数
$(':odd') 奇数顺序
$(':even') 偶数顺序
4.非
$(':ont(selector)') 匹配不是selector的所有元素
jquery内容选择器
$(':contains(text)') 匹配包含给定文本（text）的元素
$(':has(selector)') 匹配包含特定选择器元素的元素
$(':empty') 匹配空元素（内部不含有任何子元素）
$(':parent') 匹配含有子元素或者文本的元素
jquery属性选择器
$('[元素名]') 匹配包含给定属性的元素
$('input[type=text]') 匹配input给定属性是某个特定值的元素
$('[attribute!=value]') 匹配所有不含有指定属性值得属性，或者是属性不等于特定值的元素
$('[attribute^=value]') 匹配给定属性是以某些值开始的元素
$('[attribute$=value]') 匹配给定属性是以某些值结尾的元素
$('[attribute*=value]') 匹配含有子元素或者文本的元素
$('[attrSel[1] attrSel[1] attrSel[1]') 符合选择器，需要同时满足多个条件是使用
jquery表单选择器
$(':enabled') 所有激活的input元素（可以使用的input元素）
$(':disabled') 所有禁用input的元素（不可以使用的input元素）
$(':selected') 所有被选取的input元素（针对selected元素）
$(':checked') 所有被选中的input元素
jquery改变/获取css属性
$('选择器').css('background','red') 改变单个
$('选择器').css({'background'：'red'，'background'：'red'}) 改变多个
$('选择器').css('background') 获取单个
jquery操作属性的方法
$('选择器').addClass('class名 class名') 该方法向被选中的元素添加单个类或者多个类(多个用空格隔开)
$('选择器').removeClass() 该方法向被选中的元素移除类或者移除多个类(多个用空格隔开)
$('选择器').attr() 该方法设置或者返回被选中的元素的元素值
$('选择器').removeAttr() 该方法从被选中的元素的移除属性
$('选择器').hasClass() 该方法检查被选中的元素的是否包含指定class
$('选择器').toggleClass() 该方法对被选中的元素进行添加删除类的切换操作
jquery设置内容
text() 该方法返回或者设置备选中的元素的文本内容
html() 该方法返回或者设置备选中的元素的内容(innerHtml,html)
val() 该方法返回或者设置的备选元素的值
jquery事件
ready() 文档加载完成
click() 点击事件
dblclick() 双击事件
blur() 当元素失去焦点
focus() 当元素获取焦点
change() 当元素（文本框）内容改变
mouseover() 当指针位于元素上发生
mouseenter() 当指针穿过于元素上时发生
mousemove() 当指针在指定元素中移动时，就会发生改事件
mouseeleave() 当指针离开元素时
mouseout() 当指针从元素上移开时
mousedow() 当鼠标移动到元素上方并按下鼠标按键时
mouseup() 当在元素上松开鼠标按键是
resize() 当调整当前浏览器窗口大小时
pageX() 属性是鼠标指针的位置，在x轴
pageY() 属性是鼠标指针的位置，在Y轴
focus() 当元素获取焦点
jquery事件切换
hover(over,out)
over:鼠标以上元素上要触发的函数
out:鼠标移出元素上要触发的一个函数
toggle() 如果元素是可见的就隐藏，取反
jquery隐藏/显示
hide()隐藏显示的元素
书写格式：hide([speed][sesing][function])
speed:时间
sesing:切换效果
function方法
show()显示隐藏的元素
书写格式：show([speed][sesing][function])
speed:时间
sesing:切换效果
function方法
jquery滑动
jquery的滑动时通过高度变化（向某个方向增大或者缩小来动态显示所匹配的元素）
slideDown([speed] [fn])通过高度的变化，向下增大动态效果，下滑效果
speed:下滑显示过程的速度 英文值或者毫秒
fn:动画完成时执行函数
slideUp([speed] [fn])通过高度的变化，向上增大动态效果，上滑效果
speed:上滑显示过程的速度 英文值或者毫秒
fn:动画完成时执行函数
slidetoggle([speed] [fn])通过高度的变化，切换元素的可见性
speed:上滑隐藏/下滑显示过程的速度 英文值或者毫秒
fn:动画完成时执行函数
jquery淡入淡出
jquery是通过控制不透明度的变化来控制匹配的元素淡入淡出的效果
fadeIn([speed] [fn]) 通过不透明度的变化来实现匹配到元素的淡入效果
fadeOut([speed] [fn])通过不透明度变化来实现匹配到元素的淡出效果
fadeToggle([speed] opactity [fn])通过不透明度的变化来开关所有匹配元素淡入淡出效果
speed:规定效果市场
fn:方法
opactity :fadeTo()方法中必须参数，控制淡入淡出的效果不透明度（值介于0-1之间）
jquery自定义动画
animate()方法创建自定义动画
语法：
$('selector').animate({params},speed,fn)
params：必须的，参数为css属性
speed:时间值，可以取下值slow,fast或者毫秒
fn:方法
stop()用语停止动画效果，在他们完成之前（效果函数、滑动、淡入淡出、自定义动画，适用于所有jquery效果函数）
语法:$(selector).stop(stopAll,goToend)
可选参数stopAll 规定是否应该清楚动画队列。默认是false仅停止活动的动画，允许任何排入队列的动画向后执行
goToEnd 规定是否立即按完成当前动画，默认false
默认情况下stop会清楚在备选元素上制定的当前动画
实列
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>小米商城</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/commend.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="js/index.js" type="text/javascript" rel="script"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#hover').mouseover(function(){
$('.hader_cart').slideDown(500)
});
$('#hover').mouseout(function(){
$('.hader_cart').slideUp(500)
});
})
</script>
</head>
<body>
<div class="header">
<div class="header_nav">
<ul>
<li><a href="#">小米商城</a></li>
<li><a href="#">MIUI</a></li>
<li><a href="#">loT</a></li>
<li><a href="#">云服务</a></li>
<li><a href="#">金融</a></li>
<li><a href="#">优品</a></li>
<li><a href="#">小爱开放平台</a></li>
<li><a href="#">政企服务</a></li>
<li><a href="#">下载app</a></li>
<li><a href="#">Select Region</a></li>
<li></li>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">消息通知</a></li>
<li><a href="#" id="hover">
<i class="fa fa-cart-arrow-down"></i>
购物车（0）
</a>
<div class="hader_cart">
<div>购物车中还没有商品，赶紧选购吧！</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
css:
a { text-decoration: none; color: #B0B0B0; background: none }
.header{
width: 100%;
height: auto;
}
.header_nav{
width: 100%;
background: #333333;
height: auto;
}
ul{
width: 1200px;
height: 40px;
margin: 0 auto !important;
display: flex;
align-items: center;
}
ul li{
height: 20px;
float: left;
line-height: 20px;
font-size: 12px;
text-align: center;
border-right:1px solid #424242 ;
}
a:hover{
color: white;
}
ul li:nth-child(1){
width: 60px;
}
ul li:nth-child(2){
width: 40px;
}
ul li:nth-child(3){
width: 40px;
}
ul li:nth-child(4){
width: 45px;
}
ul li:nth-child(5){
width: 40px;
}
ul li:nth-child(6){
width: 40px;
}
ul li:nth-child(7){
width: 100px;
}
ul li:nth-child(8){
width: 80px;
}
ul li:nth-child(9){
width: 80px;
}
ul li:nth-child(10){
width: 100px;
}
ul li:nth-child(11){
width: 270px;
}
ul li:nth-child(12){
width: 43px;
}
ul li:nth-child(13){
width: 43px;
}
ul li:nth-child(14){
width: 70px;
}
ul li:nth-child(15){
width: 130px;
height: 30px;
line-height: 30px;
position: relative;
}
.hader_cart{
position: absolute;
width: 320px;
height: 100px;
top: 36px;
left: -190px;
text-align: center;
font-size: 14px;
line-height: 100px;
display: none;
box-shadow: 1px 1px 5px 2px #E0E0E0;
}
.text{
width: 30%;
margin: 50px auto;
height: 200px;
border: 1px solid #ccc;
}
.text_top{
width: 95%;
padding-right: 5%;
text-align: right;
font-size: 13px;
height: 40px;
line-height: 40px;
}
.text_textarea{
width: 90%;
height:100px;
margin-left: 5%;
}
.text_bottom{
width: 90%;
margin: 0 auto;
font-size: 12px;
}
.text_bottom div{
float: left;
width: 30px;
height: 40px;
}
.text_bottom div{
padding-left: 22px;
height: 40px;
line-height: 40px;
margin-left: 1%;
}
.text_bottom .text_b1{
background: url(../img/表情.png) no-repeat left center;
background-size: 20px;
}
.text_bottom .text_b2{
background: url(../img/图片2.png) no-repeat left center;
background-size: 20px;
}
.text_bottom .text_b3{
background: url(../img/视频.png) no-repeat left center;
background-size: 20px;
}
.text_bottom .text_b4{
background: url(../img/话题.png) no-repeat left center;
background-size: 20px;
}
.text_bottom .text_b5{
background: url(../img/微博.png) no-repeat left center;
background-size: 20px;
}
.text_bottom .text_b6{
background: url(../img/公开.png) no-repeat left center;
background-size: 20px;
}
.text_button{
width: 80px;
height: 30px;
line-height: 30px;
margin: 1% 0% 1% 8.9%;
background: cornflowerblue;
color: white;
font-size: 12px;
}
老师，我鼠标经过应该触发一次事件，但是为什么有时候会触发两次事件，里面也没有写冒泡事件，在运行过程中发现了这个bug,想不通
Correcting teacher：天蓬老师Correction time：2019-01-29 11:39:30
Teacher's summary：总结挺全面的, 但是有点多了, 只需要记住几个关键最常用的,这么多, 如果你不天天用, 很快就忘记了, 记住规律 , 和几个最常用的, 其它的可以查手册