jQuery 02 选择器

CSS 选择器

标签选择器	以文档元素作为选择器	td{ width:120px }
ID选择器	以元素的ID作为选择器	#note{ width:120px }
类选择器	以元素的class作为选择器	.dream{ }
群组选择器	多个元素 应用相同的样式	td,p,div,a{ }
后代选择器		#link a{ }
通配符选择器	所有元素	*{ }

<p class="demo">jQuery Demo</p>
     <script type="text/javascript">
          $( ".demo"). click(function(){  // 给class为demo 的元素添加行为
             alert("jQuery demo!");
          })
     </script>

判断元素是否存在应该使用

if( $("#tt").length >0){

     //doing

}

基本选择器

通过元素id，class和标签名查找元素。

#id	根据ID查找元素	返回单个元素	$('#test')
.class	根据class查找	元素集合	$(' .test')
element	根据标签	元素集合	$(' p')
*	所有元素	元素集合	$(' *')
selector1,selector2	多个选择器合并	元素集合	$(' div,span,p.myclass')

<script type="text/javascript">
  $(document).ready(function(){
       //选择 id为 one 的元素
        $('#btn1').click(function(){
               $('#one').css("background","#bfb");
       });
    
       //选择 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>

层次选择器

可以获得 后代元素，子元素，相邻元素，同辈元素

$('body div')	获得body中的所有DIV元素
$('body > div')	获得body 下一级的子DIV元素
$('.one + div')	获得下一个同辈元素
$('#two ~ div')	选择 id为two的元素后面的所有div兄弟元素

 <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");
       })
       //选择 id为two的元素后面的所有div兄弟元素.
       $('#btn4').click(function(){
              $('#two ~ div').css("background","#bbffaa");
       })
  });
  </script>

可以用   $('.one').next('div');  代替 $('.one + div')，用 $('.one').nextALL('div')代替 $('.one ～ div')          

过滤选择器，主要是通过特定的过滤规则来筛选出所需的DOM元素。

$('div:first')	选取所有div元素中的第1个div元素
$(' div:last')	选取所有div元素中的最后1个div元素
$('div:not(.one)')	选择class不为one的 所有div元素
$('div:even')	选择 索引值为偶数 的div元素
$('div:odd')	选择 索引值为奇数 的div元素
$('div:eq(3)')	选择 索引等于 3 的元素
$('div:gt(3)')	选择 索引大于 3 的元素
$('div:lt(3)')	选择 索引小于 3 的元素
$(':header')	选择 所有的标题元素.比如h1, h2, h3等等
$(':animated')	选择 当前正在执行动画的所有元素.
$(':focus')	选择 当前获取焦点的所有元素.
$('div:contains(di)')	选取含有文本"di"的div元素.
$('div:empty')	选取不包含子元素(或者文本元素)的div空元素.
$("div:has('.mini')")	选取含有class为mini元素 的div元素
$('div:parent')	选取含有子元素(或者文本元素)的div元素
$('div:hidden')	选取所有不可见的元素
$('div:visible')	选取所有可见的元素
$('div[title]')	选取含有 属性title 的div元素
$('div[title=test]')	选取 属性title值等于 test 的div元素
$('div[title!=test]')	选取 属性title值不等于 test 的div元素
$('div[title^=te]')	选取 属性title值 以 te 开始 的div元素
$('div[title$=est]')	选取 属性title值 以 est 结束 的div元素
$("div[title*=es]")	取 属性title值 含有 es  的div元素
$("div[id][title*=es]")	组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
$('div[title|="en"]')	选取 属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素
$('div[title~="uk"]')	选取 属性title用空格分隔的值中包含字符uk的元素
$('div.one :nth-child(2)') $(' div.one :nth-child(even)') $(' div.one :nth-child(odd)')	选取每个父元素下的第2个子元素
$('div.one :first-child')	选取每个父元素下的第一个子元素
$('div.one :last-child')	选取每个父元素下的最后一个子元素
$('div.one :only-child')	如果父元素下的仅仅只有一个子元素，那么选中这个子元素
$("#form1 input:enabled")	对表单内 可用input 赋值操作
$("#form1 input:disabled")	对表单内 不可用input 赋值操作.
$("input:checked")	选中的元素
$("select:selected")	选中的元素
$("#form1 :text")	选择表单中的单行文本框
$("#form1 :password")	密码框
$("#form1 :radio")	单选框
$("#form1 :checkbox")	多选框
$("#form1 :submit")	提交按钮
$("#form1 :image")	图像按钮
$("#form1 :reset")	重置按钮
$("#form1 :button")	所有按钮<input type=button />  和 <button ></button>都可以匹配
$("#form1 :file")
$("#form1 :hidden")	<input type="hidden" />和<div style="display:none">test</div>都可以匹配
$("form").submit(function () { return false; });	return false;不能提交

转义字符

               var $id_right_a  = $('#id \\.a');//jQuery对象,对特殊字符,我们转义一下
               var $id_right_b  = $('#id \\#b');//jQuery对象,对特殊字符,我们转义一下
               var $id_right_c  = $('#id \\[1 \\]');                //对特殊字符，我们转义一下