jquery 属性选择器和表单选择器

1、属性选择器“[]”进行刷选
<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>

 

2、表单选择器

  <script type="text/javascript">
   $(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");//所有的input元素

   });
  </script>