jQuery 選擇器
- 元素 選擇器
- #id 選擇器
- .class 選擇器
jQuery 事件
- click() 是當(dāng)按鈕點(diǎn)擊事件被觸發(fā)時會調(diào)用一個函數(shù)
- dbclick() 當(dāng)雙擊元素時, 會發(fā)生dbclick事件
- mouseenter() 當(dāng)鼠標(biāo)指針穿過元素時, 會發(fā)生mouseenter事件
- mouseleave() 當(dāng)鼠標(biāo)指針離開元素時, 會發(fā)生mouseleave事件
- mousedown() 當(dāng)鼠標(biāo)指針移動到元素上方, 并按下鼠標(biāo)按鍵時, 會發(fā)生mousedown事件
- mouseup() 當(dāng)在元素上松開鼠標(biāo)按鈕時, 會發(fā)生mouseup事件
- hover() 用于模擬光標(biāo)懸停事件, 當(dāng)鼠標(biāo)移動到元素上時，會觸發(fā)指定的第一個函數(shù)(mouseenter);當(dāng)鼠標(biāo)移出這個元素時浇辜，會觸發(fā)指定的第二個函數(shù)(mouseleave)
$("#p1").hover(
function(){
alert("你進(jìn)入了 p1!");
},
function(){
alert("拜拜! 現(xiàn)在你離開了 p1!");
}
);
- focus() 當(dāng)元素獲得焦點(diǎn)時, 發(fā)生focus事件, 當(dāng)通過鼠標(biāo)點(diǎn)擊元素或通過tab鍵定位到元素時, 該元素會獲得焦點(diǎn)
- blur() 當(dāng)元素失去焦點(diǎn)時, 發(fā)生blur事件
- keydown() 在鍵盤上按下某鍵時發(fā)生, 一直按著則會不斷觸發(fā)（opera瀏覽器除外）, 它返回的是鍵盤代碼
- keypress() 在鍵盤上按下一個按鍵俺驶，并產(chǎn)生一個字符時發(fā)生, 返回ASCII碼湘换。注意: shift狂秘、alt罐氨、ctrl等鍵按下并不會產(chǎn)生字符，所以監(jiān)聽無效 ,換句話說, 只有按下能在屏幕上輸出字符的按鍵時keypress事件才會觸發(fā)米间。若一直按著某按鍵則會不斷觸發(fā)
- keyup() 用戶松開某一個按鍵時觸發(fā), 與keydown相對, 返回鍵盤代碼
// 只允許按下的字母鍵生效, 65~90是所有小寫字母的鍵盤代碼范圍.
var validKeys = { start: 65, end: 90 };
$("#keys").keydown( validKeys, function(event){
var keys = event.data; //拿到validKeys對象.
return event.which >= keys.start && event.which <= keys.end;
} );
jQuery 效果 - 隱藏/顯示
- hide(speed,callback) / show(speed,callback) 可選的speed參數(shù)規(guī)定隱藏/顯示的速度, 可以取以下值:"fast"强品、"fast"或毫秒, 可選的callback參數(shù)是隱藏或顯示完成后執(zhí)行的函數(shù)名稱
//第二個參數(shù)是一個字符串，表示過渡使用哪種緩動函數(shù)屈糊。（jQuery自身提供"linear" 和 "swing"的榛，其他可以使用相關(guān)的插件）。
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
});
});
});
- toggle(speed,callback) 可以使用 toggle() 方法來切換 hide() 和 show() 方法
jQuery 效果 - 淡入淡出
- fadeIn(speed,callback) 用于淡入++已隱藏++的元素
<head>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>以下實(shí)例演示了 fadeIn() 使用了不同參數(shù)的效果逻锐。</p>
<button>點(diǎn)擊淡入 div 元素夫晌。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
- fadeOut(speed, callback) 用于淡出可見元素
- fadeToggle() 可以在fadeIN()與fadeOut()方法之間進(jìn)行切換
- fadeTo() 允許漸變?yōu)榻o定的不透明度(值介于0與1之間)
jQuery 效果 - 滑動
- slideDown(speed,callback) 方法 用于向下滑動元素
<head>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</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>
<div id="flip">點(diǎn)我滑下面板</div>
<div id="panel">Hello world!</div>
</body>
- slideUp(speed, callback)方法 用于向上滑動元素
- slideToggle()方法 可以在slideDown()與slideUp()方法之間進(jìn)行切換
jQuery 效果 - 動畫
- animate({params},speed,callback) 方法用于創(chuàng)建自定義動畫, 必須的params參數(shù)定義形成動畫的css屬性
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>默認(rèn)情況下，所有的 HTML 元素有一個靜態(tài)的位置昧诱，且是不可移動的晓淀。
如果需要改變?yōu)椋覀冃枰獙⒃氐?position 屬性設(shè)置為 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
注意: 默認(rèn)情況下鳄哭，所有 HTML 元素都有一個靜態(tài)位置要糊，且無法移動纲熏。
如需對位置進(jìn)行操作妆丘，要記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute局劲！
- animate() - 操作多個屬性
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
可以用 animate() 方法來操作所有 CSS 屬性嗎勺拣？
是的，幾乎可以鱼填！不過药有，需要記住一件重要的事情：當(dāng)使用 animate() 時，必須使用 Camel 標(biāo)記法書寫所有的屬性名苹丸，比如愤惰，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right赘理，等等宦言。
同時，色彩動畫并不包含在核心 jQuery 庫中商模。
如果需要生成顏色動畫奠旺，您需要從 jquery.com 下載 顏色動畫 插件蜘澜。
- animate() - 使用相對值, 該值相對于元素的當(dāng)前值, 需要在值的前面加上 += 或 -=
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
- animate() - 使用預(yù)定義的值
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
- animate() - 使用隊(duì)列功能
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
jQuery 停止動畫
- stop(stopAll,goToEnd)
可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動畫隊(duì)列。默認(rèn)是false响疚，即僅停止活動的動畫鄙信，允許任何排入隊(duì)列的動畫向后執(zhí)行。
可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動畫忿晕。默認(rèn)是 false装诡。
因此，默認(rèn)地践盼，stop() 會清除在被選元素上指定的當(dāng)前動畫慎王。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({left:'100px'},5000);
$("div").animate({fontSize:'3em'},5000);
});
$("#stop").click(function(){
$("div").stop();
});
$("#stop2").click(function(){
$("div").stop(true);
});
$("#stop3").click(function(){
$("div").stop(true,true);
});
});
</script>
</head>
<body>
<button id="start">開始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止動畫，但完成動作</button>
<p>點(diǎn)擊 "開始" 按鈕開始動畫宏侍。</p>
<p>點(diǎn)擊 "停止" 按鈕停止當(dāng)前激活的動畫赖淤，但之后我們能再動畫隊(duì)列中再次激活。</p>
<p>點(diǎn)擊 "停止所有" 按鈕停止當(dāng)前動畫谅河，并清除動畫隊(duì)列咱旱，所以元素的所有動畫都會停止。</p>
<p>點(diǎn)擊 "停止動畫绷耍，但完成動作" 快速完成動作吐限，并停止它。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
jQuery callback方法
Callback 函數(shù)在當(dāng)前動畫 100% 完成之后執(zhí)行褂始。
jQuery - 鏈(Chaining)
通過jQuery, 可以把動作/方法鏈接在一起
Chaining允許我們在一條語句中運(yùn)行多個jQuery方法(在相同的元素上)
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
