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