jqurey练习

最新推荐文章于 2025-06-10 12:41:12 发布
刘秦001
最新推荐文章于 2025-06-10 12:41:12 发布
阅读量224
点赞数
分类专栏： javaWeb 文章标签： html jquery
本文链接：https://blog.youkuaiyun.com/m0_51589257/article/details/123857539
版权
javaWeb 专栏收录该内容
9 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<style type="text/css">
        div, span, p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }

        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;
        }

        div.hide {
            display: none;
        }
    </style>-->
   <!-- <style type="text/css">
        select {
            width: 100px;
            height: 140px;
        }

        div {
            width: 130px;
            float: left;
            text-align: center;
        }
    </style>-->
   <!-- <style type="text/css">

        div{
            width:100px;
            height:260px;
        }

        div.border{
            border: 2px white solid;
        }

        div.redDiv{
            background-color: red;
        }

        div.blackDiv{
            border: 5px blue solid;
        }




    </style>-->
   <!-- <style type="text/css">
        *{ margin:0; padding:0;}
        body {font-size:12px;text-align:center;}
        a { color:#04D; text-decoration:none;}
        a:hover { color:#F50; text-decoration:underline;}
        .SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
        .SubCategoryBox ul { list-style:none;}
        .SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
        .showmore { clear:both; text-align:center;padding-top:10px;}
        .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}


        .promoted a { color:#F50;}
    </style>-->
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">

        /*window.οnlοad=function () {
            var btnObj=document.getElementById("btnId");
            btnObj.οnclick=function () {
                alert("js 原生的单击事件");

            }

        }*/
        $(function () {
            /*  var $btnObj=$("#btnId");
              $btnObj.click(function () {
                  alert("JQuery 的单击事件");

              });

          });*/
        /*$(function () {
            alert("页面加载完成后自动调用");

        })*/
       /* $("<div>"+
            "<span>div-span1</span>"+
            "<span>div-span1</span>"+
                "</div>").appendTo("body");*/
       /* $("<div>\n" +
            "        <span>btn01</span>\n" +
            "    </div>").appendTo("body"); */
        //alert($("button").length);
        /*var  btnObj=document.getElementById("btn01");
        alert($(btnObj));*/
        //alert($("button"));
        //alert($("<h1></h1>"));
       /* $(function () {
            var arr=[12,"abc",true];
            var $btns=$("button");
            for(var i=0;i<$btns.length;i++){
                alert($btns[i]);
            }

     */
        //document.getElementById("testDiv").innerHTML="这是dom对象的属性InnerHTML";
       /* $("#testDiv").click(function () {
            alert("click()是jQuery对象的方法");

        });*/ //没用
       /* alert(document.getElementById("testDiv"));
        alert($(document.getElementById("testDiv")));
        alert($(document.getElementById("testDiv"))[0]);
        alert($("button:first"));*/
          /*  $("#btn1").click(function () {
                $("#one").css("background-color","#bbffaa");

            });
            $("#btn2").click(function () {
                $(".mini").css("background-color","#bbffaa");

            });
            $("#btn3").click(function () {
                $("div").css("background-color","#bbffaa");

            });
            $("#btn4").click(function () {
                $("*").css("background-color","#bbffaa");

            });
            $("#btn5").click(function () {
                $("span,#two").css("background-color","#bbffaa");

            });*/
            /*$("#btn1").click(function () {
                $("body div").css("background","#bbffaa");

            });
            $("#btn2").click(function () {
                $("body>div").css("background","#bbffaa");

            });
            $("#btn3").click(function () {
                $("#one+div").css("background","#bbffaa");

            });
            $("#btn4").click(function () {
                $("#two+div").css("background","#bbffaa");

            });*/
           /* $("#btn1").click(function () {
                $("div:first").css("background-color","#bbffaa");

            });
            $("#btn2").click(function () {
                $("div:last").css("background-color","#bbffaa");

            });
            $("#btn3").click(function () {
                $("div:not(.one)").css("background-color","#bbffaa");

            });
            $("#btn4").click(function () {
                $("div:even").css("background-color","#bbffaa");

            });
            $("#btn5").click(function () {
                $("div:odd").css("background-color","#bbffaa");

            });
            $("#btn6").click(function () {
                $("div:gt(3)").css("background-color","#bbffaa");

            });
            $("#btn7").click(function () {
                $("div:eq(3)").css("background-color","#bbffaa");

            });
            $("#btn8").click(function () {
                $("div:lt(3)").css("background-color","#bbffaa");

            });
            $("#btn9").click(function () {
                $(":header").css("background-color","#bbffaa");

            });
            $("#btn10").click(function () {
                $(":animated").css("background-color","#bbffaa");

            });
            $("#btn11").click(function () {
                $("div:not(:animated):last").css("background-color","#bbffaa");

            });
*//*
            $("#btn1").click(function () {
                $("div:contains('di')").css("background-color","#bbffaa");

            });
            $("#btn2").click(function () {
                $("div:empty").css("background-color","#bbffaa");

            });
            $("#btn3").click(function () {
                $("div:has(.mini)").css("background-color","#bbffaa");

            });
            $("#btn4").click(function () {
                $("div:parent").css("background-color","#bbffaa");

            });*/

            /*$("#btn1").click(function () {
                $().css("background-color","#bbffaa");

            });
            $("#btn2").click(function () {
                $().show("slow").css("background-color","#bbffaa");

            });
            $("#btn3").click(function () {
               alert($().attr("value"));

            });*/
           /* $("#btn1").click(function () {
                $("div[title]").css("background-color","#bbffaa");

            });
            $("#btn2").click(function () {
                $("div[title='test']").css("background-color","#bbffaa");

            });
            $("#btn3").click(function () {
                $("div[title!='test']").css("background-color","#bbffaa");

            });
            $("#btn4").click(function () {
                $("div[title^='te']").css("background-color","#bbffaa");

            });
            $("#btn5").click(function () {
                $("div[title$='est']").css("background-color","#bbffaa");

            });
            $("#btn6").click(function () {
                $("div[title*='es']").css("background-color","#bbffaa");

            });
            $("#btn7").click(function () {
                $("div[id][title*='es']").css("background-color","#bbffaa");

            });
            $("#btn8").click(function () {
                $("div[title][title!='test']").css("background-color","#bbffaa");

            });
*/
           /* $("#btn1").click(function () {
                $(":text:enabled").val("万能");

            });
            $("#btn2").click(function () {
                $(":text:disabled").val("万能");

            });
            $("#btn3").click(function () {
                alert($(":checkbox:checked").length);

            });
            $("#btn4").click(function () {
               var $checkboies=$(":checkbox:checked");
               $checkboies.each(function () {
                   alert(this.value);

               });

            });
            $("#btn5").click(function () {
                var $options=$("select option:selected");
                $options.each(function () {
                    alert(this.innerHTML);

                });

            });*/
           /* $("#btn1").click(function () {
                $("div").eq(3).css("background-color","#bbffaa");

            });
            $("#btn2").click(function () {
                $("div").first().css("background-color","#bbffaa");

            });
            $("#btn3").click(function () {
                $("div").last().css("background-color","#bbffaa");

            });
            $("#btn4").click(function () {
                $("div").filter(":even").css("background-color","#bbffaa");

            });
            $("#btn5").click(function () {
                alert($("div").is(":empty"));

            });
            $("#btn6").click(function () {
                $("div").has(".mini").css("background-color","#bbffaa");

            });
            $("#btn7").click(function () {
                $("div").not('.one').css("background-color","#bbffaa");

            });
            $("#btn8").click(function () {
                $("body").children("div.one").css("background-color","#bbffaa");

            });
            $("#btn9").click(function () {
                $("body").find("div.mini").css("background-color","#bbffaa");

            });
            $("#btn10").click(function () {
                $("#one").next("div").css("background-color","#bbffaa");

            });
            $("#btn11").click(function () {
                $("#one").nextAll("span").css("background-color","#bbffaa");

            });
            $("#btn12").click(function () {
                $("#one").nextUntil("span").css("background-color","#bbffaa");

            });
            $("#btn13").click(function () {
                $(".mini").parent().css("background-color","#bbffaa");

            });
            $("#btn14").click(function () {
                $("#two").prev("div").css("background-color","#bbffaa");

            });
            $("#btn15").click(function () {
                $("span").prevAll("div").css("background-color","#bbffaa");

            });
            $("#btn16").click(function () {
                $("span").prevUntil("#one").css("background-color","#bbffaa");

            });
            $("#btn17").click(function () {
                $("#two").siblings().css("background-color","#bbffaa");

            });
            $("#btn18").click(function () {
                $("span").add("#two").add("#one").css("background-color","#bbffaa");

            });*/
           /* $("p").click(function () {
                alert("^^"+$(this).text());

            });
            $("table:eq(1) tr:even").css("background","#aaffbb");
            $(":button").click(function () {
                alert($(":checkbox:checked").length);

            });*/
           /* var $items=$(":checkbox[name=items]");
            var items=$("[name='items']");
            $("#checkedAllBtn").click(function () {
                items.attr("checked",true);
                $("#checkedAllBox").attr("checked",true);

            });
            $("#checkedNoBtn").click(function () {
                items.attr("checked",false);
                $("#checkedAllBox").attr("checked",false);

            });
            $("#checkedRevBtn").click(function () {
                items.each(function () {
                    this.checked=!this.checked;
                });
                var flag=$("[name='items']:checked").length==4;
                $("checkedAllBox").attr("checked",flag);

            });
            $("#sendBtn").click(function () {
                $(":checkbox[name='items']:checked").each(function () {
                    alert(this.value);

                });

            });
            $("#checkedAllBox").click(function () {
                items.attr("checked",this.checked);

            });
            $("[name='items']").click(function () {
                var flag=$("[name='items']:checked").length==4;
                $("#checkedAllBox").attr("checked",flag);

            });*/
          /*  $("input[type=button]:eq(0)").click(function () {
                $("#single").val(["s3"]);

            });
            $("input[type=button]:eq(1)").click(function () {
                $("#multiple").val(["x2","x4"]);

            });
            $("input[type=button]:eq(2)").click(function () {
                $(":checkbox").val(["check2","check4"]);

            });
            $("input[type=button]:eq(3)").click(function () {
                $(":radio").val(["radio2"]);

            });
            $("input[type=button]:eq(4)").click(function () {
                $("single")
                    .add("#multiple")
                    .add(":checkbox:checked")
                    .add(":radio:checked")
                    .each(function () {
                        alert($(this).val());

                    });

            });*/
            /*$("button:eq(0)").click(function () {
                $("select[name=sel01] :selected").each(function () {
                    $(this).appendTo("select[name=sel02]");

                });

            });

            $("button:eq(1)").click(function () {
                $("select[name=sel01] option").each(function () {
                    $(this).appendTo("select[name=sel02]");

                });

            });
            $("button:eq(2)").click(function () {
                $("select[name=sel02] :selected").each(function () {
                    $(this).appendTo("select[name=sel01]");

                });

            });
            $("button:eq(3)").click(function () {
                $("select[name=sel02] option").each(function () {
                    $(this).appendTo("select[name=sel01]");

                });

            });
*/
            /*function delA() {
                var name=$(this).parents("tr").find("td:eq(0)").text();
                var flag=confirm("确认删除"+name+"吗？");
                if (flag) {
                    $(this).parents("tr").remove();//parent()是直接父元素，parents是所有祖先
                }
                return false;
            }
            $("a").live("click",delA);
            $("#addEmpButton").click(function () {
                var name=$("#empName").val();
                var email=$("#email").val();
                var salary=$("#salary").val();

                $("<tr></tr>").append("<td>"+name+"</td>")
                                .append("<td>"+email+"</td>")
                                .append("<td>"+salary+"</td>")
                                .append("<td><a href='#'>Deleted</a></td>")
                                .appendTo("#employeeTable");


            });*/
           /* var $divEle=$('div:first');
            $('#btn01').click(function () {
                $divEle.addClass("redDiv blackDiv");

            });

            $('#btn02').click(function () {
                $divEle.removeClass()

            });
            $('#btn03').click(function () {
                $divEle.toggleClass("redDiv");

            });
            $('#btn04').click(function () {
                var os=$divEle.offset();
                alert("顶边距："+os.top+"左边距："+os.left);
                $divEle.offset({
                    top:50,
                    left:60
                });

            });
*/
         /*   $("#btn1").click(function () {
                $("#div1").show(1000);

            });
            $("#btn2").click(function () {
                $("#div1").hide(2000);

            });
            $("#btn3").click(function () {
                $("#div1").toggle(1000);

            });
            $("#btn4").click(function () {
                $("#div1").fadeIn(500);

            });
            $("#btn5").click(function () {
                $("#div1").fadeOut(500);

            });
            $("#btn6").click(function () {
                $("#div1").fadeTo("slow",Math.random());

            });
            $("#btn7").click(function () {
                $("#div1").fadeToggle("slow","linear");

            });
*/
           /* var category=$("ul:first li:gt(5):not(:last)");
            category.hide();
            var $promoptedCategory=$("ul:first li").filter(":contains('佳能'),：contains('尼康'),:contains('奥林巴斯')");
            $(".showmore a").click(function () {
                if (category.is(":hidden")){
                    category.show();
                    $promoptedCategory.addClass("promoted");
                    $(".showmore a span").text("显示精简品牌")
                                            .css("background","url(img.down.gif no-repeat 0 0");
                }else {
                    category.hide();
                    $promoptedCategory.removeClass("promoted");
                    $(".showmore a span").text("显示全部品牌")
                                        .css("background","url(img.down.gif no-repeat 0 0");
                }
                return false;

            });*/
            


            });

        /*$(function () {
            function anmateIt() {
                    $("#mover").slideToggle("slow",anmateIt);
                }
                anmateIt();
        });*/



    </script>
</head>
<body>
  <!--  <button id="btnId">SayHello</button>
    <button>SayHello</button>
    <button>SayHello</button>
    <div>
        <span>btn01</span>
    </div>-->
   <!-- <div id="testDiv">Atguigu is Very Good!</div>

    <button id="dom2dom">使用DOM对象调用DOM方法</button>
    <button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
    <button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
    <button id="jQuery2dom">使用jQuery对象调用DOM方法</button>-->

  <!--<input type="button" value="选择 id 为 one 的元素" id="btn1" />
  <input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
  <input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
  <input type="button" value="选择 所有的元素" id="btn4" />
  <input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />

  <br>
  <div class="one" id="one">
      id 为 one,class 为 one 的div
      <div class="mini">class为mini</div>
  </div>
  <div class="one" id="two" title="test">
      id为two,class为one,title为test的div
      <div class="mini" title="other">class为mini,title为other</div>
      <div class="mini" title="test">class为mini,title为test</div>
  </div>
  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>
  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini" title="tesst">class为mini,title为tesst</div>
  </div>
  <div style="display:none;" class="none">style的display为"none"的div</div>
  <div class="hide">class为"hide"的div</div>
  <div>
      包含input的type为"hidden"的div<input type="hidden" size="8">
  </div>
  <span class="one" id="span">^^span元素^^</span>-->
  <!--<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
  <input type="button" value="在 body 内, 选择div子元素" id="btn2" />
  <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
  <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
  <br><br>
  <div class="one" id="one">
      id 为 one,class 为 one 的div
      <div class="mini">class为mini</div>
  </div>
  <div class="one" id="two" title="test">
      id为two,class为one,title为test的div
      <div class="mini" title="other">class为mini,title为other</div>
      <div class="mini" title="test">class为mini,title为test</div>
  </div>
  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>
  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini" title="tesst">class为mini,title为tesst</div>
  </div>
  <div style="display:none;" class="none">style的display为"none"的div</div>
  <div class="hide">class为"hide"的div</div>
  <div>
      包含input的type为"hidden"的div<input type="hidden" size="8">
  </div>
  <span id="span">^^span元素^^</span>-->
  <!--<input type="button" value="选择第一个 div 元素" id="btn1" />
  <input type="button" value="选择最后一个 div 元素" id="btn2" />
  <input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
  <input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
  <input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
  <input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
  <input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
  <input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
  <input type="button" value="选择所有的标题元素" id="btn9" />
  <input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />
  <input type="button" value="选择没有执行动画的最后一个div" id="btn11" />
-->
  <!--<input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
  <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
  <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
  <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
-->
<!--
  <input type="button" value="选取所有可见的  div 元素" id="btn1">
  <input type="button" value="选择所有不可见的 div 元素" id="btn2" />
  <input type="button" value="选择所有不可见的 input 元素" id="btn3" />
-->
 <!-- <input type="button" value="选取含有 属性title 的div元素." id="btn1" style="display: none;"/>
  <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />
  <input type="button"
         value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" />
  <input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" />
  <input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" />
  <input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" />
  <input type="button"
         value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素."
         id="btn7" />
  <input type="button"
         value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" />
-->
 <!-- <input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
  <input type="button" value="first()选择第一个 div 元素" id="btn2" />
  <input type="button" value="last()选择最后一个 div 元素" id="btn3" />
  <input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
  <input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />
  <input type="button" value="has()选择div中包含.mini的" id="btn6" />
  <input type="button" value="not()选择div中class不为one的" id="btn7" />
  <input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
  <input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
  <input type="button" value="next()#one的下一个div" id="btn10" />
  <input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
  <input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />
  <input type="button" value="parent().mini的父元素" id="btn13" />
  <input type="button" value="prev()#two的上一个div" id="btn14" />
  <input type="button" value="prevAll()span前面所有的div" id="btn15" />
  <input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
  <input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
  <input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />
-->
 <!-- <h3>基本选择器.</h3>
  <br><br>
  <div class="one" id="one">
      id 为 one,class 为 one 的div
      <div class="mini">class为mini</div>
  </div>
  <div class="one" id="two" title="test">
      id为two,class为one,title为test的div
      <div class="mini" title="other">class为mini,title为other</div>
      <div class="mini" title="test">class为mini,title为test</div>
  </div>
  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>
  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini" title="tesst">class为mini,title为tesst</div>
  </div>
  <div style="display:none;" class="none">style的display为"none"的div</div>
  <div class="hide">class为"hide"的div</div>
  <div>
      包含input的type为"hidden"的div<input type="hidden" size="8">
  </div>
  <div id="mover">正在执行动画的div元素.</div>-->
  <!--<h3>基本选择器.</h3>
  <br /><br />
  文本框<input type="text" name="account" disabled="disabled" />
  <br><br>
  <div class="one" id="one">
      id 为 one,class 为 one 的div
      <div class="mini">class为mini</div>
  </div>
  <div class="one" id="two" title="test">
      id为two,class为one,title为test的div
      <div class="mini" title="other"><b>class为mini,title为other</b></div>
      <div class="mini" title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>
  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini" title="tesst">class为mini,title为tesst</div>
  </div>
  <div style="display:none;" class="none">style的display为"none"的div</div>
  <div class="hide">class为"hide"的div</div>
  <span id="span1">^^span元素 111^^</span>
  <div>
      包含input的type为"hidden"的div<input type="hidden" size="8">
  </div>
  <span id="span2">^^span元素 222^^</span>
  <div id="mover">正在执行动画的div元素.</div>-->

 <!-- <h3>表单对象属性过滤选择器</h3>
  <button id="btn1">对表单内 可用input 赋值操作.</button>
  <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
  <button id="btn3">获取多选框选中的个数.</button>
  <button id="btn4">获取多选框选中的内容.</button><br /><br />
  <button id="btn5">获取下拉框选中的内容.</button><br /><br />-->

 <!-- <form id="form1" action="#">
      可用元素: <input name="add" value="可用文本框1"/><br>
      不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
      可用元素: <input name="che" value="可用文本框2"/><br>
      不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
      <br>

      多选框: <br>
      <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
      <input type="checkbox" name="newsletter" value="test2" />test2
      <input type="checkbox" name="newsletter" value="test3" />test3
      <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
      <input type="checkbox" name="newsletter" value="test5" />test5

      <br><br>
      下拉列表1: <br>
      <select name="test" multiple="multiple" style="height: 100px" id="sele1">
          <option>浙江</option>
          <option selected="selected">辽宁</option>
          <option>北京</option>
          <option selected="selected">天津</option>
          <option>广州</option>
          <option>湖北</option>
      </select>

      <br><br>
      下拉列表2: <br>
      <select name="test2">
          <option>浙江</option>
          <option>辽宁</option>
          <option selected="selected">北京</option>
          <option>天津</option>
          <option>广州</option>
          <option>湖北</option>
      </select>
  </form>-->
  <!--<p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>

  <table>
      <tr>
          <td>第一行</td><td>第一行</td>
      </tr>
      <tr>
          <td>第一行</td><td>第一行</td>
      </tr>
      <tr>
          <td>第一行</td><td>第一行</td>
      </tr>
      <tr>
          <td>第一行</td><td>第一行</td>
      </tr>
      <tr>
          <td>第一行</td><td>第一行</td>
      </tr>
      <tr>
          <td>第一行</td><td>第一行</td>
      </tr>
  </table>

  <table>
      <tr>
          <td>第一行</td><td>第一行</td>
      </tr>
      <tr>
          <td>第一行</td><td>第一行</td>
      </tr>
      <tr>
          <td>第一行</td><td>第一行</td>
      </tr>
      <tr>
          <td>第一行</td><td>第一行</td>
      </tr>
      <tr>
          <td>第一行</td><td>第一行</td>
      </tr>
      <tr>
          <td>第一行</td><td>第一行</td>
      </tr>
  </table>

  <input type="checkbox" name="test" />
  <input type="checkbox" name="test" />
  <input type="checkbox" name="test" />
  <input type="checkbox" name="test" />
  <input type="checkbox" name="test" />
  <input type="checkbox" name="test" />
  <button>您选中的个数</button>-->
  <!--<form method="post" action="">

      你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

      <br />
      <input type="checkbox" name="items" value="足球" />足球
      <input type="checkbox" name="items" value="篮球" />篮球
      <input type="checkbox" name="items" value="羽毛球" />羽毛球
      <input type="checkbox" name="items" value="乒乓球" />乒乓球
      <br />
      <input type="button" id="checkedAllBtn" value="全　选" />
      <input type="button" id="checkedNoBtn" value="全不选" />
      <input type="button" id="checkedRevBtn" value="反　选" />
      <input type="button" id="sendBtn" value="提　交" />
  </form>-->
  <!--<input type="button" value="使单选下拉框的'选择3号'被选中"/>
  <input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br>
  <input type="button" value="使多选框的'多选2'和'多选4'被选中"/>
  <input type="button" value="使单选框的'单选2'被选中"/><br>
  <input type="button" value="打印已经被选中的值"><br>

  <br/>

  <select id="single" name="singlecheck">
      <option value="s1">选择1号</option>
      <option value="s2">选择2号</option>
      <option value="s3">选择3号</option>
  </select>

  <select id="multiple" multiple="multiple" name="multiplecheck" style="height:120px;">
      <option selected="selected" value="x1">选择1号</option>
      <option value="x2">选择2号</option>
      <option value="x3">选择3号</option>
      <option value="x4">选择4号</option>
      <option selected="selected" value="x5">选择5号</option>
  </select>

  <br/><br/>

  <input type="checkbox" name="c" value="check1"/> 多选1
  <input type="checkbox" name="c" value="check2"/> 多选2
  <input type="checkbox" name="c" value="check3"/> 多选3
  <input type="checkbox" name="c" value="check4"/> 多选4

  <br/>

  <input type="radio" name="r" value="radio1"/> 单选1
  <input type="radio" name="r"  value="radio2"/> 单选2
  <input type="radio" name="r"  value="radio3"/> 单选3
-->
 <!-- <div id="left">
      <select multiple="multiple" name="sel01">
          <option value="opt01">选项1</option>
          <option value="opt02">选项2</option>
          <option value="opt03">选项3</option>
          <option value="opt04">选项4</option>
          <option value="opt05">选项5</option>
          <option value="opt06">选项6</option>
          <option value="opt07">选项7</option>
          <option value="opt08">选项8</option>
      </select>

      <button>选中添加到右边</button>
      <button>全部添加到右边</button>
  </div>
  <div id="rigth">
      <select multiple="multiple" name="sel02">
      </select>
      <button>选中删除到左边</button>
      <button>全部删除到左边</button>
  </div>
-->
 <!-- <table id="employeeTable">
  <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Salary</th>
      <th>&nbsp;</th>
  </tr>
  <tr>
      <td>Tom</td>
      <td>tom@tom.com</td>
      <td>5000</td>
      <td><a href="#">Delete</a></td>
  </tr>
  <tr>
      <td>Jerry</td>
      <td>jerry@sohu.com</td>
      <td>8000</td>
      <td><a href="#">Delete</a></td>
  </tr>
  <tr>
      <td>Bob</td>
      <td>bob@tom.com</td>
      <td>10000</td>
      <td><a href="#">Delete</a></td>
  </tr>
  </table>

  <div id="formDiv">

      <h4>添加新员工</h4>

      <table>
          <tr>
              <td class="word">name: </td>
              <td class="inp">
                  <input type="text" name="empName" id="empName" />
              </td>
          </tr>
          <tr>
              <td class="word">email: </td>
              <td class="inp">
                  <input type="text" name="email" id="email" />
              </td>
          </tr>
          <tr>
              <td class="word">salary: </td>
              <td class="inp">
                  <input type="text" name="salary" id="salary" />
              </td>
          </tr>
          <tr>
              <td colspan="2" align="center">
                  <button id="addEmpButton" value="abc">
                      Submit
                  </button>
              </td>
          </tr>
      </table>

  </div>-->
  <!--<table align="center">
      <tr>
          <td>
              <div class="border">
              </div>
          </td>

          <td>
              <div class="btn">
                  <input type="button" value="addClass()" id="btn01"/>
                  <input type="button" value="removeClass()" id="btn02"/>
                  <input type="button" value="toggleClass()" id="btn03"/>
                  <input type="button" value="offset()" id="btn04"/>
              </div>
          </td>
      </tr>
  </table>-->
 <!-- <table style="float: left;">
      <tr>
          <td><button id="btn1">显示show()</button></td>
      </tr>
      <tr>
          <td><button id="btn2">隐藏hide()</button></td>
      </tr>
      <tr>
          <td><button id="btn3">显示/隐藏切换 toggle()</button></td>
      </tr>
      <tr>
          <td><button id="btn4">淡入fadeIn()</button></td>
      </tr>
      <tr>
          <td><button id="btn5">淡出fadeOut()</button></td>
      </tr>
      <tr>
          <td><button id="btn6">淡化到fadeTo()</button></td>
      </tr>
      <tr>
          <td><button id="btn7">淡化切换fadeToggle()</button></td>
      </tr>
  </table>

  <div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
      jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
  </div>
-->
  <div class="SubCategoryBox">
      <ul>
          <li ><a href="#">佳能</a><i>(30440) </i></li>
          <li ><a href="#">索尼</a><i>(27220) </i></li>
          <li ><a href="#">三星</a><i>(20808) </i></li>
          <li ><a href="#">尼康</a><i>(17821) </i></li>
          <li ><a href="#">松下</a><i>(12289) </i></li>
          <li ><a href="#">卡西欧</a><i>(8242) </i></li>
          <li ><a href="#">富士</a><i>(14894) </i></li>
          <li ><a href="#">柯达</a><i>(9520) </i></li>
          <li ><a href="#">宾得</a><i>(2195) </i></li>
          <li ><a href="#">理光</a><i>(4114) </i></li>
          <li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
          <li ><a href="#">明基</a><i>(1466) </i></li>
          <li ><a href="#">爱国者</a><i>(3091) </i></li>
          <li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
      </ul>
      <div class="showmore">
          <a href="more.html"><span>显示全部品牌</span></a>
      </div>
  </div>

</body>
</html>