abstrait：$(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() 當指針位于元素上發(fā)生
mouseenter() 當指針穿過于元素上時發(fā)生
mousemove() 當指針在指定元素中移動時，就會發(fā)生改事件
mouseeleave() 當指針離開元素時
mouseout() 當指針從元素上移開時
mousedow() 當鼠標移動到元素上方并按下鼠標按鍵時
mouseup() 當在元素上松開鼠標按鍵是
resize() 當調整當前瀏覽器窗口大小時
pageX() 屬性是鼠標指針的位置，在x軸
pageY() 屬性是鼠標指針的位置，在Y軸
focus() 當元素獲取焦點
jquery事件切換
hover(over,out)
over:鼠標以上元素上要觸發(fā)的函數
out:鼠標移出元素上要觸發(fā)的一個函數
toggle() 如果元素是可見的就隱藏，取反
jquery隱藏/顯示
hide()隱藏顯示的元素
書寫格式：hide([speed][sesing][function])
speed:時間
sesing:切換效果
function方法
show()顯示隱藏的元素
書寫格式：show([speed][sesing][function])
speed:時間
sesing:切換效果
function方法
jquery滑動
jquery的滑動時通過高度變化（向某個方向增大或者縮小來動態(tài)顯示所匹配的元素）
slideDown([speed] [fn])通過高度的變化，向下增大動態(tài)效果，下滑效果
speed:下滑顯示過程的速度 英文值或者毫秒
fn:動畫完成時執(zhí)行函數
slideUp([speed] [fn])通過高度的變化，向上增大動態(tài)效果，上滑效果
speed:上滑顯示過程的速度 英文值或者毫秒
fn:動畫完成時執(zhí)行函數
slidetoggle([speed] [fn])通過高度的變化，切換元素的可見性
speed:上滑隱藏/下滑顯示過程的速度 英文值或者毫秒
fn:動畫完成時執(zhí)行函數
jquery淡入淡出
jquery是通過控制不透明度的變化來控制匹配的元素淡入淡出的效果
fadeIn([speed] [fn]) 通過不透明度的變化來實現匹配到元素的淡入效果
fadeOut([speed] [fn])通過不透明度變化來實現匹配到元素的淡出效果
fadeToggle([speed] opactity [fn])通過不透明度的變化來開關所有匹配元素淡入淡出效果
speed:規(guī)定效果市場
fn:方法
opactity :fadeTo()方法中必須參數，控制淡入淡出的效果不透明度（值介于0-1之間）
jquery自定義動畫
animate()方法創(chuàng)建自定義動畫
語法：
$('selector').animate({params},speed,fn)
params：必須的，參數為css屬性
speed:時間值，可以取下值slow,fast或者毫秒
fn:方法
stop()用語停止動畫效果，在他們完成之前（效果函數、滑動、淡入淡出、自定義動畫，適用于所有jquery效果函數）
語法:$(selector).stop(stopAll,goToend)
可選參數stopAll 規(guī)定是否應該清楚動畫隊列。默認是false僅停止活動的動畫，允許任何排入隊列的動畫向后執(zhí)行
goToEnd 規(guī)定是否立即按完成當前動畫，默認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="#">優(yōu)品</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;
}
老師，我鼠標經過應該觸發(fā)一次事件，但是為什么有時候會觸發(fā)兩次事件，里面也沒有寫冒泡事件，在運行過程中發(fā)現了這個bug,想不通
Professeur correcteur：天蓬老師Temps de correction：2019-01-29 11:39:30
Résumé du professeur：總結挺全面的, 但是有點多了, 只需要記住幾個關鍵最常用的,這么多, 如果你不天天用, 很快就忘記了, 記住規(guī)律 , 和幾個最常用的, 其它的可以查手冊