felayman——jquery之使用过滤器(二)

webdev2014

浏览: 679592 次

最近访客更多访客>>

u012363178

仙丹灵药

hellodota

WIN2333

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1653)

社区版块

存档分类

2014-04 ( 64)
2014-03 ( 97)
2014-02 ( 113)
更多存档...

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        /**
         * jquery过滤器之查找
         * 1.add()
         * 2.children()
         * 3.closest()
         * 4.contents()
         * 5.find()
         * 6.next()
         * 7.nextAll()
         * 8.nextUntil()
         * 9.offsetParent()
         * 10.parent()
         * 11.parents()
         * 12.parentsUntil()
         * 13.prev()
         * 14.prevAll()
         * 15.prevUntil()
         * 16.siblings()
         */
        //add(expr,[context])把与表达式匹配的元素添加到jquery对象中
        //children(expre)   取得一个包含指定表达式的元素的所有子元素集合
        $(function(){
           /* $("#button1").click(function(){
                //所有ul的后代的字体都变为蓝色，装饰为下弧线,字体大小为23px
                $("ul").children()
                        .css("color","blue")
                        .css("text-decoration","underline")
                        .css("fontSize","23px");
            });
            //content()获取所有子节点内容,包括注释,文本节点
            $("#button2").click(function(){
                //所有ul的后代的字体都变为蓝色，装饰为下弧线,字体大小为23px
                $("ul").contents()
                        .css("fontSize","25px");
            });
            //find()    只能查找元素
            $("#button3").click(function(){
                   alert($("ul").children().length);//弹出6,之包括元素节点
                   alert($("ul").find("li").length);//弹出6,也只能那个查找到元素节点
                   alert($("ol").find("a").length);//会弹出3
                   alert($("ul").contents().length);//弹出15,包括注释和文本节点
            });
            //parens(express)查找所有匹配的的祖先节点
            $("#current").click(function(){
                alert($(this).parents().length);//弹出4
                alert($(this).parents().html());
            });
            //parent(expre)匹配指定表达式的元素的父元素的第一个元素的集合
            $("#button4").click(function(){
                //所有div的父元素都会变成如下样式
                $("div").parent()
                        .css("width","100px")
                        .css("height","100px")
                        .css("border","2px solid red");
            });
            //parentUntil()查找指定parents()集合中的部分元素
            $("#button5").click(function(){//有待加深理解
                $("#current").parentsUntil("#haha")
                        .css("color","blue")
                        .css("fontSize","20px");
            });
            //上述代码并没有给出我想要的效果(哪里理解错了),于是按照官方文档给的案例
            $("#button6").click(function(){
                $('li.item-a').parentsUntil('.level-1')
                        .css('background-color', 'red');
            });
            //看来的确是我的理解偏差,我一维Until是除了的意思,但是在这里是直到碰到
            //offsetParent() 定位当前元素的第一个定位祖先元素
            $("#span").offsetParent().css("background","yellow");//有待加深理解
            //closest()从当前元素开始匹配,逐级向上查找,直到发现匹配的元素就停止
            //id为span的元素开始向上查找元素直到第一个匹配到,设置
            $("#span").closest("div").css("color","red");//有待加深理解
            */
            //prev()用于筛选前一个同辈元素的表达式
            //alert($("#li").prev().html());
            //prevAll()
           // alert($("#li").prevAll().length)
            //next()返回后面那个紧邻的同辈元素
            //alert($("#li").next().length);
            //nextAll()
            //alert($("#li").nextAll().length);
            //nextUntil()
           // alert($("#li").nextUntil("#lii").length);
            //siblings()取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
            //alert($("#li").siblings("#lii").html());
            //add(expr)把与表达式匹配的元素添加到jQuery对象中
            $("ul li").siblings("span").add("li").css("color","blue");
        });
    </script>
    <title></title>
</head>
<body>
<div>
    <p>
<div>hello1
        <div>hello2
            <span id="span">span2</span>
        </div>
</div>
    </p>
</div>
<ul class="level-1">
    <li class="item-i">1</li>
    <li class="item-ii">2
        <ul class="level-2">
            <li class="item-a">A</li>
            <li class="item-b">B
                <ul class="level-3">
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
    </li>
    <li class="item-iii">3</li>
</ul>
<div>祖先节点
    <span id="haha">span节点</span>
    <a href="">a节点</a>
    <code>code节点</code>
    <div>父节点
        <div id="current">当前节点</div>
    </div>
</div>
<button id="button1">button1</button>
<button id="button2">button2</button>
<button id="button3">button3</button>
<button id="button4">button4</button>
<button id="button5">button5</button>
<button id="button6">button6</button>
        <ul>
           <!--我是注释-->
            <li id="li">1</li>
            <li>2</li>
            <li>3</li>
            <li id="lii">4</li>
            <li>5,haha</li>
            <li >6</li>
        </ul>
        <ol>
            <li ><a>1</a></li>
            <li><a>2</a></li>
            <li><a>3</a></li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>
</body>
</html>

分享到：