jQuery学习笔记之jQuery基础核心

$=jQuery
$   返回jQuery对象内部
$() 返回的jQuery对象
$('#box') 返回的也是jquery对象
$('#box').css('color','red') 还是返回的jquery对象 因此可以具有连缀模式，连续添加.css()等
$(document）.ready（function (){}）=$（function (){}）;就相当于js里的window.onload=function (){}当网页内容全部加载后再执行,jquery只需要DOM全部加载完毕就可以不需要图片加载完再执行，所以效率更高，而且可以多次执行不会覆盖前面的$(document）.ready（function (){}）;
实际应用中几乎不会用window.onload=function (){}，一般用jquery的$（function (){}）。。。 （ready可以省略）
$('#box').get(0) ID元素的第一个原生DOM
jQuery对象和DOM对象之间的互换


库的不兼容问题，比如都是以$为开头的
有两种方法处理该问题：
jquery.noConflict();//把自己的$所有权剔除
var $$ = jQuery //给jquery赋予一个新的变量
jQuery是添加动作行为，CSS是添加样式


jquery具有容错功能（动态DOM），对于不存在的ID名也不会报错，可以用判断不执行来提高性能。
$('#box').get(0)=$('#box')[0]
在全局范围使用*号，会极大地消耗资源，不建议使用，通配选择器一般运用在局部的环境内
jquery选择器括号内从右向左解析，选择器越复杂，字符串解析越慢 单个ID不需要解析 原则追求必要的确定性


高级选择器：
1、后代选择器 find（）
2、子选择器 >: #box > p表示的是id为box的子节点p（不包括孙子节点p）等价children（），但是childre快于>，在jquery里可以兼容IE6 
3、next选择器：#box + p表示同级的下一个节点p next()
4、nextall选择器：#box ~ p:表示同级下的所有节点p nextall()
find（）children（）next()  nextall()不传参相当于传递了（*），若*在某个环境里有所浪费，建议尽量不去使用
5、prev(‘p’):某个节点同级的上一个节点p $('#box').prev('p').css('color','red');
6、prevAll（‘p’）：某个节点同级的上所有节点p
7、siblings('p'):某个节点同级上下所有节点p
8、NextUntil('p'):同级下非指定元素选定，遇到则停止
9、prevUntil('p'):同级上非指定元素选定，遇到则停止
理论上find（）children（）next()  nextall() 5-6 要快于1-4，但并无卵用,但还是推荐前者的方法。
$('#box p')=$('p','#box')后者会比前者慢5%-10%，因为要进行字符串处理


属性选择器
$('a[title]').css.....获取具有这个属性的DOM对象
注意！=只能用于jquer，CSS不支持
属性过滤器


选取拥有此属性的元素([attribute])


      //选取含有 属性title 的div元素.
      $('#btn1').click(function(){
          $('div[title]').css("background","#bbffaa");
      })
选取属性值为value的元素([attribute=value])


      //选取 属性title值等于 test 的div元素.
      $('#btn2').click(function(){
          $('div[title=test]').css("background","#bbffaa");
      })
选取属性值不等于value的元素([attribute!=value])


      //选取 属性title值不等于 test 的div元素.
      $('#btn3').click(function(){
          $('div[title!=test]').css("background","#bbffaa");
      })1
选取属性值以value开始的元素([attribute^=value])


      //选取 属性title值 以 t 开始 的div元素.
      $('#btn4').click(function(){
          $('div[title^=t]').css("background","#bbffaa");
      })
选取属性值以value结束的元素([attribute$=value])


      //选取 属性title值 以 t 结束 的div元素.
      $('#btn5').click(function(){
          $("div[title$=t]").css("background","#bbffaa");
     })
选取属性值含有value的元素([attribute*=value])


      //选取 属性title值 含有 es  的div元素.
      $('#btn6').click(function(){
          $("div[title*=es]").css("background","#bbffaa");
      })
选取属性值等于value或前缀为value(即”value-xxx”)的元素([attribute|=value])


  //选取 属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素 注意分开用单引号和双引号
  $('#btn3').click(function(){
    $('div[title|="en"]').css("background","#bbffaa");
  })
选取属性值用空格分隔的值中包含给定值的元素([attribute~=value])


  //选取 属性title用空格分隔的值中包含字符uk的元素.
  $('#btn4').click(function(){
    $('div[title~="uk"]').css("background","#bbffaa");
  })
组合属性选择器([attribute1][attribute2]…[attributeN])


      //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
      $('#btn7').click(function(){
          $("div[id][title*=es]").css("background","#bbffaa");
      })