jQ初体验，^_^

toggle() 方法

jQuery 效果参考手册

实例

切换 <p> 元素的显示与隐藏状态：

$(".btn1").click(function(){
  $("p").hide();
});

亲自试一试

定义和用法

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

语法

$(selector).toggle(speed,callback,switch)

参数	描述
speed	可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。 如果设置此参数，则无法使用 switch 参数。
callback	可选。toggle 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。
switch	可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。 True - 显示所有元素 False - 隐藏所有元素 如果设置此参数，则无法使用 speed 和 callback 参数。

提示和注释

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

 animate() 方法

jQuery 效果参考手册

实例

改变 "div" 元素的高度：

$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

亲自试一试

定义和用法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

语法 1

$(selector).animate(styles,speed,easing,callback)

参数	描述
styles	必需。规定产生动画效果的 CSS 样式和值。 可能的 CSS 样式值（提供实例）： backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight maxWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。
speed	可选。规定动画的速度。默认是 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast"
easing	可选。规定在不同的动画点中设置动画速度的 easing 函数。 内置的 easing 函数： swing linear 扩展插件中提供更多 easing 函数。
callback	可选。animate 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

语法 2

$(selector).animate(styles,options)

参数	描述
styles	必需。规定产生动画效果的 CSS 样式和值（同上）。
options	可选。规定动画的额外选项。 可能的值： speed - 设置动画的速度 easing - 规定要使用的 easing 函数 callback - 规定动画完成之后要执行的函数 step - 规定动画的每一步完成之后要执行的函数 queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始 specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

attr() 方法

jQuery 属性操作参考手册

实例

改变图像的 width 属性：

$("button").click(function(){
  $("img").attr("width","180");
});

亲自试一试

定义和用法

attr() 方法设置或返回被选元素的属性值。

根据该方法不同的参数，其工作方式也有所差异。

返回属性值

返回被选元素的属性值。

语法

$(selector).attr(attribute)

参数	描述
attribute	规定要获取其值的属性。

亲自试一试

设置属性/值

设置被选元素的属性和值。

语法

$(selector).attr(attribute,value)

参数	描述
attribute	规定属性的名称。
value	规定属性的值。

亲自试一试

使用函数来设置属性/值

设置被选元素的属性和值。

语法

$(selector).attr(attribute,function(index,oldvalue))

参数	描述
attribute	规定属性的名称。
function(index,oldvalue)	规定返回属性值的函数。 该函数可接收并使用选择器的 index 值和当前属性值。

亲自试一试

设置多个属性/值对

为被选元素设置一个以上的属性和值。

语法

$(selector).attr({attribute:value, attribute:value ...})

参数	描述
attribute:value	规定一个或多个属性/值对。

scrollTop() 方法

jQuery CSS 操作参考手册

实例

设置 <div> 元素中滚动条的垂直偏移：

$(".btn1").click(function(){
  $("div").scrollLeft(100);
});

亲自试一试

定义和用法

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

scroll top offset 指的是滚动条相对于其顶部的偏移。

如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

语法

$(selector).scrollTop(offset)

参数	描述
offset	可选。规定相对滚动条顶部的偏移，以像素计。

提示和注释

注释：该方法对于可见元素和不可见元素均有效。

注释：当用于获取值时，该方法只返回第一个匹配元素的 scroll top offset。

注释：当用于设置值时，该方法设置所有匹配元素的 scroll top offset。

 hide() 方法

jQuery 效果参考手册

实例

隐藏可见的 <p> 元素：

$(".btn1").click(function(){
  $("p").hide();
});

亲自试一试

定义和用法

如果被选的元素已被显示，则隐藏该元素。

语法

$(selector).hide(speed,callback)

参数	描述
speed	可选。规定元素从可见到隐藏的速度。默认为 "0"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
callback	可选。hide 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。

 fadeIn() 方法

jQuery 效果参考手册

实例

使用淡入效果来显示一个隐藏的 <p> 元素：

$(".btn2").click(function(){
  $("p").fadeIn();
});

亲自试一试

定义和用法

fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。

语法

$(selector).fadeIn(speed,callback)

参数	描述
speed	可选。规定元素从隐藏到可见的速度。默认为 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其透明度（这样会创造淡入效果）。
callback	可选。fadeIn 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经显示，则该效果不产生任何变化，除非规定了 callback 函数。

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

 

offset() 方法

jQuery CSS 操作参考手册

实例

获得 <p> 元素当前的偏移：

$(".btn1").click(function(){
  x=$("p").offset();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

亲自试一试

定义和用法

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

返回偏移坐标

返回第一个匹配元素的偏移坐标。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

语法

$(selector).offset()

亲自试一试

设置偏移坐标

设置所有匹配元素的偏移坐标。

语法

$(selector).offset(value)

参数	描述
value	必需。规定以像素计的 top 和 left 坐标。 可能的值： 值对，比如 {top:100,left:0} 带有 top 和 left 属性的对象

亲自试一试

使用函数来设置偏移坐标

使用函数来设置所有匹配元素的偏移坐标。

语法

$(selector).offset(function(index,oldoffset))

参数	描述
function(index,oldoffset)	规定返回被选元素新偏移坐标的函数。 index - 可选。接受选择器的 index 位置 oldvalue - 可选。接受选择器的当前坐标。

亲自试一试

index() 方法

jQuery DOM 元素方法参考手册

实例

获得第一个 p 元素的名称和值：

$("li").click(function(){
  alert($(this).index());
});

亲自试一试

定义和用法

index() 方法返回指定元素相对于其他指定元素的 index 位置。

这些元素可通过 jQuery 选择器或 DOM 元素来指定。

注释：如果未找到元素，index() 将返回 -1。

第一个匹配元素的 index，相对于同胞元素

获得第一个匹配元素相对于其同胞元素的 index 位置。

语法

$(selector).index()

亲自试一试

元素的 index，相对于选择器

获得元素相对于选择器的 index 位置。

该元素可以通过 DOM 元素或 jQuery 选择器来指定。

语法

$(selector).index(element)

亲自试一试

参数	描述
element	可选。规定要获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。

 eq() 方法

jQuery 遍历参考手册

实例

通过为 index 为 2 的 div 添加适当的类，将其变为蓝色：

$("body").find("div").eq(2).addClass("blue");

亲自试一试

定义和用法

eq() 方法将匹配元素集缩减值指定 index 上的一个。

语法

.eq(index)

参数	描述
index	整数，指示元素的位置（最小为 0）。 如果是负数，则从集合中的最后一个元素往回计数。

详细说明

如果给定表示 DOM 元素集合的 jQuery 对象，.eq() 方法会用集合中的一个元素构造一个新的 jQuery 对象。所使用的 index 参数标示集合中元素的位置。

请看下面这个简单的列表：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

例子 1

我们可以把该方法应用到这个列表项目集：

$('li').eq(2).css('background-color', 'red');

亲自试一试

这个调用的结果是为项目 3 设置了红色背景。请注意，index 是基于零的，并且是在 jQuery 对象中引用元素的位置，而不是在 DOM 树中。

例子 2

如果提供负数，则指示从集合结尾开始的位置，而不是从开头开始。例如：

$('li').eq(-2).css('background-color', 'red');

亲自试一试

这次，项目 4 的背景变为红色，这是因为它是集合结尾开始的第二个。

例子 3

如果无法根据指定的 index 参数找到元素，则该方法构造带有空集的 jQuery 对象，length 属性为 0。

$('li').eq(5).css('background-color', 'red');

亲自试一试

这里，没有列表项会变为红色，这是因为 .eq(5) 指示的第六个列表项。