AI智能
改变未来

jQuery-常用功能


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>

 

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » jQuery-常用功能