• 中文
    • English
  • 注册
  • 查看作者
  • 4:jQuery选择器

    一.  基本选择器

    1.  ID选择器:$(“#ID“):根据ID名来选择

    2.  元素选择器:$(“element“):根据元素名来选择

    3.  类选择器:$(“.class“):根据类名来选择

    4.  通用选择器:$(“*”):选择所有的元素

    5.  群组选择器:$(“selector1,selector2,……“):选择多个选择器的并集

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <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>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#btn1").click(function () {
                    //选择 id 为 one 的元素
                    $("#one").css("background-color","blue");
                });
            });
            $(function () {
                $("#btn2").click(function () {
                    //选择 class 为 mini 的所有元素"
                    $(".mini").css("background-color","blue");
                });
            });
            $(function () {
                $("#btn3").click(function () {
                    //选择 元素名是 div 的所有元素
                    $("div").css("background-color","blue");
                });
            });
            $(function () {
                $("#btn4").click(function () {
                    //选择 所有的元素
                    $("*").css("background-color","blue");
                });
            });
            $(function () {
                $("#btn5").click(function () {
                    //选择 所有的 span 元素和id为two的元素
                    $("span,#two").css("background-color","blue");
                });
            });
        </script>
    </head>
    <body>
    <input type="button" id="btn1" value="选择 id 为 one 的元素" />
    <input type="button" id="btn2" value="选择 class 为 mini 的所有元素" />
    <input type="button" id="btn3" value="选择 元素名是 div 的所有元素" />
    <input type="button" id="btn4" value="选择 所有的元素" />
    <input type="button" id="btn5" value="选择 所有的 span 元素和id为two的元素" />
    
    <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>
    </body>
    </html>

    二.  层级选择器

    1.  后代选择器:$(“ancestor  descendant“):在给定的祖先元素下匹配所有的后代元素,可以理解为选择爷爷的所有儿子以及孙子。比如匹配ancestor元素下的所有descendant元素

    2.  子元素选择器:$(“parent>child“):在给定的元素下匹配所有的元素,可以理解为爷爷的儿子,爷爷的孙子不匹配

    3.  兄弟选择器:$(“prev+ next“):匹配所有紧接在 prev 元素后的 next 元素

    4.  兄弟选择器:$(“previnput“):匹配 prev 元素之后的所有 siblings 元素

    举一个最简单的例子,感受一下两种兄弟选择器的区别。

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                // $("div~h2").css("background-color","red");//4 5 7变色
                //  $("div").siblings().css("background-color","red"); //1 2 4 5 7变色
                            //  $("div").siblings('h2').css("background-color","red"); //2 4 5 7变色
                $("div+h2").css("background-color","red"); //4 变色
            });
        </script>
    
    </head>
    <body>
    <h3>1</h3>
    <h2>2</h2>
    <div id="zhangjia">
    3
    </div>
    <h2>4</h2>
    <h2>5</h2>
    <h3>6</h3>
    <h2>7</h2>

    层级选择器的综合例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <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>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#btn1").click(function () {
                    //选择 body 内的所有 div 元素
                    $("body div").css("background-color","yellow");
                });
                $("#btn2").click(function () {
                    //选择 body的div子元素
                    $("body>div").css("background-color","yellow");
                });
                $("#btn3").click(function () {
                    //选择 id 为 one 的下一个 div 元素
                    $("#one+div").css("background-color","yellow");
                });
                $("#btn4").click(function () {
                    //选择 id 为 two 的元素后面的所有 div 兄弟元素
                    $("#two~div").css("background-color","yellow");
                });
                $("#btn5").click(function () {
                    // 选择 id 为 two 的元素所有 div 兄弟元素
                    $("#two").siblings("div").css("background-color","yellow");
                });
                $("#btn6").click(function () {
                    //选择 id 为 one 的后面的所有 span 元素
                    $("#one").nextAll("span").css("background-color","yellow");
    
                });
                $("#btn7").click(function () {
                    //选择 id 为 two 的元素前边的所有的 div 兄弟元素
                    $("#two").prevAll("div").css("background-color","yellow");
                });
    
            });
        </script>
    </head>
    <body>
    <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"/>
    <input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5"/>
    <input type="button" value="选择 id 为 one 的后面的所有 span 元素" id="btn6"/>
    <input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7"/>
    
    <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>
    <span>--span元素--</span>
    </body>
    </html>

    三.  基本选择器

    :first —> 获取第一个元素

    :last —> 获取最后个元素

    :not(selector)  选择器匹配非指定元素/选择器的每个元素(也就是说selector加不加引号都可以)

    :even  —>  匹配所有索引值为偶数的元素,从 0 开始计数 示例

    :odd  —> 匹配所有索引值为奇数的元素,从 0 开始计数

    :eq(index)  —> 匹配一个给定索引值的元素,从 0 开始计数

    :gt(index)  —> 匹配所有大于给定索引值的元素,从 0 开始计数

    :lt(index)  —> 匹配所有小于给定索引值的元素,从 0 开始计数

    :head(index)   —>  匹配所有的标题元素

    :animated   —>  匹配所有正在执行动画效果的元素

    :focus   —>  匹配当前获取焦点的元素。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <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>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function () {
                function animate() {
                    $("#mover").slideToggle("slow", animate);
                }
                animate();
                $("#btn1").click(function () {
                    //选择第一个 div 元素
                    $("div:first").css("background-color","yellow");
                });
                $("#btn2").click(function () {
                    //选择最后一个 div 元素
                    $("div:last").css("background-color","yellow");
                });
                $("#btn3").click(function () {
                    //选择class不为 one 的所有 div 元素
                    $("div:not(.one)").css("background-color","yellow");
                });
                $("#btn4").click(function () {
                    //选择索引值为偶数的 div 元素
                    $("div:even").css("background-color","yellow");
                });
                $("#btn5").click(function () {
                    //选择索引值为奇数的 div 元素
                    $("div:odd").css("background-color","yellow");
                });
                $("#btn6").click(function () {
                    //选择索引值为大于 3 的 div 元素
                    $("div:gt(3)").css("background-color","yellow");
                });
                $("#btn7").click(function () {
                    //选择索引值为等于 3 的 div 元素
                    $("div:eq(3)").css("background-color","yellow");
                });
                $("#btn8").click(function () {
                    //选择索引值为小于 3 的 div 元素
                    $("div:lt(3)").css("background-color","yellow");
                });
                $("#btn9").click(function () {
                    //选择所有的标题元素
                    $(":header").css("background-color","yellow");
                });
                $("#btn10").click(function () {
                    //选择当前正在执行动画的所有元素
                    $(":animated").css("background-color","yellow");
                });
                $("#btn11").click(function () {
                    //选择 id 为 two 的下一个 span 元素
                    $("#two").nextAll("span:first").css("background-color","yellow");
                });
            });
        </script>
    </head>
    <body>
    <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="选择 id 为 two 的下一个 span 元素" id="btn11"/>
    
    <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>
    <span id="span">^^span元素 111^^</span>
    <span>^^span元素 222^^</span>
    <div id="mover">正在执行动画的div元素.</div>
    </body>
    </html>

    四.  内容选择器

    :contains(text)  —>  匹配包含给定文本的元素(text加不加引号都可以)

    :empty   —>  匹配所有不包含子元素或者文本的空元素

    :has(selector)   —>  匹配含有选择器所匹配的元素的元素,注意和contains区分。(selector加不加引号都可以)

    :parent   —>  匹配含有子元素或者文本的元素

    <!DOCTYPE html>
    <html>
    
       <head>
          <meta charset="UTF-8">
          <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>
          <script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
          <script type="text/javascript">
             $(function(){
                $("#btn1").click(function(){
                   //选择 含有文本 'di' 的 div 元素
                   $("div:contains('di')").css("background-color","yellow");
                });
                $("#btn2").click(function(){
                   //选择不包含子元素(或者文本元素) 的 div 空元素
                   $("div:empty").css("background-color","yellow");
                });
                $("#btn3").click(function(){
                   //选择含有 class 为 mini 元素的 div 元素
                   $("div:has(.mini)").css("background-color","yellow");
                });
                $("#btn4").click(function(){
                   //选择含有子元素(或者文本元素)的div元素
                   //方法一:
                   // $("div:parent").css("background-color","yellow");
                   //方法二
                   $("div:not(:empty)").css("background-color","yellow");
                });
             });
          </script>
       </head>
    
       <body>
          <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" />
    
          <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>
       </body>
    
    </html>

    五.  可见性选择器

    :hidden    —>  匹配所有不可见元素,或者type为hidden的元素

    :visible    —>  匹配所有的可见元素

    <!DOCTYPE html>
    <html lang="en">
       <head>
          <meta charset="UTF-8">
          <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>
          <script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
          <script type="text/javascript">
             $(function(){
                $("#btn1").click(function(){
                   //选取所有可见的 div 元素
                   $("div:visible").css("background-color","yellow");
                });
                $("#btn2").click(function(){
                   //选择所有不可见的 div 元素
                   /*
                   jquery方法的返回值还是jQuery对象
                    */
                   //为了查看方便,使用show方法,在1秒显示出来
                   $("div:hidden").show(1000).css("background-color","yellow");
                });
                $("#btn3").click(function(){
                   //选择所有不可见的 input 元素
                   alert($("input:hidden").val());
                });
             });
          </script>
       </head>
    
       <body>
          <input type="button" value="选取所有可见的  div 元素" id="btn1">
          <input type="button" value="选择所有不可见的 div 元素" id="btn2" />
          <input type="button" value="选择所有不可见的 input 元素" id="btn3" />
    
          <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" value="Hello">
          </div>
       </body>
    
    </html>

    六.  属性

    [attribute] :匹配包含给定属性的元素。

    [attribute=value] :匹配给定的属性是某个特定值的元素。

    [attribute!=value] :匹配所有不含有指定的属性,或者属性不等于特定值的元素。此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])或者:[attr]([attr!=value])

    [attribute^=value] :匹配给定的属性是以某些值开始的元素

    [attribute$=value] :匹配给定的属性是以某些值结尾的元素

    [attribute*=value] :匹配给定的属性是以包含某些值的元素

    [attrSel1][attrSel2][attrSelN] :复合属性选择器,需要同时满足多个条件时使用。

    <!DOCTYPE html>
    <html lang="en">
       <head>
          <meta charset="UTF-8">
          <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>
          <script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
          <script type="text/javascript">
             $(function(){
                $("#btn1").click(function(){
                   //选取含有 属性title 的div元素
                   $("div[title]").css("background-color","yellow");
                });
                $("#btn2").click(function(){
                   //选取 属性title值等于'test'的div元素
                   $("div[title='test']").css("background-color","yellow");
                });
                $("#btn3").click(function(){
                   //选取 属性title值不等于'test'的div元素
                   //没有title属性的div也会被选中
                   $("div[title!='test']").css("background-color","yellow");
                });
                $("#btn4").click(function(){
                   //选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
                   //没有title属性的div不会被选中
                   $("div[title][title!='test']").css("background-color","yellow");
                });
             });
          </script>
       </head>
       <body>
          <input type="button" value="选取含有 属性title 的div元素." id="btn1" />
          <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />
          <input type="button" value="选取 属性title值不等于'test'的div元素." id="btn3" />
          <input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 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" value="123456789" size="8">
          </div>
          <div id="mover">正在执行动画的div元素.</div>
       </body>
    
    </html>

    七. 表单

    :input    —>  匹配所有 input, textarea, select 和 button 元素

    :text   —>  匹配所有的单行文本框

    :password     —>  匹配所有密码框

    :radio    —>   匹配所有单选按钮

    :checkbox    —>   匹配所有复选框

    :submit     —>  匹配所有提交按钮

    :image    —>   匹配所有图像域

    :reset    —>   匹配所有重置按钮

    :button     —>  匹配所有按钮

    :file     —>  匹配所有文件域

    :hidden     —>  匹配所有不可见元素,或者type为hidden的元素

    八.  表单对象属性

    :enabled     —>  匹配所有可用元素

    :disabled     —>  匹配所有不可用元素

    :checked     —>  匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)

    :selected     —>  匹配所有选中的option元素

    <!DOCTYPE html>
    <html lang="en">
       <head>
          <meta charset="UTF-8">
          <title>表单元素过滤选择器</title>
          <script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
          <script type="text/javascript">
             $(function(){
                $("#btn1").click(function(){
                   //对表单内 可用的文本框 赋值
                   $(":text:enabled").val("哈哈");
                });
                $("#btn2").click(function(){
                   //对表单内 不可用文本框 赋值
                   $(":text:disabled").val("哈哈哈");
                });
                $("#btn3").click(function(){
                   //获取多选框 选中 的个数
                   alert($(":checkbox:checked").length);
                });
                $("#btn4").click(function(){
                   //获取多选框 选中 的内容
                   /*
                   each()
                    */
    
                   $(":checkbox:checked").each(function () {
                      console.log($(this).val());
                      // console.log($(this).text());//不能获取到
    
                   });
    
                });
                $("#btn5").click(function(){
                   //获取下拉框 选中 的内容
                   $("select[name='test2']>option:selected").each(function () {
                      console.log($(this).text());
                      // console.log($(this).val()); //也能获取到
                   });
                });
             });
          </script>
       </head>
       <body>
          <h3>表单对象属性过滤选择器</h3>
          <button id="btn1">对表单内 可用的文本框 赋值.</button>
          <button id="btn2">对表单内 不可用的文本框 赋值.</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="true" value="不可用文本框" /><br> 可用元素: <input name="che" value="可用文本框2" /><br> 不可用元素: <input name="name" disabled="true" value="不可用文本框" /><br>
             <br> 多选框: <br>
             <input type="checkbox" name="item" checked="checked" value="test1" />test1
             <input type="checkbox" name="item" value="test2" />test2
             <input type="checkbox" name="item" value="test3" />test3
             <input type="checkbox" name="item" checked="checked" value="test4" />test4
             <input type="checkbox" name="item" value="test5" />test5
    
             <br><br> 下拉列表1: <br>
             <select name="test" multiple="multiple" style="height: 100px">
                <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>
       </body>
    
    </html>

    山东省
  • 0
  • 0
  • 0
  • 1.3k
  • 请登录之后再进行评论

    登录

    赞助本站

    • 支付宝
    • 微信
    • QQ

    感谢一直支持本站的所有人!

    单栏布局 侧栏位置: