码迷，mamicode.com
首页 > Web开发 > 详细

第二章 jQuery选择器

时间：2014-11-24 17:00:18      阅读：239      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   io   ar   color   使用   sp   java   

http://www.cnblogs.com/shuibing/p/4062923.html

选择器是行为与文档内容之间的纽带，其目的是能轻松的找到文档中的元素。

　　jQuery中的选择器继承了CSS的风格。利用jQuery选择器，可以非常便捷快速地找出特定的DOM元素，然后给它们添加相应的行为，无须担心浏览器是否支持这一选择器。

　　jQuery选择器的优势：1.简洁地写法。2.支持CSS1到CSS3选择器。3.完善的处理机制。

　　1.基本选择器　

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>2-4</title>
 <!--   引入jQuery --> 
 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="../scripts/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
  $(document).ready(function(){
       //选择 id为 one 的元素
      $(‘#btn1‘).click(function(){
          $(‘#one‘).css("background","#bfa");
      });
      //选择 class 为 mini 的所有元素
      $(‘#btn2‘).click(function(){
          $(‘.mini‘).css("background","#bfa");
      });
      //选择 元素名是 div 的所有元素
      $(‘#btn3‘).click(function(){
          $(‘div‘).css("background","#bfa");
      });
      //选择 所有的元素
      $(‘#btn4‘).click(function(){
          $(‘*‘).css("background","#bfa");
      });
      //选择 所有的span元素和id为two的div元素
      $(‘#btn5‘).click(function(){
          $(‘span,#two‘).css("background","#bfa");
      });    
  });
  </script>
</head>
<body>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
 <h3>基本选择器.</h3>
 
 <!-- 控制按钮 -->
  <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 /><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="mover">正在执行动画的span元素.</span>

</body>
</html>
bubuko.com,布布扣

 　  2.层次选择器

　　注：nextAll()选择的是后面同辈节点元素。siblings()与位置无关，只要是同辈节点就能匹配。

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>2-5</title>
 <!--   引入jQuery --> 
 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="../scripts/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" />  
  <script type="text/javascript">
  $(document).ready(function(){   
       //选择 body内的所有div元素.
      $(‘#btn1‘).click(function(){
          $(‘body div‘).css("background","#bbffaa");
      })
      //在body内的选择 元素名是div 的子元素.
      $(‘#btn2‘).click(function(){
          $(‘body > div‘).css("background","#bbffaa");
      })
      //选择 所有class为one 的下一个div元素.
      $(‘#btn3‘).click(function(){
          $(‘.one + div‘).css("background", "#bbffaa");    //等价于 $(‘.one‘).next("div").css("background","#bbffaa");
      })
      //选择 id为two的元素后面的所有div兄弟元素.
      $(‘#btn4‘).click(function(){
          $(‘#two ~ div‘).css("background", "#bbffaa");    //等价于 $(‘#two‘).nextAll("div").css("background", "#bbffaa");
      })
  });
  </script>
</head>
<body>
  <h3>层次选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
  <input type="button" value="选择 body内的所有div元素." id="btn1"/>
  <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
  <input type="button" value="选择 所有class为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="mover">正在执行动画的span元素.</span>

</body>
</html>
bubuko.com,布布扣

　　3.基本过滤选择器

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>2-6</title>
 <!--   引入jQuery --> 
 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="../scripts/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" />  
  <script type="text/javascript">
  $(document).ready(function(){
       //选择第一个div元素.
      $(‘#btn1‘).click(function(){
          $(‘div:first‘).css("background","#bfa");
      })
      //选择最后一个div元素.
      $(‘#btn2‘).click(function(){
          $(‘div:last‘).css("background","#bfa");
      })
      //选择class不为one的 所有div元素.
      $(‘#btn3‘).click(function(){
          $(‘div:not(.one)‘).css("background","#bfa");
      })
      //选择 索引值为偶数 的div元素。
      $(‘#btn4‘).click(function(){
          $(‘div:even‘).css("background","#bfa");
      })
      //选择 索引值为奇数 的div元素。
      $(‘#btn5‘).click(function(){
          $(‘div:odd‘).css("background","#bfa");
      })
      //选择 索引等于 3 的元素
      $(‘#btn6‘).click(function(){
          $(‘div:eq(3)‘).css("background","#bfa");
      })
      //选择 索引大于 3 的元素
      $(‘#btn7‘).click(function(){
          $(‘div:gt(3)‘).css("background","#bfa");
      })
     //选择 索引小于 3 的元素
      $(‘#btn8‘).click(function(){
          $(‘div:lt(3)‘).css("background","#bfa");
      })
       //选择 所有的标题元素.比如h1, h2, h3等等...
      $(‘#btn9‘).click(function(){
          $(‘:header‘).css("background","#bfa");
      })
      //选择 当前正在执行动画的所有元素.
      $(‘#btn10‘).click(function(){
          $(‘:animated‘).css("background","#bfa");
      });
  });
  </script>
</head>
<body>
  <h3>基本过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <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的元素." id="btn6"/>
  <input type="button" value="选择索引值大于3的元素." id="btn7"/>
  <input type="button" value="选择索引值小于3的元素." id="btn8"/>
  <input type="button" value="选择所有的标题元素." id="btn9"/>
  <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
 
<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="mover">正在执行动画的span元素.</span>

</body>
</html>
bubuko.com,布布扣

　　4.内容过滤选择器

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>2-7</title>
 <!--   引入jQuery --> 
 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="../scripts/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
  <script type="text/javascript">
  $(document).ready(function(){
      //选取含有文本"di"的div元素.
      $(‘#btn1‘).click(function(){
          $(‘div:contains(di)‘).css("background","#bbffaa");
      })
      //选取不包含子元素(或者文本元素)的div空元素.
      $(‘#btn2‘).click(function(){
          $(‘div:empty‘).css("background","#bbffaa");
      })
      //选取含有class为mini元素 的div元素.
      $(‘#btn3‘).click(function(){
          $(‘div:has(.mini)‘).css("background","#bbffaa");
      })
      //选取含有子元素(或者文本元素)的div元素.
      $(‘#btn4‘).click(function(){
          $(‘div:parent‘).css("background","#bbffaa");
      })
  });
  </script>
</head>
<body>
  <h3>内容过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <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>

  <span id="mover">正在执行动画的span元素.</span>

</body>
</html>
bubuko.com,布布扣

　　5.可见性过滤选择器

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>2-8</title>
 <!--   引入jQuery --> 
 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" />  
  <script type="text/javascript">
  //<![CDATA[
  $(document).ready(function(){
      $(‘#reset‘).click(function(){
          window.location.reload();
      })
      //给id为mover的元素添加动画.
       function animateIt() {
          $("#mover").slideToggle("slow", animateIt);
        }
        animateIt();
      
        //选取所有不可见的元素.包括<input type="hidden"/>.
      $(‘#btn_hidden‘).click(function(){
          alert( "不可见的元素有："+$(‘body :hidden‘).length +"个!\n"+
           "其中不可见的div元素有:"+$(‘div:hidden‘).length+"个!\n"+
           "其中文本隐藏域有:"+$(‘input:hidden‘).length+"个!");
          $(‘div:hidden‘).show(3000).css("background","#bbffaa");
      })
      //选取所有可见的元素.
      $(‘#btn_visible‘).click(function(){
          $(‘div:visible‘).css("background","#FF6500");
      })
  });
  //]]>
  </script>
</head>
<body>
  <h3>可见性过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button><br/><br/>
  <input type="button" value="选取所有可见的div元素." id="btn_visible"/>
 <br/>
  <input type="button" value="选取所有不可见的元素.包括&lt;input type=‘hidden‘/&gt;和&lt;div style=‘display:none;‘&gt;." id="btn_hidden"/>

  <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="mover">正在执行动画的span元素.</span>
</body>
</html>
bubuko.com,布布扣

　　6.属性过滤选择器

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>2-9</title>
 <!--   引入jQuery -->
 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="../scripts/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
  $(document).ready(function(){
      //选取含有 属性title 的div元素.
      $(‘#btn1‘).click(function(){
          $(‘div[title]‘).css("background","#bbffaa");
      })
      //选取 属性title值等于 test 的div元素.
      $(‘#btn2‘).click(function(){
          $(‘div[title=test]‘).css("background","#bbffaa");
      })
      //选取 属性title值不等于 test 的div元素.
      $(‘#btn3‘).click(function(){
          $(‘div[title!=test]‘).css("background","#bbffaa");
      })
      //选取 属性title值 以 te 开始 的div元素.
      $(‘#btn4‘).click(function(){
          $(‘div[title^=te]‘).css("background","#bbffaa");
      })
      //选取 属性title值 以 est 结束 的div元素.
      $(‘#btn5‘).click(function(){
          $("div[title$=est]").css("background","#bbffaa");
      })
      //选取 属性title值 含有 es  的div元素.
      $(‘#btn6‘).click(function(){
          $("div[title*=es]").css("background","#bbffaa");
      })
      //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
      $(‘#btn7‘).click(function(){
          $("div[id][title*=es]").css("background","#bbffaa");
      })
  });
  </script>
</head>
<body>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>    

    <h3> 属性选择器.</h3>
  <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
  <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”的元素." 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="mover">正在执行动画的span元素.</span>

</body>
</html>
bubuko.com,布布扣

　　7.子元素过滤选择器

　　注：eq(index)值匹配一个元素，而:nth-child(index) 将为每个符合条件的父元素匹配子元素。

　　　　eq(index)的index从0开始，:nth-child(index)的index从1开始。

