菜鸟学JQuery第四天----明天我策划的职业生涯大赛开始了，加油工作

又开始了，这节课开始就讲【链式编程】  我觉的“就是对象一棒棒向下传”

给大家先写一个简单的例子，开始了哦

首先给大家展示效果

单击文字“2”之后，产生了文字变形效果，我简单的做了一下，大家想实现更好的效果，我就不参与了，当然可以回帖子告诉我，我就喜欢交流新鲜的东东，对我自己的提高也有很大好处。

HTML打码如下。【注意table的ID就可以了】

<body>
    <table id="mytable">
        <tr>
            <td>
                1
            </td>
            <td>
                2
            </td>
            <td>
                3
            </td>
            <td>
                4
            </td>
        </tr>
    </table>
</body>

  <script type="text/javascript">
        $(function() {

            $("#mytable td").css("cursor", "pointer").click(function() {
                $(this).prevAll().next().html("我变形了");
            });
        });
       
    </script>

上面的JQuery就是我实现效果的源头了，当然效果还不是最重要的，关键是【链式编程】这种思路。

大家可以看到，

呵呵，链式编程思想说真的，这也是我学Jquery第一次简单，孤陋寡闻了，见笑了

学习---------兴趣第一

基本过滤选择器

首先你先在BODY里面添加一些DIV方便后面的操作。我就不添加代码了。

1>
         first 选取第一个元素。$("div:first")选取第一个<div>

2>

         last 选取最后一个元素。$("div:last")选取最后一个<div>

 3>

         not(选择器) 选取不满足“选择器”条件的元素，

         $("div:not(.myClass)")选取样式名不是myClass的<div>

4>     even、:odd，选取索引是奇数、偶数的元素的元素自己去是吧。

5>     eq(索引序号)、:gt(索引序号)、:lt(索引序号)选取索引等于、大于、小于索引序号

   这么多了，大家可能会有疑问，如何写类似  "1<x<4"  范围呢

然后告诉大家

下面这种写法可以解决。

$("tr:gt(1):lt(4)")   组合选择器是按照表达式从前向后进行数据过滤。  
当然，还有  
slice (start,end)  获取下标范围内元素   这种写法。。
还有两个不常见到的方法，我给大家写出来了

$(":header")选取所有的h1……h6元素 

$("div:animated")选取正在执行动画的<div>元素。 

之所以，这节课没有写太多的代码，主要是我考虑到，大伙可能只看代码，但是不去 尝试，所以没有给大伙将代码贴出来。

大家多多去尝试哦

下面的没有尝试完  不准偷看

<body>
<table id="table1">
<tr><td>姓名</td><td>成绩</td></tr>
<tr><td>张三</td><td>100</td></tr>
<tr><td>里斯</td><td>99</td></tr>
<tr><td>王五</td><td>98</td></tr>
<tr><td>赵六</td><td>97</td></tr>
<tr><td>王琦</td><td>97</td></tr>
<tr><td>平均分</td><td>98</td></tr>
</table>
</body>

  <script type="text/javascript">
        $(function() {
            $("#table1 tr:first").css("fontSize", "20");   //设置第一行的字体大小是20
            $("#table1 tr:last").css("color", "yellow");      //设置最后一行的颜色是黄色
            $("#table1 tr:gt(0):lt(3)").css({ "fontSize": "12" ,"background":"green"}); //设置第一到第三行是12行字体,背景是绿色（后面覆盖调背景了）
            $("#table1 tr:gt(0):even").css("background", "blue"); //设置奇数行，但是不包括第一行 
        });
    </script>

我晕，写的文章太快了，不让发表到一个地方了，哎，没办法，发布到JS板块了

posted @ 2011-05-12 21:09  KingDZ  阅读(1896)  评论(4)  编辑  收藏  举报