jQuery 选择器
- 元素 选择器
- #id 选择器
- .class 选择器
jQuery 事件
- click() 是当按钮点击事件被触发时会调用一个函数
- dbclick() 当双击元素时, 会发生dbclick事件
- mouseenter() 当鼠标指针穿过元素时, 会发生mouseenter事件
- mouseleave() 当鼠标指针离开元素时, 会发生mouseleave事件
- mousedown() 当鼠标指针移动到元素上方, 并按下鼠标按键时, 会发生mousedown事件
- mouseup() 当在元素上松开鼠标按钮时, 会发生mouseup事件
- hover() 用于模拟光标悬停事件, 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
);
- focus() 当元素获得焦点时, 发生focus事件, 当通过鼠标点击元素或通过tab键定位到元素时, 该元素会获得焦点
- blur() 当元素失去焦点时, 发生blur事件
- keydown() 在键盘上按下某键时发生, 一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码
- keypress() 在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发
- keyup() 用户松开某一个按键时触发, 与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参数规定隐藏/显示的速度, 可以取以下值:"fast"、"fast"或毫秒, 可选的callback参数是隐藏或显示完成后执行的函数名称
//第二个参数是一个字符串，表示过渡使用哪种缓动函数。（jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）。
$(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>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button>点击淡入 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()方法之间进行切换
- fadeTo() 允许渐变为给定的不透明度(值介于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">点我滑下面板</div>
<div id="panel">Hello world!</div>
</body>
- slideUp(speed, callback)方法 用于向上滑动元素
- slideToggle()方法 可以在slideDown()与slideUp()方法之间进行切换
jQuery 效果 - 动画
- animate({params},speed,callback) 方法用于创建自定义动画, 必须的params参数定义形成动画的css属性
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
注意: 默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
- animate() - 操作多个属性
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jquery.com 下载 颜色动画 插件。
- animate() - 使用相对值, 该值相对于元素的当前值, 需要在值的前面加上 += 或 -=
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
- animate() - 使用预定义的值
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
- animate() - 使用队列功能
$("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 参数规定是否应该清除动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
<!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>点击 "开始" 按钮开始动画。</p>
<p>点击 "停止" 按钮停止当前激活的动画，但之后我们能再动画队列中再次激活。</p>
<p>点击 "停止所有" 按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。</p>
<p>点击 "停止动画，但完成动作" 快速完成动作，并停止它。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
jQuery callback方法
Callback 函数在当前动画 100% 完成之后执行。
jQuery - 链(Chaining)
通过jQuery, 可以把动作/方法链接在一起
Chaining允许我们在一条语句中运行多个jQuery方法(在相同的元素上)
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
