jQuery 入口函数:
$(function(){
// 执行代码
});
jQuery 选择器:
元素选择器 $("p")
#id 选择器 $("#test")
.class 选择器 $(".test")
偶数选择器 $("tr:even")
奇数选择器 $("tr:odd")
第几选择器 $("#qwe:eq(n)") n从0开始 0对应第一个#qwe
常用的 jQuery 事件方法：
点击事件 click()
$("p").click(function(){
$(this).hide();
});
双击事件 dblclick()
$("p").dblclick(function(){
$(this).hide();
});
鼠标指针穿过事件 mouseenter()
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
鼠标指针离开事件 mouseleave()
$("#p1").mouseenter(function(){
alert('再见，您的鼠标离开了该段落。');
});
按下鼠标按键事件 mousedown()
$("#p1").mouseenter(function(){
alert("鼠标在该段落上按下！");
});
松开鼠标按钮事件 mouseup()
$("#p1").mouseenter(function(){
alert("鼠标在段落上松开。");
});
模拟光标悬停事件 hover() 鼠标移入触发第一个函数，鼠标移出触发第二个函数
$("#p1").hover( function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
});
获得焦点事件 focus()
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
失去焦点事件 blur()
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
jQuery 效果- 隐藏和显示：
可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
使用 toggle() 方法来切换 hide() 和 show() 方法
$("button").click(function(){
$("p").toggle();
});
在hide()、show()、toggle()的括号加上时间有向上收缩透明的效果
$("button").click(function(){
$("p").toggle(1000);
});
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);
});
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
fadeToggle()、fadeIn()、fadeOut()括号里不填是极快、填"slow"是一般、自己填时间可以改变透明的速度
jQuery 效果 - 滑动：
向下滑动 slideDown()
$("#flip").click(function(){
$("#panel").slideDown();
});
向上滑动 slideUp()
$("#flip").click(function(){
$("#panel").slideUp();
});
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
$("#flip").click(function(){
$("#panel").slideToggle();
});
在slideToggle()、slideDown()、slideUp()括号里加上时间可以控制上滑下滑的速度
$("#flip").click(function(){
$("#panel").slideToggle(1000);
});
jQuery 效果- 动画：
创建自定义动画 animate()
$("button").click(function(){
$("div").animate({left:'250px'});
});
操作多个属性 animate()
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
使用相对值 animate() 他的值会叠加
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
使用预定义的值 animate() 您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
使用队列功能 animate() 执行完一条在执行下一条
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow")
.animate({width:'300px',opacity:'0.8'},"slow")
.animate({height:'100px',opacity:'0.4'},"slow")
.animate({width:'100px',opacity:'0.8'},"slow");
});
jQuery 停止动画
停止动画或效果，在它们完成之前 stop()
$("#stop").click(function(){
$("#panel").stop();
});
也就是说 jq的效果都能停止：透明、滑动、滑动透明、动画效果 都能停止
jQuery Callback 方法
动画或效果可以加多一个函数，在动画或效果执行完后在执行这个函数
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
jQuery - 链(Chaining)
允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery - 获取内容和属性
text() - 设置或返回所选元素的文本内容
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
html() - 设置或返回所选元素的内容（包括 HTML 标记）
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
val() - 设置或返回表单字段的值
$("#btn1").click(function(){
alert("值为: " + $("#test").val());
});
attr() 方法用于获取属性值
$("button").click(function(){
alert($("#runoob").attr("href"));
});
jQuery - 设置内容和属性
text() - 设置或返回所选元素的文本内容
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
html() - 设置或返回所选元素的内容（包括 HTML 标记）
$("#btn2").click(function(){
$("#test2").html("Hello world!");
});
val() - 设置或返回表单字段的值
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
text()、html() 以及 val() 的回调函数
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
attr() 方法也用于设置/改变属性值
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery");
});
attr() 的回调函数
$("button").click(function(){
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
jQuery - 添加元素
append() - 在被选元素里面的结尾插入内容
$("p").append("追加文本");
$("p").append("").text("追加元素");
prepend() - 在被选元素里面的开头插入内容
$("p").prepend("在开头追加文本");
$("p").prepend("").text("追加元素");
after() - 在被选元素之后插入内容
$("img").after("在后面添加文本");
$("img").after("
before() - 在被选元素之前插入内容
$("img").before("在前面添加文本");
$("img").before("").text("追加元素");
jQuery - 删除元素
remove() - 删除被选元素（及其子元素）
$("#div1").remove();
empty() - 从被选元素中删除子元素
$("#div1").empty();
remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
$("p").remove(".italic"); 就是class名为 italic 的p标签 删除掉
jQuery - 获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类
$("h1,h2,p").addClass("blue"); //blue是设置好的class类名
$("body div:first").addClass("important blue"); //设置多个类
removeClass() - 从被选元素删除一个或多个类
$("h1,h2,p").removeClass("blue");
toggleClass() - 对被选元素进行添加/删除类的切换操作
$("h1,h2,p").toggleClass("blue"); //有这个类就删除、没有就添加
css() - 设置或返回样式属性
$("p").css("background-color"); 返回属性值
$("p").css("background-color","yellow"); 设置属性值
$("p").css({"background-color":"yellow","font-size":"200%"}); 设置多个属性值
jQuery 尺寸
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
var qwe=$("#div1").width(); 是一个数值
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
var qwe=$("#div1").height() ; 是一个数值
innerWidth() 方法返回元素的宽度（包括内边距）
var qwe=$("#div1").innerWidth(); 是一个数值
innerHeight() 方法返回元素的高度（包括内边距）
var qwe=$("#div1").innerHeight(); 是一个数值
outerWidth() 方法返回元素的宽度（包括内边距和边框）
var qwe=$("#div1").outerWidth(); 是一个数值
outerHeight() 方法返回元素的高度（包括内边距和边框）
var qwe=$("#div1").outerHeight(); 是一个数值
jQuery 遍历 - 祖先
parent() 方法返回被选元素的直接父元素
$("span").parent(); 只有父元素
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()
$("span").parents(); 所有祖先元素
$("span").parents("ul"); 所有祖先元素 的 ul祖先元素
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
$("span").parentsUntil("div"); span到div 的 所有祖先元素
jQuery 遍历 - 后代
children() 方法返回被选元素的所有直接子元素
$("div").children(); 只有子节点
$("div").children("p.1"); 指定的为p标签class名为1的子节点
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代
$("div").find("*") 所有后代元素
$("div").find("span") 后代元素中的span标签
jQuery 遍历 - 同胞(siblings)
siblings() 方法返回被选元素的所有同胞元素
$("h2").siblings(); 所有同胞元素（除了自己）
$("h2").siblings("h3"): 指定的 同胞元素
next() 方法返回被选元素的下一个同胞元素
$("h2").next(): 下一个同胞元素
extAll() 方法返回被选元素的所有跟随的同胞元素
$("h2").nextAll(); 后面的同胞节点
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
$("h2").nextUntil("h6") 之间的同胞节点（不包含h6）
jQuery 遍历- 过滤
first() 方法返回被选元素的首个元素
$("div p").first() 选择首个元素
last() 方法返回被选元素的最后一个元素
$("div p").last(); 选择最后一个元素
eq() 方法返回被选元素中带有指定索引号的元素
$("p").eq(1); 索引号从 0开始 1是第二个p标签
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
$("p").filter(".url"); 选择class名为url的p标签
not() 方法返回不匹配标准的所有元素
$("p").not(".url"); 不选择class名为url的p标签