jQuery-常用功能

最新推荐文章于 2021-06-26 14:45:02 发布

小矮马

最新推荐文章于 2021-06-26 14:45:02 发布

阅读量215

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/qq_40007317/article/details/105763335

版权

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 之间）

$(selector).fadeIn(speed,callback);
//参数说明：
//speed，可选参数，规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
//callback，可选参数，fading 完成后所执行的函数名称。

（2）滑动

slideDown() 向下滑动元素
slideUp() 向上滑动元素
slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换

$(selector).slideDown(speed,callback);
//参数说明：
//speed，可选参数，规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
//callback，可选参数，滑动完成后所执行的函数名称。

鼠标移入渐入下滑显示下拉框特效：

<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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery-常用功能

1、遍历（1）祖先：parent() 返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历 parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)（2）后代：children() 返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历 find() 返回被选元素的后代元素，一路向下直到...
复制链接

扫一扫