jquery链式操作

最新推荐文章于 2022-01-23 13:20:23 发布

.NET跨平台

最新推荐文章于 2022-01-23 13:20:23 发布

阅读量1k

点赞数 1

分类专栏： Jquery及其组件

原文链接：https://blog.csdn.net/WuLex

版权

Jquery及其组件专栏收录该内容

147 篇文章 3 订阅

订阅专栏

jquery链式调用 - 层级菜单示例

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

层级菜单

下面是最终的实现效果，如下：
在这里插入图片描述

那么下面来逐步编写，首先将静态页面先写出来，如下：
在这里插入图片描述使用ul>(li>a{水果}+(ul>li{苹果}*3))*5按Tab键，就可以快速生成需要的HTML代码。

那么下面就是编写样式了。
在这里插入图片描述使用jquery的链式写法，设置层级菜单的收缩
完整代码如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-3.4.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".menu a").click(function(){
                // alert($(this).html());
                // alert($(this).siblings().html());
                // $(this).siblings().toggle(1,'swing');
                // $(this).siblings().slideUp();
                // $(this).siblings().slideDown().parent().siblings().children('ul').slideUp();
                // $(this).siblings().addClass("active").slideDown().parent().siblings().children('ul').removeClass("active").slideUp();
                $(this).siblings().addClass("active").stop().slideToggle().parent().siblings().children('ul').removeClass("active").slideUp();
            })
        })
    </script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            font-family: 'Microsoft Yahei';
            color: #fff;
        }

        .menu_warp{
            width: 310px;   
        }

        .menu_warp a{
            display: block;
            width: 100%;
            height: 45px;
            line-height: 45px;
            text-indent: 14px;
            background-color: rgb(51,102,201);
            border-bottom: 1px solid #fff;
        }

        .menu li ul li {
            height: 45px;
            line-height: 45px;
            text-indent: 28px;
            background-color: rgb(122,161,239);
            border-bottom: 1px solid #fff;
        }

        .menu ul{
            display: none;
        }

        .menu .active{
            display: block;
        }

    </style>
</head>
<body>
        <!-- div.menu_warp>ul.menu>(li>a{水果}+(ul>li{苹果}*3))*5 -->
        <div class="menu_warp">
            <ul class="menu">
                <li>
                    <a href="#">水果</a>
                    <ul class="active">
                        <li>苹果</li>
                        <li>苹果</li>
                        <li>苹果</li>
                    </ul>
                </li>
                <li>
                    <a href="#">水果</a>
                    <ul>
                        <li>苹果</li>
                        <li>苹果</li>
                        <li>苹果</li>
                    </ul>
                </li>
                <li>
                    <a href="#">水果</a>
                    <ul>
                        <li>苹果</li>
                        <li>苹果</li>
                        <li>苹果</li>
                    </ul>
                </li>
                <li>
                    <a href="#">水果</a>
                    <ul>
                        <li>苹果</li>
                        <li>苹果</li>
                        <li>苹果</li>
                    </ul>
                </li>
                <li>
                    <a href="#">水果</a>
                    <ul>
                        <li>苹果</li>
                        <li>苹果</li>
                        <li>苹果</li>
                    </ul>
                </li>
            </ul>
        </div>
</body>
</html>

注意：在写这个代码的过程中，发现如果a标签的href = ""，这种情况下监听click方法是无法正常触发jquery的特效的，需要设置href=“#”，才可以正常使用jquery特效。

jquery链式操作的正确使用方法

jQuery实现方法的链式操作是非常容易的。这里给出正确的使用方法

糟糕的使用方法

代码如下:

$second.html(value);
$second.on('click',function(){
alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);

建议使用方法

代码如下:

$second.html(value);
$second.on('click',function(){
alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

jQuery链式操作实例分析

这篇文章主要介绍了jQuery链式操作,实例分析了jQuery基于链式操作动态改变页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

从过去的实例中，我们知道jQuery语句可以链接在一起，这不仅可以缩短代码长度，而且很多时候可以实现特殊的效果。

<script type="text/javascript">
  $(function() {
    $("div").addClass("css1").filter(function(index) {
      return index == 1 || $(this).attr("id") == "fourth";
    }).addClass("css2");
  });
</script>

以上代码为整个<div>列表增加样式css1,然后再进行筛选，再为筛选的元素单独增加css2样式。如果不采用jQuery，实现上述的效果将非常麻烦。

在jQuery链中，后面的操作都是以前面的操作结果为对象的，如果希望操作对象为上一步的对象，则可以使用end()方法。

用end()方法来控制jQuery链。

<script type="text/javascript">
  $(function() {
    $("p").find("span").addClass("css1").end().addClass("css2");
  });
</script>
<p>Hello,<span>how</span>are you?</p>
<span>very nice,</span>Thank you.

以上代码在<p>中搜索<span>标记，然后添加风格css1，利用end()方法将操作对象往回设置为$("p")并添加样式风格css2.

另外，还可以通过andSelf()将前面两个对象进行组合后共同处理。

用andSelf()方法控制jQuery链。

<script type="text/javascript">
  $(function() {
    $("div").find("p").addClass("css1").andSelf().addClass("css2");
  });
</script>
<div>
  <p>第一段</p>
  <p>第二段</p>
</div>

以上jQuery代码首先在<div>中搜索<p>标记，添加css1，这个风格只对<p>标记有效，然后利用andSelf()方法将<div>和<p>组合在一起，然后添加样式css2,这个风格对<div>和<p>均有效。

运行效果如下：

<div class="css2">
  <p class="css1 css2">第一段</p>
  <p class="css1 css2">第二段</p>
</div>

.NET跨平台

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jquery链式操作

jquery链式调用 - 层级菜单示例jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：$('#div1') // id为div1的元素.children('ul') //该元素下面的ul子元素.slideDown('fast') //高度从零变到实际高度来显示ul元素.parent() //跳到ul的父元素，也就是id为div1的元素...
复制链接

扫一扫

专栏目录