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) 用于淡入++已隐藏++的元素
以下实例演示了 fadeIn() 使用了不同参数的效果。
- fadeOut(speed, callback) 用于淡出可见元素
- fadeToggle() 可以在fadeIN()与fadeOut()方法之间进行切换
- fadeTo() 允许渐变为给定的不透明度(值介于0与1之间)
jQuery 效果 - 滑动
- slideDown(speed,callback) 方法 用于向下滑动元素
点我滑下面板
Hello world!
- slideUp(speed, callback)方法 用于向上滑动元素
- slideToggle()方法 可以在slideDown()与slideUp()方法之间进行切换
jQuery 效果 - 动画
- animate({params},speed,callback) 方法用于创建自定义动画, 必须的params参数定义形成动画的css属性
默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!
注意: 默认情况下，所有 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() 会清除在被选元素上指定的当前动画。
点击 "开始" 按钮开始动画。
点击 "停止" 按钮停止当前激活的动画，但之后我们能再动画队列中再次激活。
点击 "停止所有" 按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。
点击 "停止动画，但完成动作" 快速完成动作，并停止它。
HELLO
jQuery callback方法
Callback 函数在当前动画 100% 完成之后执行。
jQuery - 链(Chaining)
通过jQuery, 可以把动作/方法链接在一起
Chaining允许我们在一条语句中运行多个jQuery方法(在相同的元素上)
$("#p1").css("color","red").slideUp(2000).slideDown(2000);