菜鸟学习jQuery

notePad ++ 文本编辑器

jQuery 容错机制
选择器 三种
 'div'   可以取得多个对象  $('div') 元素名
 'class'可以取得多个对象  '.class'
 'id'  只能取得一个 html的规范是一个页面里面只有一个id  '#id'

返回机制
$('#box')[0] = $('#box').get(0)

群组选择器     相同的样式合并
   jQuery的群组选择器 $('div,p,strong').css('color','red');

后代选择器
   jQuery             $('ul li a').css('color','red');
  
通配选择器
   jQuery         $('*').css('color','red');   
     alert($('*').size());   打印出来所有通配符统计的总数
     alert($('*')[0].nodeName);   打印出来html这种浪费的通配
               造成资源浪费 不建议在全局使用
     只建议在局部范围内使用通配符 
     例如：  $('ul li *').css('color','red');

clss= 'box pox' 多个class限定
     $('.box.pox').css('color','red');   
    
高级选择器
  层次选择器
      后代选择器    $('#box p').css('color','red'); = $('#box').find('p').css('color','red');
      子代选择器   $('#box > p').css('color','red'); = $('#box').children('p').css('color','red');
      兄弟选择器   $('#box + p').css('color','red');= $('#box').next('p').css('color','red');
      后面所有同级节点选择器  $('#box ~ p').css('color','red');= $('#box').nextAll('p').css

('color','red');
      上级选择器     $('#box').prev('p').css('color','red'); 
                     $('#box').prevAll('p').css('color','red');
      上下同级选择器   $('#box').siblings('p').css('color','red');
      next后面'p'之前的   $('#box').nextUntil('p').css('color','red');
      next后面'p'之前的   $('#box').prevUntil('p').css('color','red');
  
      jQuery的高级选择器比find,children,next等方法效率低。
      例如： $('p','#box')比$('#box').find('p')效率要低5%-10%

  属性选择器
      有这个属性的，$('a[title]').css('color','red');
      有这个属性并且属性值等于固定值，$('a[title=num1]').css('color','red');
      有这个属性并且属性值以什么开头的，$('a[title^=num1]').css('color','red');
      有这个属性并且属性值以什么结尾的，$('a[title$=num1]').css('color','red');
      有这个属性并且属性值去掉-之后值相等的，$('a[title|=num1]').css('color','red');
      有这个属性并且属性值不相等的，$('a[title!=num1]').css('color','red');
      有这个属性并且属性值被包含的，$('a[title~=num1]').css('color','red');

过滤选择器
  基本过滤器
      $('li:first').css('background','#cc');  给li列表下面第一个加css样式;
             改善$('li').first().css('background','#cc'); 提高性能
      $('li:not(.red)').css('background','#cc');  给li列表下面class不是red的加css样式;
             改善$('li').not(.red).css('background','#cc'); 提高性能
          li:even 列表偶数    li:odd 列表奇数  li:eq(2)= li.get(2)  li:gt(2)索引大于2的
          li:lt(2)索引小于2的  
      $('input').get(0).focus();  $(':focus').css('background','#cc'); 让有焦点的样式改变
 
  内容过滤器
      $('div:contains("libiao")').css('background','#cc')； 包含的元素
      $('div:empty').css('background','#cc')； 元素为空的样式变更
      $('ul:has(.red)').css('background','#cc')； 子元素里面有.red class的选择
      $('li').parent().css('background','#cc')； 父元素的选择

  隐藏过滤器
      $('div:hidden').css('background','#cc').show(1000)； 将隐藏的div慢慢显示出来

  子元素过滤器
      $('li:first-child').css('background','#cc')  所有列表的第一个元素的选择
      $('li:nth-child(even)').css('background','#cc')  所有列表的偶数形式的选择
      $('li:nth-child(1)').css('background','#cc')  所有列表的索引数从1开始的选择
      $('li:nth-child(3n)').css('background','#cc')  所有列表的索引数3倍数的选择
      alter($('.red').is('div'));  返回布尔值
      $('li').slice(0,2).css('background','#cc')  从第零个到第四个取得值
    
      $('li').filter('.red, :first-child, :last-child').css('background','#cc') 
      $('li').filter(function(){return $(this).attr('class')=='red'&&$(this).attr('title')

=='list3' }).css('background','#cc')   两个条件过滤的结合