首页 > 代码库 > jquery-63-68讲

jquery-63-68讲

jquery63_basic_03

$(function(){
        //目前是一个javascript的对象,对于该对象而言,无法使用jquery的方法
        var hello = document.getElementById("hello");
        //是js的对象,不能使用jquery的方法
        // hello.css("color","#f00");
        //使用$(xx)就可以把xx这个节点封装为jquery的节点
        $(hello).css("color","#f00");
        //每一个jquery节点都是一个数组,只要取出数组中的值,这个值就是js的节点,就只能用js的方法
        //当转换为js节点之后,就无法使用jquery的方法,如果要使用jquery的方法在通过$()进行封装就可以了
        ($("li.abc")[0]).innerHTML = "abccdd";
        var lis = $("#hello ul li");
        for(var i=0;i<lis.length;i++) {
            //目前的li是js的节点
            var li = lis[i];
            //li.innerHTML = "["+(i+1)+"]"+li.innerHTML;
            //$(li)就变成了JQuery节点
            //xx.html()读取内容,xx.html("abc"):把节点的内容完成替换
            $(li).html((i+1)+"."+$(li).html());
        }
    });
    </script>
</head>
<body>
<div id="hello">
    <ul>
        <li>aaaaaaaaaaaaa</li>
        <li>bbbbbbbbbbbb</li>
        <li class="abc">ccccccccccccc</li>
        <li>ddddddddddddd</li>
        <li>eeeeeeeeeeeee</li>
    </ul>
</div>

结果:

image

64讲 选择器jquery64_select01.html

  $(function() {
            //取li中的所有a
            //$("li a").css("color","#f00");
            //取class为.myList这个标签的下一级标签li的下一级标签为a的节点
            // $(".myList>li>a").css("color","#f00");
           
            //去li的节点其中li中的href属性是以http://为开头

image
            // $("a[href^=‘http://‘]").css("background","#00f").css("color","#fff");
           
            //取.myList的ul中的包含有a标签的li标签
            //$(".myList ul li:has(‘a‘)").css("background","#ff0");//
           
            //获取页面中所有以pdf结尾的超级链接
            // $("a[href$=‘pdf‘]").css("background","#ff0").css("color","#f00");
           
            //取id为li1的下一个兄弟节点li,仅仅只会去一个节点,
            //仅仅只会取相邻的节点,如果相邻的节点不是li就什么都取不出去
            //$("#li1+li").css("background","#ff0");
           
            //取id为li的下面的所有满足条件的兄弟节点
            // $("#li1~li").css("background","#ff0");
           
            // $("a[title]").css("color","#0f0");
           
            //页面中最先匹配的某个元素
            //alert($("li:first").html());
            //页面中最后匹配的元素
            //alert($("li:last").html());
            //获取满足要求的第一个li
            // $(".myList>li li:first-child").css("background","#f00");
            //获取没有兄弟节点的ul
            //alert($("ul:only-child").length);
        });
    </script>
</head>
<body>
<ul class="myList">
    <li>
    <a href=http://www.mamicode.com/"http://jquery.com">JQuery site
    <ul>
        <li><a href=http://www.mamicode.com/"css1.txt" title="mycss">CSS1
        <li id="li1"><a href=http://www.mamicode.com/"css2.pdf" title="css2">CSS2
        <li><a href=http://www.mamicode.com/"css3.html" title="this is my">CSS3
        <li>Basic XPath</li>
    </ul>
    </li>
    <li>JQuery also supports
        <ul>
            <li>Custom selectors</li>
            <li>Form selectors</li>
        </ul>
    </li>
</ul>
</body>
</html>
image

66讲 包装集jquery66_wrap01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>03_select</title>
    <meta name="author" content="Administrator" />
    <script type="text/javascript" src=http://www.mamicode.com/"jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function() {
           
            //获取tr的元素个数
            //alert($("tr").length);
           
            //当执行了get之后得到的结果是一个js的元素
            //$($("tr").get(1)).css("color","#f00");
           
            //判断id为abc的tr在包装集的位置
            // alert($("tr").index($("tr#abc")));
           
            //在表达式中通过,可以分割多个包装集,
            //但是如果包装集太多,而且有时候可以变动的时候,使用这种方式就不好操作
            //$("tbody tr:eq(2),tr#abc").css("color","#f00");
           
            /*
             * 可以为包装集使用add方法,可以将新加入的元素添加到包装集中
             */
            // $("tbody tr:eq(2)").add("thead tr td:eq(2)")
                // .add("tr td:contains(‘3‘)").css("color","#f00");
           
            //not方法可以将包装集中的元素取消掉   
            //$("tr").not("tr#abc").css("color","#f00");
           
            //获取tr中位置小于3的元素
            //$("tr").filter("tr:lt(3)").css("color","#f00");
           
            //获取tr中的1,3形成一个新的包装集,返回的值就是新的包装集
            // $("tr").css("background","#00f").slice(1,3).css("color","#f00");
           
            //从包装集的内部获取相应的元素,返回的值也是新包装集
            //$("table").find("tr#abc").css("color","#f00");
           
           //is表示的是当前的包装集中是否有某个元素,$(table)的包装集中只有一个元素table,所以没有td
            //alert($("table").is("td:contains(‘用户‘)"));
           
            //获取tbody中的所有元素为值等于3的tr子元素,返回的也是新包装集
            //$("tbody").children("tr:eq(3)").css("color","#f00");
           
            //找到下一个子元素,只是一个元素,返回新包装集
            // $("tr#abc").next().css("color","#ff0");
           
            //找到下一个组兄弟元素,所有元素,返回新包装集
            // $("tr#abc").nextAll().css("color","#0f0");
           
            //parent仅仅只是返回上一级的div,返回新包装集
            // $("#s1").parent("div").css("color","#0f0");
           
            //返回所有满足条件的父类节点,返回新包装集
            // $("#s1").parents("div").css("color","#f00");
           
            //返回第3个tr的所有兄弟节点,返回新包装集
            var a = $("tr:eq(2)").siblings("tr").css("color","#f00").is("tr#abc");
            alert(a);
        });
    </script>
