显示和隐藏
$(selector).hide();//默认效果
$(selector).hide(1000,callback);//selector选择器$(selector).show(1000,callback);//callback执行完后的回调函数
$(selector).hide("flip-rx");//flip-rx动画效果
$("p").toggle();//显示隐藏的元素并隐藏显示的元素,其可用参数和hide一样
fadeIn();//淡入
fadeOut();//淡出
fadeToggle();淡入淡出交换
fadeTo();参数可以指定一个透明度
滑动
slideDown();
slideUp();
slideToggle();//以上的三种slide和hide的可用参数类似
animate(),默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
$("div").animate({left:'100px'});//滑动到距离左侧100px为止,这个div需要开启position
//同时操作多个值
$("div").animate({
left:'100px',
opacity:'0.5',
height:'150px',
width:'150px'
});
//使用相对值
$("div").animate({
left:'100px',
opacity:'-=0.5',
height:'+=150px',
width:'+=150px'
});
//也可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
$("div").animate({
width:'toggle'//控制宽的打开关闭,高和其它元素状态不变
});
//队列,也就是挨着写多个animate,代码在执行时,会一个一个执行,第一个动画效果走完后,会再执行下一个动画效果,直到走完所有为止
var div=$("div")
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
...
//动画停止
$("div").stop();//停止
$("div").stop(true);//停止队列中当前的动画
$("div").stop(true,true);//停止所有动画,并执行到最后
$("div").stop(stopAll,goToEnd);//参数1:是否停止所有的,参数2:直接跳到最后。默认false可选
获取内容和属性
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
attr() - 方法用于获取属性值
设置内容和属性
text("需要设置的内容")//html,val,attr 都是上边一样
$("p").text(function(i,texta){//这个是带参数的设置内容,参数1:被选元素在当前列表中的下标,参数2:被选元素的文本内容
return i+texta;
});
$("a").attr("href",function(i,texta){//参数1:要设置的属性,参数2:回调同上
return texta+i;
})
添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
添加样式
.blue{
color: blue;
}
.pp{
font-size: 50px;
}
$("p").addClass("blue pp")
$("div").addClass("pp")
获取、设置样式
var a=$("p").css("color")//获取样式
$("p").css("color","#0000FF")//设置样式
$("p").css({"color":"#0000FF","fontSize":"100px"})//设置多个样式
删除元素
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
例:
$("#d1").remove();//删除id为d1的所有元素及其子元素
$("p").remove(".d2");//删除id为d2的所有p元素
遍历
parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
$("span").parents("ul");//在父元素中搜索ul的元素
$("span").parentsUntil("div");//返回自身和最近的div父元素之间的所有元素
children() 方法返回被选元素的所有直接子元素。
$("div").children("p.1");//返回div的子元素中类为1的p元素
$("div").find("span");//返回被选元素的后代元素,一路向下直到最后一个后代元素
$("div").find("*");//返回所有子元素
过滤
$("div p").first();//选取首个 <div> 元素内部的第一个 <p> 元素
.last();//选择最后一个 <div> 元素中的最后一个 <p> 元素
.eq(1);//返回被选元素中带有指定索引号的元素,参数是下标索引从0开始的
$("p").filter(".intro");//返回所有类名为intro的p元素
$("p").not(".intro");//反向的,这是返回所有类名不为intro的p元素
一个不错的文档手册 jQuery在线手册
---