第二天学习jQuery的小小感受

接着昨天的学习今天继续进行jQuery的学习实践。

大体上是明白怎么个回事，但是具体用起来就不是看的时候那么回事了。我想我还是把我奋斗了一个半天还要多的代码贴了，以纪念这段比较深刻的教训。

<div>
    <div><input type="checkbox" id="email_gru" checked="checked" name="group" value="gru"/>gru</div>
    <div>
   
    <div><input type="checkbox" id="email_22_gru" checked="checked" name="email" value="aaa@qq.com" /> aaa@qq.com</div>
   
    <div><input type="checkbox" id="email_23_gru" checked="checked" name="email" value="aaa@qq.com" /> aaa@qq.com</div>
   
    <div><input type="checkbox" id="email_24_gru" checked="checked" name="email" value="cc.qq.com" /> cc.qq.com</div>
   
    <div><input type="checkbox" id="email_25_gru" checked="checked" name="email" value="ss.qq.com" /> ss.qq.com</div>
   
    <div><input type="checkbox" id="email_26_gru" checked="checked" name="email" value="zzzz.qq.com" /> zzzz.qq.com</div>
    
     </div> 
    </div>
   
    <div>
    <div><input type="checkbox" id="email_杀毒软件" checked="checked" name="group" value="杀毒软件"/>杀毒软件</div>
    <div>
   
    <div><input type="checkbox" id="email_32_杀毒软件" checked="checked" name="email" value="99@kaka.com" /> 99@kaka.com</div>
   
    <div><input type="checkbox" id="email_33_杀毒软件" checked="checked" name="email" value="ruixing@ruixing.com" /> ruixing@ruixing.com</div>
   
    <div><input type="checkbox" id="email_34_杀毒软件" checked="checked" name="email" value="kabasiji@kaba.com" /> kabasiji@kaba.com</div>
   
    <div><input type="checkbox" id="email_35_杀毒软件" checked="checked" name="email" value="avast@avast.com" /> avast@avast.com</div>
   
    <div><input type="checkbox" id="email_36_杀毒软件" checked="checked" name="email" value="jinshan@jinshan.com" /> jinshan@jinshan.com</div>
    
     </div> 
    </div>
   
    <div>
    <div><input type="checkbox" id="email_同桌" checked="checked" name="group" value="同桌"/>同桌</div>
    <div>
   
    <div><input type="checkbox" id="email_27_同桌" checked="checked" name="email" value="88888@qq.com" /> 88888@qq.com</div>
   
    <div><input type="checkbox" id="email_28_同桌" checked="checked" name="email" value="888@qq.com" /> 888@qq.com</div>
   
    <div><input type="checkbox" id="email_29_同桌" checked="checked" name="email" value="888@qq.com" /> 888@qq.com</div>
   
    <div><input type="checkbox" id="email_30_同桌" checked="checked" name="email" value="888@qq.com" /> 888@qq.com</div>
   
    <div><input type="checkbox" id="email_31_同桌" checked="checked" name="email" value="668@163.com" /> 668@163.com</div>
    
     </div> 
    </div>
   
    <input id="bt1" type="button" value="click"/>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#bt1").click(function () {
                var str = '';
                $("input[type='checkbox'][@checked][name='email']").each(function () {
                    if ($(this).attr("checked")) {
                        str = str + $(this).val()+';';
                    }
                });
                alert(str == '' ? 'please check ' : str);
            });
        });
       
        </script>
        <script language="javascript" type="text/javascript">
            $(document).ready(function () {
                $("input[type='checkbox'][name='group']").change(function () {
                    var str = $(this).val();
                    var bo = $(this).attr("checked");
                    $("input[id$='"+str+"']").each(function () {
                        $(this).attr("checked", bo);
                    });
                }
            );
            }
        );
        </script>

数了数一共写的代码不过十几行但就是让我痛苦了好长的时间，看来可以让人痛苦的不是多么庞大的东西，很小的一步过不去，就会让人心里不舒坦啊，时间长了指不定怎样呢。所以不可以轻视任何事情。页面的功能是显示用户的通讯录，通讯录中有分组，各分组中有联系人，在页面加载完成后，会看到，每一个分组下面的对应的联系人的各项内容，每一项是checkbox的形式，当点击checkbox的选择框时，如果点击的是组名，对应的改组成员全选或者取消全选，用jQuery的选择器。

　　出现的问题：刚开始没有注意到的是，each的使用，因为是和多个项有关的，所以需要循环调用；再就是需要查找以每组组名结尾的项，其中的的dollars符号应该写在等号的左边，我写在了右边，对了才怪呢，就这一个问题就够郁闷的，所以说计算机是一门严谨的学科，少一个分号，或者把符号的位置颠倒就会出问题，务必要严谨小心。