</head>
<body>
<div id="d1">
    cdd
    <div>
        <span id="s1">abc</span>
    </div>
</div>
<table width="700" border="1" align="center">
    <thead>
        <tr>
            <td>用户标识</td>
            <td>用户姓名</td>
            <td>用户年龄</td>
            <td>用户密码</td>
        </tr>
    </thead>
    <tbody>
        <tr id="abc">
            <td>1</td>
            <td>张三</td>
            <td>23</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>33</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>13</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>4</td>
            <td>赵六</td>
            <td>45</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>5</td>
            <td>朱琪</td>
            <td>21</td>
            <td>abc123</td>
        </tr>
    </tbody>
</table>
</body>
</html>

image

67讲,包装集 juqery67_wrap02

<script type="text/javascript">
        $(function() {
            //使用end可以返回上一个包装集
             $("tr:eq(2)").siblings("tr")
                 .css("background","#00f").css("color","#fff")
                 .end().css("background","#f00").css("color","#100f");
       
            // $("#users tbody").clone().appendTo("#tus").find("tr:even").css("color","#f00")
                // .end().end().find("tr:odd").css("color","#00f");
           
            //andSelf表示把所有的包装集合并在一起
            //$("#users tbody").clone().appendTo("#tus").andSelf().find("td:contains(‘3‘)").css("color","#f00");
       
            //查询出了两个包装集,一个为tus的table一个为users的table,此时可以过滤得到users这个table
            //无法使用filter(tr)
            $("table").filter("table#users").css("color","#f00");
            //从users这个id的元素中过滤tr为2的元素
            $("#users").find("tr:eq(2)").css("background","#00f");
        });
    </script>
</head>
<body>
<table id="tus" width="700" border="1" align="center"></table>
<table width="700" border="1" align="center" id="users">
    <thead>
        <tr>
            <td>用户标识</td>
            <td>用户姓名</td>
            <td>用户年龄</td>
            <td>用户密码</td>
        </tr>
    </thead>
    <tbody>
        <tr id="abc">
            <td>1</td>
            <td>张三</td>
            <td>23</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>33</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>13</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>4</td>
            <td>赵六</td>
            <td>45</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>5</td>
            <td>朱琪</td>
            <td>21</td>
            <td>abc123</td>
        </tr>
    </tbody>
</table>
</body>
</html>
68_jquery07_jquery的each,map,has

/*
             * 通过map可以有效的将某个包装集中的元素转换为数组
             */
            var ps = $("tbody td:nth-child(1)").map(function(){
                var n = $(this).next("td");
                var p = {"id":$(this).html(),"name":n.html()};
                return p;
            }).get();
       
            for(var i=0;i<ps.length;i++) {
                alert(ps[i].name);
            }
        });

68讲 has用法

<script type="text/javascript">
        $(function() {
            //获取存在有ul的li,返回的是新包装集
            $("li").has("ul").css("color","#f00");
           
        //    $("div").has("span").css("color","#f00");
        });
    </script>
</head>
<body>
    <div>
        <span class="s1">ssssssssssssssssss</span>
    </div>
    <div>
        <span>
            2222222222222222222
        </span>
    </div>
   
    <div>
        <ul class="u1">
            <li>aaaaaaaaaaaaa</li>
        </ul>
    </div>
   
    <ul>
        <li>aaaa</li>
        <li>bbbb</li>
        <li>
            <ul>
                <li>cccccccc1</li>
                <li>cccccccc2</li>
            </ul>
        </li>
        <li>
            dddddd
        </li>
    </ul>
</body>
</html>

68讲 each

$(function() {
            var ns = $("tbody td:nth-child(2)");
            /**
             * 使用以下方法进行遍历基本上是基于js进行操作
             * 对于jquery有自己的一套遍历方法,可以直接通过
             * each函数进行遍历
             */
            /*for(var i=0;i<ns.length;i++) {
                var nn = ns[i];//nn已经是js的节点
                var id = $(ns[i]).prev("td").html();
                var age = $(ns[i]).next("td").html();
                nn.innerHTML = id+">>"+nn.innerHTML+"("+age+")";
            }*/
           
            /**
             * 对于JQuery而言,可以用each遍历所有的数组对象
             * each中的匿名函数n表示的是数组的下标,从0开始
             */
            ns.each(function(n){
                $(this).html($(this).prev("td").html()+
                    "."+$(this).html()+
                    "("+$(this).next("td").html()+")");   
                    //alert(n+"."+$(this).html());
            });
        });
    </script>
</head>
<body>
<table id="tus" width="700" border="1" align="center"></table>
<table width="700" border="1" align="center" id="users">
    <thead>
        <tr>
            <td>用户标识</td>
            <td>用户姓名</td>
            <td>用户年龄</td>
            <td>用户密码</td>
        </tr>
    </thead>
    <tbody>
        <tr id="abc">
            <td>1</td>
            <td>张三</td>
            <td>23</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>33</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>13</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>4</td>
            <td>赵六</td>
            <td>45</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>5</td>
            <td>朱琪</td>
            <td>21</td>
            <td>abc123</td>
        </tr>
    </tbody>
</table>
</body>
</html>

jquery-63-68讲