jQuery常用方法和不常用方法合集

引入文件：

<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);