jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
jQuery 效果 - 隐藏和显示
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
-------------隐藏当前的 HTML 元素。------------------------
----------------------------隐藏 id="test" 的元素--------------------
This is a heading
This is a paragraph.
This is another paragraph.
-----------------------隐藏所有 元素---------------------
This is a heading
This is a paragraph.
This is another paragraph.
-------------------隐藏所有 class="test" 的元素---------------
This is a heading
This is a paragraph.
This is another paragraph.
1)、jQuery hide() 和 show()方法
如果点击“隐藏”按钮,我就会消失。
2)、带动画效果的显示/隐藏
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
这是一个段落。
这是另一个段落。
又或者:通过 jQuery,使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素,并隐藏已显示的元素。
语法:
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
这是一个段落。
这是另一个段落。
jQuery 效果 - 淡入淡出
jQuery Fading 方法
通过 jQuery,您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() 、jQuery fadeOut() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
两者只是名称有点区别,语法基本一样
Demo:
演示带有不同参数的 fadeIn() 方法。
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
上面Demo等价于下面的:
演示带有不同参数的 fadeToggle() 方法。