• 中文
    • 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.1k
    • 请登录之后再进行评论

      登录

      赞助本站

      • 支付宝
      • 微信
      • QQ

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

      单栏布局 侧栏位置: