jQuery事件及DOM操作实例

今天新学了：each().index()主要还是四个案例。复习巩固事件，选择器和DOM操作
第一个实例
        $(function(){
            $("#checkAll").click(function(){
                $(":checkbox").attr("checked",true);
            })
            $("#checkNo").click(function(){
                $(":checkbox").attr("checked",false);
            })
            $("#reverse").click(function(){
                $(":checkbox").each(function(){
                    $(this).attr("checked",!$(this).attr("checked"));
                })
            })
        })
jQuery实现反选全选全不选、、、代码没什么难点。这里由之前没学过的each（），each()是遍历选中元素集合中的每

一个元素，基本可以当成for(var i=0;i<arr.length;i++){alert(arr[i]);}。this的使用以前用的不多。this不难理

解，用习惯就好。上面不是循环了吗。操作循环中的当前元素就用this就好。
第二个实例:精简商品列表
    $(function(){
        var $con = $("div:eq(0) ul li:gt(2):not(:last)");
        $con.hide();
        $(".showMore a span").toggle(function(){
            $con.show();
            $("showMore a span").text("显示精简品牌")
        },function(){
            $con.hide();
            $("showMore a span").text("显示全部品牌");
        })
    })
这个例子不好理解的地方在最开始的选择器。选择器这种东西，从开头看。一路看下来就懂了。就是有一些关键字符要

记住类似eq()...gt...#号和.   。。。。上面的筛选翻一下就是，从所有div标签中的第一个div，它下面的子元素中

的ul—》li，在li中筛选索引大于2的，除了最后一个。。。虽然说得麻烦。不过看起来还是挺清晰的。。。-__-||
第三个实例：选项卡
            $(function(){
            var $li = $(".tab_menu ul li");
            $li.click(function(){
                var $index = $li.index(this);
                $(".tab_content div").eq($index).show().siblings().hide();
                $(this).addClass("tab_selected").siblings().removeClass("tab_selected");
            }).hover(function(){
                $(this).addClass("hover");
            },function(){
                $(this).removeClass("hover");
            });
        })
选项卡。。。这东西超简单。。。觉得jQuery部分比CSS部分还简单。先选取出上部标签的元素，给所有上部标签绑定

一个点击事件。这样在函数里用$(this)可以获得点击的是哪个标签了。获得标签之后用index()获得他的索引值。。。

。index()这个函数是   元素集合.index(索引元素)    索引元素一定是在元素集合里，获得的索引值也是相对在这个

集合当中的。。。。琢磨了好久。。。坑死爹了。。。。有了索引值，下面的操作很一般，没什么可说的，不懂再问吧

。
第四个实例：用户名验证

    $(function(){
        $(":input.required").each(function(){
            var $required = $("<strong>*</strong>");
            $required.appendTo($(this).parent());
            //$(this).parent().append($required);
        });
        $(":input.required").blur(function(){
            //判断一下鼠标离开谁了
            if(this.id == "username"){
            $(".usertip").remove();
            //按照用户名的规则去验证
                if(this.value==''||this.value.length<6){
                    var $errmsg = $("<span class = usertip>这个用户名用不了啊

</span>")
                    $(this).parent().append($errmsg);
                }else{
                    var $msg = $("<span class = usertip>这个用户名可以用啊</span>")
                    $(this).parent().append($msg);
                }
            }
            if($(this).is("#email")){
                $(".emailtip").remove();
                var reg = /^\w{1,}@\w+\.\w+$/;
                var $email = $("#email").val();
                    if(!reg.test($email)){
                    var errMsg = "<span class='emailtip'>邮箱不合法</span>";
                    $(this).parent().append(errMsg);
                }else{
                    var Msg = "<span class='emailtip'>邮箱可以使用</span>";
                    $(this).parent().append(Msg);
                }
            }
        });
    })

这个在逻辑上没什么难点。只要分清楚次序就好了。无非就是添加节点删除节点。什么时候添加和删除看好就行了。。

。。至于正则。。。这东西比XML还坑爹。。。不予评论。。。
哦对了。。。这有个is()    这个。。。只是个很简单的判断。这种$(this).is("#email")和这种this.id ==

"username"写法是等价的。is就相当一个判断。#表示id很清楚吧。加上is的判断关系。大概is也能明白怎么用吧
甚至这东西直译都行。$(this).is("#email")直译就是，这个是id=email的吗。。。是就返回true，不是就是false喽