jquery-63-68讲

浏览数：56 / 时间：2015年06月09日

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>

结果：

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://为开头

            // $("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://jquery.com">JQuery site</a>
    <ul>
        <li><a href="css1.txt" title="mycss">CSS1</a></li>
        <li id="li1"><a href="css2.pdf" title="css2">CSS2</a></li>
        <li><a href="css3.html" title="this is my">CSS3</a></li>
        <li>Basic XPath</li>
    </ul>
    </li>
    <li>JQuery also supports
        <ul>
            <li>Custom selectors</li>
            <li>Form selectors</li>
        </ul>
    </li>
</ul>
</body>
</html>

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="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>

67讲，包装集 juqery67_wrap02

/*
             * 通过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用法

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>