1、遍历
(1)祖先:
- parent() 返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历
- parents() 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
(2)后代:
- children() 返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历
- find() 返回被选元素的后代元素,一路向下直到最后一个后代
(3)同胞:
siblings() – 返回被选元素的所有同胞元素。可以使用可选参数来过滤对同胞元素的搜索
2、hover、mouseenter和mouseover
(1)hover和mouseenter区别:
hover在鼠标悬浮在目标上,触发事件,再离开目标的时候会再次触发事件。而mouseenter是鼠标悬浮在上面触发,离开目标的时候不会触发事件。mouseleave是鼠标离开目标触发事件。
(2)mouseenter和mouseover区别:
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件;只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件;
补充:mouseover常和mouseout搭配使用,mouseenter 常和mouseleave搭配使用
3、jQuery特效
(1)淡入淡出
- fadeIn() 淡入已隐藏的元素
- fadeOut() 淡出可见元素
- fadeToggle() 在 fadeIn() 与 fadeOut() 方法之间进行切换
- fadeTo() 允许渐变为给定的不透明度(值介于 0 与 1 之间)
[code]$(selector).fadeIn(speed,callback);//参数说明://speed,可选参数,规定效果的时长。它可以取以下值:\"slow\"、\"fast\" 或毫秒。.//callback,可选参数,fading 完成后所执行的函数名称。
(2)滑动
- slideDown() 向下滑动元素
- slideUp() 向上滑动元素
- slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换
[code]$(selector).slideDown(speed,callback);//参数说明://speed,可选参数,规定效果的时长。它可以取以下值:\"slow\"、\"fast\" 或毫秒。.//callback,可选参数,滑动完成后所执行的函数名称。
鼠标移入渐入下滑显示下拉框特效:
[code]<div class=\"box\"><div class=\"one\"></div><div class=\"two\"></div></div><script type=\"text/javascript\">$(function() {//方法一://鼠标移入box,则two向下滑出$(\".box\").mouseenter(function() {$(\".two\").slideDown(1000);})//鼠标移出box,则two向上滑入$(\".box\").mouseleave(function() {$(\".two\").slideUp(1000);})//方法二:$(\".box\").hover(function() {$(\".two\").slideToggle(1000);})})</script>