jQuery jQuery特殊效果、链式调用

最新推荐文章于 2022-03-03 19:49:59 发布
最新推荐文章于 2022-03-03 19:49:59 发布
阅读量141 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoqingru0311/article/details/119868955
版权

jQuery jQuery特殊效果、链式调用

在这里插入图片描述
在这里插入图片描述

1、jQuery特效

1、淡入效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery特殊效果</title>
    <style type="text/css">

        .box{
            width: 300px;
            height: 300px;
            background-color: goldenrod;
            display: none;
        }
    </style>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

        $(function () {
            $('#btn').click(function () {
                $('.box').fadeIn();        // 淡入（默认是隐藏）
            })
        });

    </script>
</head>
<body>
    <input type="button" name="" value="动画" id="btn">
    <div class="box"></div>

</body>
</html>

在这里插入图片描述

2、淡出

在这里插入图片描述
代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery特殊效果</title>
    <style type="text/css">

        .box{
            width: 300px;
            height: 300px;
            background-color: goldenrod;
        }
    </style>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

        $(function () {
            $('#btn').click(function () {
                $('.box').fadeOut();        // 淡入（默认是隐藏）
            })
        });

    </script>
</head>
<body>
    <input type="button" name="" value="动画" id="btn">
    <div class="box"></div>

</body>
</html>

显示效果如下所示：
在这里插入图片描述

3、淡入淡出效果回调函数

在这里插入图片描述
代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery特殊效果</title>
    <style type="text/css">

        .box{
            width: 300px;
            height: 300px;
            background-color: goldenrod;
        }
    </style>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

        $(function () {
            $('#btn').click(function () {
                $('.box').fadeOut(5000,'swing',function () {
                    alert('淡出淡出效果回调');
                });        // 淡入（默认是隐藏）
            })
        });

    </script>
</head>
<body>
    <input type="button" name="" value="动画" id="btn">
    <div class="box"></div>

</body>
</html>

显示效果如下：
在这里插入图片描述

4、fadeToggle() 切换淡入淡出

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadeToggle()切换淡入淡出</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                // alert('hahahhahaah')
                $('.box').fadeToggle(1000,'swing',function () {
                    alert('淡入淡出')
                }); // 设定变换时间与匀速

            })
        })
    </script>

    <style type="text/css">

        .box{
            width: 300px;
            height: 300px;
            background-color: goldenrod;
        }
    </style>
</head>
<body>
    <input type="button" name="" value="动画" id="btn">
    <div class="box"></div>
</body>
</html>

显示效果如下所示：
在这里插入图片描述

5、slideDown() 向下展开

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slideDown()向下展开</title>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                $('.box').slideDown();  // 向下弹出

            })
        })
    </script>

    <style type="text/css">

        .box{
            width: 300px;
            height: 300px;
            background-color: goldenrod;
            display: none;
        }
    </style>
</head>
<body>
    <input type="button" name="" value="动画" id="btn">
    <div class="box"></div>
</body>
</html>

显示如下：
在这里插入图片描述

6、slideUp() 向上卷起

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slideUp()向上收起</title>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                $('.box').slideUp();  // 向下弹出

            })
        })
    </script>

    <style type="text/css">

        .box{
            width: 300px;
            height: 300px;
            background-color: goldenrod;
            display: block;
        }
    </style>
</head>
<body>
    <input type="button" name="" value="动画" id="btn">
    <div class="box"></div>
</body>
</html>

显示效果如下：
在这里插入图片描述

2、jQuery链式调用

在这里插入图片描述

1、层级菜单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery层级菜单</title>
    <style type="text/css">
        body{
            font-family: "Microsoft Yahei";
        }
        body,ul{
            margin: 0px;
            padding: 0px;
        }
        ul{
            list-style: none;
        }
        .menu{
            width: 200px;
            margin: 20px auto 0;
        }

        .menu .level1,.menu li ul a{
            display: block;
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            background-color: #3366cc;
            color: black;
            font-size: 16px;
            text-indent: 10px;
        }

        .menu .level1{
            border-bottom: 1px solid #afc6f6;
        }
        .menu li ul a{
            font-size: 14px;
            text-indent: 20px;
            background-color:#7aa1ef ;
        }

        .menu li ul li{
            border-bottom: 1px solid #afc6f6;
        }

        .menu li ul{
            display: none;
        }

        .menu li .current{
            display: block;
        }

        .menu li ul li a:hover{
            background-color: #b3b3b3;
        }

    </style>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

		$(function(){

			$('.level1').click(function(){

				//当前点击的元素紧挨的同辈元素向下展开，再跳到此元素的父级(li),再跳到此父级的其他的同辈元素(li),选择其他同辈元素(li)的子元素ul，然后将它向上收起。
				// 通过stop() 可以修正反复点击导致的持续动画的问题
				$(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();
			})
		})

	</script>
</head>
<body>
<ul class="menu">
    <li>
        <a href="#" class="level1">水果</a>
        <ul class="current">
            <li><a href="#">苹果</a></li>
            <li><a href="#">梨子</a></li>
            <li><a href="#">葡萄</a></li>
            <li><a href="#">火龙果</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="level1">海鲜</a>
        <ul >
            <li><a href="#">蛏子</a></li>
            <li><a href="#">扇贝</a></li>
            <li><a href="#">龙虾</a></li>
            <li><a href="#">象拔蚌</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="level1">肉类</a>
        <ul >
            <li><a href="#">内蒙古羊肉</a></li>
            <li><a href="#">进口牛肉</a></li>
            <li><a href="#">野猪肉</a></li>
            <li><a href="#">鸡鸭肉</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="level1">蔬菜</a>
        <ul >
            <li><a href="#">娃娃菜</a></li>
            <li><a href="#">西红柿</a></li>
            <li><a href="#">西芹</a></li>
            <li><a href="#">胡萝卜</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="level1">速冻</a>
        <ul >
            <li><a href="#">冰淇淋</a></li>
            <li><a href="#">湾仔码头</a></li>
            <li><a href="#">海参</a></li>
            <li><a href="#">牛肉丸</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

显示效果如下：
在这里插入图片描述

郭庆汝
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery特殊效果和链式调用操作示例
10-17
主要介绍了JQuery特殊效果和链式调用操作,结合实例形式分析总结了jQuery各种常见显示效果与所使用的函数,以及链式调用显示层级菜单功能相关操作技巧,需要的朋友可以参考下
010-jQuery效果-链
weixin_43404791的博客
01-21 299
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){
Jquery链式调用
weixin_61650602的博客
03-03 1145
在jQuery中，如果一直对同一个元素或元素的其他关系元素（兄弟元素，父子元素）进行操作，那么可以使用 .语法(点语法)，一直写下去。 $("#box").css("background", "pink").siblings().css("background", "red"); 总结： 实现链式编程的核心，是对象中的每一个方法都会返回当前对象。 var 对象 = { 方法名:function(){ // … return this; // 实现链式编程的核心this } } 在方法中
jQuery中链式调用原理
有糖吃就会笑3
10-29 1172
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery中链式调用原理</title> </head> <body> .
jquery ajax链式调用,jQuery Deferred-获取链式Ajax调用的结果
weixin_30295121的博客
08-05 423
小编典典如果您知道有多少个Ajax调用，只需使用$ .when()$.when(doAjax('a'),doAjax('b'),doAjax('c'),doAjax('d')).then(function(result_a,result_b,result_c,result_d) {console.log("Result from query a: " + result_a);console.log...
jquery特殊效果、链式调用
S201314yh的博客
06-09 308
特殊效果fadeOut() 淡出fadeToggle() 切换淡入淡出hide() 隐藏元素show() 显示元素toggle() 切换元素的可见状态slideDown() 向下展开slideUp() 向上卷起slideToggle() 依次展开或卷起某个元素链式调用$('#div1') // id为div1的元素.children('ul') //该元素下面的ul子元素.slideDown('f...
jquery中链式调用原理
一个来自外太空的游客
12-16 1864
(1).链式调用 $("#mybtn").css("width","100px") .css("height","100px") .css("background","red"); (2).在对属性进行操作时建议使用JSON形式控制样式 $("#mybtn").css({ widt
jquery特殊效果和链式调用
LXJRQJ的博客
01-15 188
fadeIn() 淡入 $btn.click(function(){ $('#div1').fadeIn(1000,'swing',function(){ alert('done!'); }); }); fadeOut() 淡出 fadeToggle() 切换淡入淡出 hide() 隐藏元素 show() 显示元素 t...
转 jQuery 隐式迭代和链式调用
sxzxiaofeng168的博客
08-10 163
** jQuery 隐式迭代和链式调用 ** 学过 jQuery 之后，一般是不太有人再愿意写原生 JS 的，甚至有段时间 jQuery 成了 JS 的代名词。原因无他，足够简单方便。可在这简单方便的背后，可少不了两大功臣：隐式迭代和链式调用。 隐式迭代 对于原生 JS 来说，一般我们设置某类元素的样式，都得使用循环设置，而 jQuery 在使用的时候则无需考虑这点，简单示例如下： // 设置 ....
浅谈jQuery的链式调用
筱葭的博客
04-20 4647
实现链式的基本条件就是要实例对象先创建好，调用自己的方法。 链式调用是通过return this的形式来实现的。通过对象上的方法最后加上return this，把对象再返回回来，对象就可以继续调用方法，实现链式操作了。 Obj().init().setFlag(); 分解： obj = Obj(); obj.init(); obj.setFlag(); 如果需要链式的处理，只需要在方法内
jQuery效果链式调用动画
guoguo0717的博客
07-22 306
2020.7.22 今日小结 今天主要学习了绑定click事件，jQuery特殊效果，jQuery链式调用，jQuery动画 一、绑定click事件 $('#btn1').click(function(){ // 内部的this指的是原生对象 // 使用jquery对象用 $(this) }) 例： html代码 <p>三生三世十里桃花</p> <div class="continer" > <ul class="ul_01" style=
jQuery的链式调用浅析
10-28
并不是所有的浏览器都暴露了dom的对象原型,所以不能通过简单扩展原型方法并通过return this的形式来实现跨浏览器的链式调用,jquery采用了包装器的方式来解决了这个问题。
jQuery链式调用与show知识浅析
10-22
主要介绍了jQuery的XX如何实现？——2.show与链式调用 的相关资料，非常具有参考借鉴价值，感兴趣的朋友一起学习吧
Python实现类似jQuery使用中的链式调用的示例
09-21
chained calls链式调用其实多是指一种方法链的程序写法,这里我们来看一下Python实现类似jQuery使用中的链式调用的示例,首先说明一下什么是链式调用:
前18大旋转修整器企业占据全球87%的市场份额.docx
05-06
前18大旋转修整器企业占据全球87%的市场份额
Planet-SkySat-Imagery-Product-Specification-Jan2020.pdf
05-06
SKYSAT IMAGERY PRODUCT SPECIFICATION PLANET.COM VIDEO Full motion videos are collected between 30 and 120 seconds by a single camera from any of the active SkySats. Videos are collected using only the Panchromatic half of the camera, hence all videos are PAN only. Videos are packaged and delivered with a video mpeg-4 file, plus all image frames with accompanying video metadata and a frame index file (reference Product Types below)
Screenshot_20240506_133458_com.netease.yhtj.vivo.jpg
05-06
Screenshot_20240506_133458_com.netease.yhtj.vivo.jpg
2019年A~F题特等奖论文合集.pdf
最新发布
05-06
大学生，数学建模，美国大学生数学建模竞赛，MCM/ICM，历年美赛特等奖O奖论文
雷达物位变送器安装和操作手册
05-06
雷达物位变送器安装和操作手册
jquery如何实现链式调用
06-03
JQuery 实现链式调用的关键在于每个方法都会返回一个 JQuery 对象（通常是 `this`），这样就可以在返回的对象上继续调用其他方法。例如，下面的代码演示了如何使用链式调用来修改一个元素的 CSS 样式和内容： ```javascript $('#my-element') .css('background-color', 'red') .html('Hello, world!'); ``` 在这个例子中，首先通过 `$('#my-element')` 选择了一个元素，然后调用了 `css` 方法来修改它的背景颜色，接着又调用了 `html` 方法来修改它的内容。由于每个方法都返回了 JQuery 对象，因此可以在它们之间使用点号来进行链式调用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值