jquery链式操作

àì夳堔傛蜴生んèń 2021-07-04 16:45 411阅读 0赞

## 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元素

### 层级菜单 ###

下面是最终的实现效果，如下：  
![在这里插入图片描述][20200129204040933.png]

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

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

<!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 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语句可以链接在一起，这不仅可以缩短代码长度，而且很多时候可以实现特殊的效果。

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

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

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

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

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

**用`andSelf()`方法控制`jQuery`链。**

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

运行效果如下：

[20200129204040933.png]: /images/20210704/c0e3f5988fdd4444a2f4ce303aaf02d7.png
[20200129205310200.png]: /images/20210704/c3dc71d24e434250a32a80521f7d7665.png
[20200129205359675.png]: /images/20210704/1ace62fd3e5c49e2b0ee7d4f1c36115c.png
[20200129205521222.png]: /images/20210704/ffd071814fb54fc4875a3a575c7c3ff5.png