JQuery

jQuery语法实例

$(this).hide()  隐藏当前的 HTML 元素。

$("p").hide() 隐藏所有<p>元素。

$(".test").hide() 隐藏所有 class="test" 的元素。

$("#test").hide() 隐藏 id="test" 的元素。

jQuery 选择器

元素选择器

$("p")选取<p>元素。

$("p.intro")选取所有 class="intro"的<p>元素。

$("p#demo")选取所有 id="demo"de <p>元素。

属性选择器

$("[href]")选取所有带有 href 属性的元素。

$("[href='#']")选取所有带有 href 值等于“#”的元素。

$("[href!='#']")选取所有带有 href 值不等于“#”的元素。

$("[href$='.jpg']")选取所有带有 href 值以“.jpg” 结尾的元素。

CSS 选择器

实例：

 

jQuery 效果

隐藏（hide）/显示（show）

淡入（fadein）/淡出（fadeout）

语法

fadeIn

 

实例：

fadeOut

语法

 

实例：

fadeToggle

语法

 

实例：

fadeTo

语法

 

实例：

滑动（slither）

flideDown 向下

语法

 

实例：

 

flideUp  向上

语法

 

实例：

flideToggle  切换

语法

 

实例：

动画（animate)

自定义

语法

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：

 实例：

操作多个属性

实例：

提示：可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

使用相对值 

实例：

使用队列功能

实例1

实例2

停止动画（stop)

语法

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法，不带参数：

实例：

回收函数（Callback)

语法

callback 参数是一个在 hide 操作完成后被执行的函数。

错误（没有 callback）

正确（有 callback）

链接（Chaining）

在相同的元素上运行多条 jQuery 命令，一条接着另一条。

例子1

下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：

添加多个方法调用

列子2