　　　　:first和:first-child，:last和:last-child类似。

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>2-10</title>
 <!--   引入jQuery -->
 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="../scripts/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
  $(document).ready(function(){
      //选取每个父元素下的第2个子元素
      $(‘#btn1‘).click(function(){
          $(‘div.one :nth-child(2)‘).css("background","#bbffaa");
      })
      //选取每个父元素下的第一个子元素
      $(‘#btn2‘).click(function(){
          $(‘div.one :first-child‘).css("background","#bbffaa");
      })
      //选取每个父元素下的最后一个子元素
      $(‘#btn3‘).click(function(){
          $(‘div.one :last-child‘).css("background","#bbffaa");
      })
      //如果父元素下的仅仅只有一个子元素，那么选中这个子元素
      $(‘#btn4‘).click(function(){
          $(‘div.one :only-child‘).css("background","#bbffaa");
      })
  });
  </script>
</head>
<body>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>    

  <h3>子元素过滤选择器.</h3>
  <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
  <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
  <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
  <input type="button" value="如果class为one的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="mover">正在执行动画的span元素.</span>

</body>
</html>
bubuko.com,布布扣

　　8.表单对象属性过滤选择器

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>2-11</title>
    <!--   引入jQuery -->
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
  //<![CDATA[
        $(document).ready(function () {
            //重置表单元素
            $(":reset").click(function () {
                setTimeout(function () {
                    countChecked();
                    $("select").change();
                }, 0);
            });

            //对表单内 可用input 赋值操作.
            $(‘#btn1‘).click(function () {
                $("#form1 input:enabled").val("这里变化了！");
                return false;
            })
            //对表单内 不可用input 赋值操作.
            $(‘#btn2‘).click(function () {
                $("#form1 input:disabled").val("这里变化了！");
                return false;
            })

            //使用:checked选择器，来操作多选框.
            $(":checkbox").click(countChecked);

            function countChecked() {
                var n = $("input:checked").length;
                $("div").eq(0).html("<strong>有" + n + " 个被选中!</strong>");
            }

            countChecked(); //进入页面就调用.

            //使用:selected选择器，来操作下拉列表.
            $("select").change(function () {
                var str = "";
                $("select :selected").each(function () {
                    str += $(this).text() + ",";
                });
                $("div").eq(1).html("<strong>你选中的是：" + str + "</strong>");
            }).trigger(‘change‘);
            // trigger(‘change‘) 在这里的意思是：
            // select加载后，马上执行onchange.
            // 也可以用.change()代替.
        });
  //]]>

    </script>
</head>
<body>
    <h3>
        表单对象属性过滤选择器.</h3>
    <form id="form1" action="#">
    <button type="reset">重置所有表单元素</button>
    <br /><br />
    <button id="btn1">对表单内 可用input 赋值操作.</button>
    <button id="btn2">对表单内 不可用input 赋值操作.</button><br />
    <br />
    可用元素：<input name="add" value="可用文本框" />
    <br />
    不可用元素：<input name="email" disabled="disabled" value="不可用文本框" /><br />
    可用元素：<input name="che" value="可用文本框" /><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
    <div>
    </div>
    <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>
    <br />
    <br />
    <div>
    </div>
    </form>
</body>
</html>
bubuko.com,布布扣

　　9.表单选择器

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>2-12</title>
    <!--   引入jQuery -->
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
  //<![CDATA[
        $(document).ready(function () {

            var $alltext = $("#form1 :text");
            var $allpassword = $("#form1 :password");
            var $allradio = $("#form1 :radio");
            var $allcheckbox = $("#form1 :checkbox");
            var $allsubmit = $("#form1 :submit");
            var $allimage = $("#form1 :image");
            var $allreset = $("#form1 :reset");
            var $allbutton = $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
            var $allfile = $("#form1 :file");
            var $allhidden = $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
            var $allselect = $("#form1 select");
            var $alltextarea = $("#form1 textarea");
            var $AllInputs = $("#form1 :input");
            var $inputs = $("#form1 input");

            $("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
            .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
            .append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
            .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
            .append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
            .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
            .append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
            .append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
            .append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
            .append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
            .append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
            .append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
            .append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
            .append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
            .css("color", "red")

            $("form").submit(function () { return false; }); // return false;不能提交.
        });
  //]]>
    </script>
</head>
<body>
    <form id="form1" action="#">
    <input type="button" value="Button" /><br />
    <input type="checkbox" name="c" />1<input type="checkbox" name="c" />2<input type="checkbox"name="c" />3<br />
    <input type="file" /><br />
    <input type="hidden" /><div style="display: none">test</div>
    <br />
    <input type="image" /><br />
    <input type="password" /><br />
    <input type="radio" name="a" />1<input type="radio" name="a" />2<br />
    <input type="reset" /><br />
    <input type="submit" value="提交" /><br />
    <input type="text" /><br />
    <select>
        <option>Option</option>
    </select><br />
    <textarea rows="5" cols="20"></textarea><br />
    <button>Button</button><br />
    </form>
    <div>
    </div>
</body>
</html>
bubuko.com,布布扣

　　注：对特殊字符,需要转义一下(\\)

　　　　选择器含有空格的注意事项

第二章 jQuery选择器

标签：style   blog   http   io   ar   color   使用   sp   java   

原文地址：http://www.cnblogs.com/shenming/p/4118698.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！