引入文件:
<script type="text/javascript" src="jquery.js"></script>
基础语法:
$(selector).action();
选择器:
$("p") $("p.intro") $("p#demo") 属性选择 $("[href]") $("[href='#']") $("[href!='#']") $("[href$='.jpg']")
获得内容或者设置内容 - text()、html() 以及 val()
获取属性或者设置属性 - attr()
添加
append() - 在被选元素的结尾插入内容(在元素里面) prepend() - 在被选元素的开头插入内容(在元素里面)
after() - 在被选元素之后插入内容(在元素外面) before() - 在被选元素之前插入内容(在元素外面)
删除和清空
remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素
操作样式
.important { font-weight:bold; font-size:xx-large; } .blue { color:blue; }
hasClass() - 是否包含某个类 if($(this).hasClass("abcd")) addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作
$("p").css("background-color"); $("p").css("background-color","yellow"); $("p").css({"background-color":"yellow","font-size":"200%"});
遍历
$(selector).each(function(index,element)); $("li").each(function(){ alert($(this).text()) });
获取父级
$("span").parent(); $("span").parents(); $("span").parents("ul"); $("span").parentsUntil("div");
获取子级
$("div").children(); $("div").children("p.1"); $("div").find("span"); $("div").find("*");
获取同级(同胞)
$("h2").siblings(); $("h2").siblings("p"); $("h2").next(); $("h2").nextAll(); $("h2").nextUntil("h6"); $("h2").prev(); $("h2").prevAll(); $("h2").prevUntil("h6");
过滤
$("div p").first(); $("div p").last(); $("p").eq(1);(索引) $("p").filter(".intro"); $("p").not(".intro");
请求
$.get(URL,callback); $.post(URL,data,callback);
特效
隐藏和显示
$(selector).hide(speed,callback); $(selector).show(speed,callback); $(selector).toggle(speed,callback); $("p").hide(); $("p").show(); $("p").toggle(); $("p").toggle(5000);
渐入和渐出
$(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback); $(selector).fadeTo(speed,opacity,callback); $("#div1").fadeIn(); $("#div2").fadeOut("slow"); $("#div3").fadeToggle(3000); $("#div1").fadeTo("slow",0.15);
滑动
$(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); $(selector).slideToggle(speed,callback); $("#panel").slideDown(); $("#panel").slideUp("slow"); $("#panel").slideToggle(3000);
高度和宽度
$("#div1").width(); $("#div1").width(500).height(500);
停止
$(selector).stop(stopAll,goToEnd); $("#panel").stop();
jQuery chaining
$("#p1").css("color","red").slideUp(2000).slideDown(2000);