jQuery常用方法总结+详解

今天不想跑，所以才去跑，这才是长距离跑者的思维方式。——村上春树

- 常用鼠标事件

 .click()：单击
 
.dblclick()：双击

.mouseenter()：鼠标穿过元素

.mouseleave()：鼠标离开元素	

- 常用元素效果

参数说明：speed，callback分别为时间（毫秒）和回调函数

.hide(speed，callback)：隐藏对应标签的内容

.show(speed，callback)：显示

.fadeIn(speed，callback)：淡入已经隐藏的元素

.fadeOut(speed，callback)：淡出可见元素

.fadeToggle(speed，callback) ：在淡出和淡入之间切换

.fadeTo(speed,opacity,callback)：给定不透明度，**opacity**范围0~1

hide和fadeOut同样是让元素消失，但是在给他们放慢速度后执行会发现，一个会让元素整体慢慢透明至消失，一个会让元素在整体逐渐透明的同时部分部分的消失，显示和淡入也一样

- 获取和设置元素的值

 text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

attr() -用于设置/改变属性值。

其中，每个方法中可加参数，一般为字符串。在不加参数的时候为获取元素的值，在加了参数的时候为设置元素的值。此外，attr()可以设置回调函数。

- 添加元素

 append() - 在被选元素内部的结尾插入指定内容
 
prepend() - 在被选元素内部的开头插入指定内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

- 删除元素

 remove() - 删除被选元素（及其子元素）
 
 empty() - 从被选元素中删除子元素(保留选中的元素）

remove()中可以添加选择器参数，表示只删除被选元素中选择器选中的元素，其他元素不变

- 设置css类

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

前三个方法的意思是，对一个class类定义好样式，然后用这三个方法可以对指定的元素添加或者删除定义好的样式，样式可以重复利用。
比如：设置好一个class样式为：

.important
 {
 font-weight:bold;
 font-size:xx-large;
 }

 .blue
 {
 color:blue;
 }

那么，就可以对选中的标签执行这样的操作，表示当前页中h1,h2,p的标签添加class为blue的样式；当前页中所有的div盒子如果用了important类则移除样式，没用则添加该样式。

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").toggleClass("important");
});

对于css()方法：在有一个参数时表示获取对应的值，如：

$("p").css("background-color");

在有两个参数时表示给前一个参数对应的属性设置值，如：

 $("p").css("background-color","yellow");

给多个参数设置值的时候用逗号分割：

$("p").css({"background-color":"yellow","font-size":"200%"});

-处理尺寸

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()
 

放图说明：

-遍历和过滤

• 遍历父级元素

parent()：返回一个直接父元素

parents()：返回所有的父元素

parentsUntil()：加参数，表示指定元素到参数父元素之间

• 遍历同级元素

siblings()：返回被选元素的所有同级元素，参数可选，表过滤

next()：只返回被选元素的下一个同级元素，无参

nextAll()：返回被选元素的所有弟弟元素，参数可选，表过滤

nextUntil()：返回指定元素和参数元素之间的弟弟元素

（以下方法和上面方法相似，只是方向相反）
prev()
prevAll()
prevUntil()

• 遍历子级元素

 children()： 方法返回被选元素的所有直接子元素。参数可选，表过滤
 
 find()： 方法返回被选元素的后代元素，一路向下直到最后一个后代。参数可选，表过滤

• 过滤元素

first() ：方法返回被选元素的首个元素。

例如：选取首个 <div> 元素内部的第一个 <p> 元素：

$("div p").first();

和上边方法相似：

last() 方法返回被选元素的最后一个元素。

eq() 方法返回被选元素中带有指定索引号的元素。

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

$("p").eq(1);

filter() 方法允许您规定一个标准。
不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

例如：返回带有类名 "intro" 的所有 <p> 元素

$("p").filter(".intro");

注意的是，filter（）和not（）的意思截然相反

not() 方法返回不匹配标准的所有元素。

例如：返回不带有类名 "intro" 的所有 <p> 元素：

$("p").not(".intro");