$()函數(shù)
$()函數(shù)父泳，是招牌功能屉佳，能夠根據(jù)CSS選擇元素宛蚓。
比如：
1 $("#box")
選擇頁(yè)面上id為box的盒子。
jQuery 選擇器
jQuery 選擇器允許您對(duì) HTML 元素組或單個(gè)元素進(jìn)行操作惑惶。
jQuery 選擇器基于元素的 id煮盼、類、類型带污、屬性僵控、屬性值等"查找"（或選擇）HTML 元素。 它基于已經(jīng)存在的 CSS 選擇器鱼冀，除此之外报破，它還有一些自定義的選擇器。
jQuery 中所有選擇器都以美元符號(hào)開頭：$()千绪。
引號(hào)問(wèn)題
1 $("選擇器")
注意引號(hào)不能丟３湟住！在jQuery世界中翘紊，只有三個(gè)東西不能加引號(hào)蔽氨，其他必須加引號(hào)：
1 $(this)
2 $(document)
3 $(window)
jQuery 事件
jQuery 是為事件處理特別設(shè)計(jì)的藐唠。
什么是事件帆疟？
頁(yè)面對(duì)不同訪問(wèn)者的響應(yīng)叫做事件。
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時(shí)所調(diào)用的方法宇立。
實(shí)例：
在元素上移動(dòng)鼠標(biāo)踪宠。
選取單選按鈕
點(diǎn)擊元素
在事件中經(jīng)常使用術(shù)語(yǔ)"觸發(fā)"（或"激發(fā)"）例如： "當(dāng)您按下按鍵時(shí)觸發(fā) keypress 事件"。
常見 DOM 事件：
鼠標(biāo)事件 鍵盤事件 表單事件 文檔/窗口事件
jQuery 效果- 隱藏和顯示
show()顯示妈嘹、hide()隱藏柳琢、toggle()切換
1 $("div").show(); //讓一個(gè)本身是display:none;元素顯示
2 $("div").hide(); //隱藏元素display:none;
3 $("div").toggle(); //切換顯示狀態(tài)。
4 //自行帶有判斷，如果可見柬脸，就隱藏他去；否則顯示。
特別的倒堕，如果show()灾测、hide()、toggle()里面有數(shù)值垦巴，將變?yōu)閯?dòng)畫：
jQuery 效果 - 淡入淡出
fadeIn()淡入
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
fadeOut()淡出
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
fadeTo() 淡到那個(gè)數(shù)
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
fadeToggle() 淡出入切換
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery 效果 - 滑動(dòng)
slideDown : 下滑展開
$("#flip").click(function(){
$("#panel").slideDown();
});
slideUp：上滑收回
$("#flip").click(function(){
$("#panel").slideUp();
});
slideToggle : 滑動(dòng)切換
$("#flip").click(function(){
$("#panel").slideToggle();
});
jQuery 效果- 動(dòng)畫
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 2000px;
}
#div1 {
width: 100px;
height: 30px;
background: blue;
color: white;
/* 定位方式： 用固定定位 */
position: fixed;
right: 0;
bottom: 0;
/* 默認(rèn)是隱藏狀態(tài) */
display: none;
}
</style>
</head>
<body>
<button id="div1"> 回到頂部 </button>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script>
// 給按鈕綁定點(diǎn)擊事件處理函數(shù)
$("#div1").click(function() {
// 滾動(dòng)到頂部媳搪， 通過(guò)設(shè)置
// "body,html" 兼容寫法，確保所有瀏覽器都可以正常設(shè)置滾動(dòng)條
$("body,html").animate({scrollTop: 0});
});
// 到達(dá)一定位置才顯示“回到頂部”按鈕
// 思路：
// 1. 獲取滾動(dòng)條的位置
// 2. 根據(jù)位置判斷骤宣，是否顯示“回到頂部” 按鈕
$(document).scroll(function() {
var top = $(document).scrollTop();
if (top > 200) {
$("#div1").show();
} else {
$("#div1").hide();
}
})
</script>
</body>
</html>
jQuery 停止動(dòng)畫
jQuery stop() 方法
jQuery stop() 方法用于停止動(dòng)畫或效果秦爆，在它們完成之前。
stop() 方法適用于所有 jQuery 效果函數(shù)憔披，包括滑動(dòng)等限、淡入淡出和自定義動(dòng)畫。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑動(dòng)</button>
<div id="flip">點(diǎn)我向下滑動(dòng)面板</div>
<div id="panel">Hello world!</div>
</body>
</html>
