语法:
$(selector).action()
$(document).ready(function(){
});
选择器:
元素选择器:
$("p")
$("p.id")
$("p#class")
属性选择器:
$("[href]")
$("[href = '#')")
$("[href\$='.jpg']")
CSS选择器:
$("p").css("color", "red");
\$("ul li:first")
\$("div#intro .head")
jQuery事件:
事件函数
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
名字冲突
其他JavaScript库也会使用$符号 所以可以使用自定义名字来替代$符号
var jq = jQuery.noConflict()
$.noConflict() 使用jQuery来替代$
jQuery事件
$(document).ready(function)
$(selector).click(function)
$(selector).dbclick(function)
$(selector).focus(function)
$(selector).mouseover(function)
jQuery隐藏/显示
$("#hide").click(function(){
$("p").hide();
});
$("p").show();
$("p").toggle();//切换隐藏与显示
$(selector).hide(speed, callback)//speed可选slow, fast 或是 毫秒
jQuery淡入淡出
fadeIn(speed, callback) // 淡入已隐藏元素
fadeOut() // 淡出可见元素
fadeToggle()// 切换淡入与淡出
fadeTo(speed, opacity, callback) //必需的 opacity 参数 设置为给定的不透明度 介于 0 与 1
jQuery滑动
slideDown() // 向上滑动
slideUp()// 向下滑动
slideToggle()// 切换滑动 向上滑动的元素变为向下滑动
jQuery动画
$(selector).animate({params}, speed, callback)
/*
params <R>(required) 形成动画的css参数
speed <O>(optional) 规定时长
callback<O> 回调函数
*/
- 默认地,所有 HTML 元素都有一个静态位置,且无法移动**。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute! - 当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
- 也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
- 使用预定义值
您甚至可以把属性的动画值设置为 “show”、”hide” 或 “toggle”:
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
- 编写多个animate() 按照队列顺序执行
jQuery停止动画
$(selector).stop(stopAll, goToEnd);
// stopAll <O> <D>(default)[false] 停止所有动画效果 默认为false 仅停止当前活动动画执行后续队列
// goToEnd <O> <D>[false] 立即完成当前动画
jQuery Callback
$(selector).action(speed, callback)
需要在动作执行完之后执行语句 则需要使用callback参数
类如:
$("p").hide(5000);
alert("1");
则会先弹窗再隐藏模块
正确应该这么写:
$("p").hide(5000, function(){
alert("1");
});
jQuery Chaining
如需链接一个动作,您只需简单地把该动作追加到之前的动作上
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);