WEB前端第四十六课——jQuery框架（四）关系节点 / 四六文摘

1.children()方法

　　该方法用于选中某一个元素的所有直接子元素。

　　　　语法：$("selector").children("subSelector");

　　　　children()方法中的参数为可选项，有参数事表示搜索符合参数选择器的子元素。

2.find()方法

　　由于children()方法只针对子元素进行查找，如果是子元素以下的后代是搜索不到的，

　　因此，jQuery提供了“find()”方法，用于查找指定元素的所有符合条件的后代节点。

　　　　语法：$("selector").find("subSelector");

　　　　不同于children()方法，find()方法中的参数为必填项！

3.parent()方法

　　用于查找当前节点的直属父节点。

　　　　语法：$("selector").parent();

　　　　不同于find()方法，parent()方法中不需要写任何参数！

　　　　该方法只能获取直接父节点（唯一性）。

4.parents()方法

　　用于查找当前节点的所有祖先节点，直到 body以及 html为止。

　　　　语法：$("selector").parents("senSelector");

　　　　与children()方法相同，parents()中的参数为可选项。

5.siblings()方法

　　用于访问当前节点的所有兄弟节点（不包括自身）。

　　　　语法：$("selector").siblings("broSelector");

　　　　与children()方法相同，siblings()中的参数为可选项。

6.其他常用关系

　　① next()，后一个兄弟节点，不加参数

　　② prev()，前一个兄弟节点，不加参数

　　③ nextAll()，后面的所有兄弟节点，可加参数

　　④ prevAll()，前面的所有兄弟节点，可加参数

7.手风琴案例

　　① is(":visible")，检测指定元素是否可见

　　　　is()方法，根据参数指定的“选择器、DOM元素或jq对象”查找符合条件的元素集合，

　　　　　　　　如果其中至少有一个元素符合条件，就返回“true”，否则返回“false”

　　　　　　语法：$("selector").is("参数");

　　　　　　is()方法的参数可以是选择器也可以是函数，作为检测条件。

　　　　:visible选择器，选取当前可见的每一个元素，一般而言除一下几种情况之外的元素都是可见的

　　　　　　① 设置为“display：none”的元素

　　　　　　② 带有“type='hidden' ”的表单元素

　　　　　　③ width和 height设置为 0 的元素

　　　　　　④ “父元素设置为隐藏”的子元素

　　② box-sizing，默认情况下元素的“width/height”属性值不包括“padding”和“border”属性值。

　　　　box-sizing:content-box，

　　　　　　表示宽度（width）和高度（height）都应用到元素的内容框，

　　　　　　在元素的宽度和高度之外绘制边框（border）和内边距（padding）。

　　　　box-sizing:border-box，

　　　　　　表示为元素的边框（border）和内边距（padding）都在元素的宽度和高度内绘制，

　　　　　　元素内容框的宽度和高度等于设定的宽度（width）和高度（height）减去边框和内边距。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>accordion</title>
    <script src="jQueryFiles/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="IconFont/iconfont.css">
    <script src="IconFont/iconfont.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        .box{
            width: 600px;margin: 50px auto;
        }
        .box ul{list-style: none}
        .box ul li{
            width: 100%;margin: 10px;border-left: 1px solid #df5000;
            box-shadow: 1px 2px 4px rgba(220,75,100,.3);
        }
        .box ul li h3{
            width: 100%;height: 50px;padding: 0 10px;line-height: 50px;
            box-sizing:border-box;position: relative;cursor: pointer;
        }
        .box ul li h3 i{
            font-size: 25px;color: #55a532;font-weight: lighter;
            position: absolute;right: 10px;
        }
        .box ul li div{
            width: 100%;padding: 15px;box-sizing: border-box;display: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <h3>Section One<i class="iconfont"></i></h3>
                <div>
                    Hooray! It's snowing! It's time to make a snowman.James runs out.He makes a big pile of snow. He puts a big snowball on top. He adds a scarf and a hat.
                    He adds an orange for the nose. He adds coal for the eyes and buttons.In the evening,James opens the door. What does he see? The snowman is moving! James invites him in.
                    The snowman has never been inside a house. He says hello to the cat. He plays with paper towels.A moment later, the snowman takes James's hand and goes out.They go up, up, up into the air!
                    They are flying! What a wonderful night!The next morning, James jumps out of bed.He runs to the door.He wants to thank the snowman. But he's gone.
                </div>
            </li>
            <li>
                <h3>Section Two<i class="iconfont"></i></h3>
                <div>
                    Internet is the ocean of knowledge. In this ocean youwill find beautiful pearls of knowledge.Also you mustnot forget the lethal sharks (x rated sites) in thisocean, especially when you
                    allow your innocentchildren to surf on it. The children are morevulnerable when they are using the Internet withoutclose vigil of their parents.
                </div>
            </li>
            <li>
                <h3>Section Three<i class="iconfont"></i></h3>
                <div>
                    The Internet is gift for knowledge hungry people; it'salso a good tool for communication and learning. If you use the Internet for doing research & study thenit's a gift for you
                    but if you use Internet forsurfing pornographic sites or chatting withanti-social elements,it will become a curse for youespecially for your unescorted children.
                </div>
            </li>
        </ul>
    </div>
    <script>
        var $spreadBtn=$(".box h3 i");
        $spreadBtn.click(function () {
        //  判断文本内容的div是否可见
            if ($(this).parent().siblings("div").is(":visible")){
        //  如果是可见状态，则其父元素（h3）的兄弟元素（div）隐藏，且图标切换为“+”
                $(this).parent().siblings("div").slideUp();
                $(this).html("");
            }else {
        //  如果是隐藏状态，则其父元素（h3）的兄弟元素（div）显示，且图标切换为“-”
                $(this).parent().siblings("div").slideDown();
                $(this).html("");
        //  其父元素的兄弟元素（div）显示的同时，隐藏其他处于显示状态的div，且图标切换为“+”
                $(this).parents("li").siblings().find("div").slideUp();
                $(this).parents("li").siblings().find("i").html("");
            }
        });
    </script>
</body>
</html>

WEB前端第四十六课——jQuery框架（四）关系节点

相关推荐