引入文件:
<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);