菜鸟学JQuery第三天----新浪的微博强大啊--彻底服了

昨天郁闷了....然后偷懒了，没给更新，今天一起补给大家。

今天先给大家几个简单的小例子

这个效果有啥那个用呢，呵呵，我想大概是怕点错行的效果吧

代码附上，具体的代码，我下面稍微讲解一下

<div>
        <p>
            第一行</p>
        <p>
            第二行</p>
        <p>
            第三行</p>
    </div>

上面这个是HTML的代码

然后下面的是Jquery

 1   <script src="jquery-1.5.1.min.js" type="text/javascript"></script>
 2 
 3     <script type="text/javascript">
 4         $(function() {
 5 
 6             $("p").click(function() {  //绑定事件，单击事件
 7                 $(this).css("background", "red");     //$(this)获取到当前单击元素 .css设置属性值
 8                 $(this).siblings().css("background", "Yellow");    //siblings()获取当前元素的兄弟元素
 9             });
10         });
11       //上面的那个siblings()大家要好好记忆一下，这个获取“兄弟元素的”办法以后可能会经常遇到
12     </script>

下面在介绍几个个方法

next()方法用于获取节点之后的挨着的第一个兄弟元素，你才会不会有nextAll()方法呢？你想学习，自己就去是

prev、prevAll兄弟中之前的元素

然后我们继续写另一个简单的例子

网站上面常用的评分控件，“你可能在百度文库的右上角见过”，也可能在”CSDN的下载频道见过“，不过我今天没给大家做效果好的，就是有小星星的那种，我只是做了几个简单的

效果，我用TABLE实现的，有兴趣的同学可以做一个图片的，也欢迎交流。“对了”。

昨天刚刚写完文章，就被别的网站采集走了，他们真强大，不过，采集文章“我要把版权写在这呢”？你那正则可以匹配掉吗？”文章版权归博客园KingDZ“所有我的博客http://www.cnblogs.com/hihell/

   <script src="jquery-1.5.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            $("#table1 td").css("cursor", "pointer");
            $("#table1 td").mousemove(function() {                //鼠标移动到控件上面的事件
                $("#table1 td").css("background", "red");
                $(this).nextAll("td").css("background", "white");  //这个就是nextAll()的用法了，关注一下吧
            });
        });
    </script>
当然下面的HTML代码是 
<body>
    <table id="table1" border="1">
        <tr>
            <td>
                 1
            </td>
            <td>
                 1
            </td>
            <td>
                 1
            </td>
            <td>
                 1
            </td>
            <td>
                 1
            </td>
        </tr>
    </table>
</body>

哦了，第三节课就是这些内容了，欢迎大家交流

posted @ 2011-05-12 20:26  KingDZ  阅读(4356)  评论(15)  编辑  收藏  举报