JQ如果script标签写入了head中文档就绪函数DOM对象转换成JQ对象JQ对象转换成DOM对象兄弟元素选择器：元素

如果script标签写入了head中

 需要用到window.onload方法
 window.onload=function(){
 var oDiv=document.getElementByTagName('div')[0]
 console.log(oDiv)
 }

文档就绪函数

 页面结构加载完之后执行
  $(function(){
   console.log( )
    })//简写

DOM对象转换成JQ对象

  $(oDiv)

JQ对象转换成DOM对象

  $oDiv[0]
  $oDiv.get(0)

兄弟元素选择器：

           $('#list~li').css('background','red')   后面所有
           $('#list+li').css('background','red')   下一个
           $('li:eq(2)').css(     ) 匹配第几个元素 正数索引从零开始 负数从-1开始
           $('li:even').css()   选择偶数位元素
           $('li:odd').css()  选中奇数位元素
           $('li:gt(2)').css('color','red')   大于索引的元素
           $('li:lt(2)').css()   小于索引的元素
           $(':header').css()  选择所有标题标签
           $('li:not(#list1)').css()

元素可以被认为是隐藏的几种情况：

 他们的CSS display 值是none
 type='hidden'的表单元素
 宽高都设置为0
 祖先元素是隐藏的

$(':hidden')选择所有隐藏的元素

 ul{
   display:none   //释放空间
  }
 ul{
   visibility:hidden //不释放空间
   opacity：0//不释放空间
 }

JQ属性

  $('li[name |="list"]').css() 选定指定属性值等于给定字符串或以该字符串为前缀的元素
  $('li[name *="list"]').css()   选定指定属性值包含字符串的元素 
  $('li[name ~="list"]').css()   属性值必须就是指定值
  $('li[name $="list"]').css()  以指定值结尾
  $('li[name ^="list"]').css()   以指定值开头
  $('li[name !="list"]').css()
  $('li[name]').css()   有name属性的

子元素筛选

 $('li:nth-child(1)').css() 第一个子元素从1开始
 $('li:nth-last-child(1)').css() 最后一个子元素从1开始

表单

  :button 一个和$(":button")等价的选择器，使用有效的CSS是$("button, input[type='button']")。
 :checkbox  描述: 选择所有类型为复选框的元素。
 :checked  描述: 匹配所有勾选的元素。
 :disabled  描述: 选择所有被禁用的元素。
 :enabled 描述: 选择所有可用的（注：未被禁用的元素）元素。
  :focus  描述: 选择当前获取焦点的元素。
  :file    描述: 选择所有类型为文件（file）的元素。
 :image  描述: 选择所有图像类型的元素。
 :input  描述: 选择所有 input, textarea, select 和 button 元素.
 :password  描述: 选择所有类型为密码的元素。
 :radio  描述: 选择所有类型为单选框的元素。
 :reset 描述: 选择所有类型为重置的元素。
 :selected  描述: 获取 select 元素中所有被选中的元素。
 :submit  描述: 选择所有类型为提交的元素。
 :text  描述: 选择所有类型为text的input元素。

属性 / CSS

  $('#wrapper').attr('class','content')  设置属性 也可以获取属性
  $(':checkbox').prop('chcked',true)

var tag=$(':checkbox').prop('checked')//获取属性的时候只能获取到第一个元素的属性})

要想获取到每一个元素的属性each（）遍历

  $(':checkbox').each(function(index,elelment){
    element.checked=!element.checked
  //JQ对象 var tag = $(element).prop('checked'）
  //      $(element).prop('checked',!tag)
 )
})
  .removeAttr() 描述: 为匹配的元素集合中的每个元素中移除一个属性（attribute）

输入框例子

 $('input').on('focus'，function()[
 if(this.value==this.defaultValue){
    $(this).val('')
}
}).on('blur',function(){//blur 失去焦点
    if(!this.value){
        $(this).val(value)
    }
})

样式添加

 .addClass()  描述: 为每个匹配的元素添加指定的样式类名
 .toggleClass()      切换样式，添加或删除class
 $)('div').css({
    width:'400px'
    height:'400px'
    opacity:'0.5'
    background:'red'
})

位置

 .offset()  描述:       在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。
  var p = $("p:last");
 var offset = p.offset();
 p.html( "left: " + offset.left + ", top: " + offset.top )

DOM 插入, 内部插入

 .append() 描述: 在每个匹配元素里面的末尾处插入参数内容。  
 ppendTo() 描述:   将匹配的元素插入到目标元素的最后面（译者注：内部插入）。   $('<p>Test</p>').appendTo('.inner');
 .html() 描述: 获取集合中第一个匹配元素的HTML内容
 .prepend() 描述: 将参数内容插入到每个匹配元素的前面（元素内部）。
 .prependTo() 描述: 将所有元素插入到目标前面（元素内）。
 .text()  $('#content').html('<a href="#">百度</a>')  设置的是HTML片段
         $('#container').text('<a href="#">百度</a>')  设置的是文本

DOM 插入, 外部插入

 .after() 描述: 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
 .before() 描述: 根据参数设定，在匹配元素的前面插入内容（译者注：外部插入）

DOM 移除

 .empty()  描述: 从DOM中移除集合中匹配元素的所有子节点。
 .remove() 描述:  将匹配元素集合从DOM中删除。（注：同时移除元素上的事件及 jQuery 数据。）
 var $s=$('span')
 console.log($s.eq(0))

树遍历

 .children() 描述: 获得匹配元素集合中每个元素的子元素，选择器选择性筛选
 .parent()  描述: 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器。
 .parents()  描述: 获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数。

JQ给动态生成的元素绑定事件：

 $('ul').on('click','li',function(event){
 console.log(event.target.innerHTML//e.target返回的是DOM元素)
 })

效果

 .hide( [duration ] [, complete ] )   描述: 隐藏匹配的元素。   $('.target').hide()
 .show( [duration ] [, complete ] )  $('#book').show（）
.toggle( [duration ] [, easing ] [, complete ] ) 描述: 显示或隐藏匹配元素。
.animate( properties [, duration ] [, easing ] [, complete ] ) 描述: 根据一组 CSS 属性，执行自定义动画。
$('div').animate({
    width:'400px',
    opacity:0.5
},2000).animate({
    height:'400px',
    opacity:0.25
},1000)
.stop( [clearQueue ] [, jumpToEnd ] ) 描述: 停止匹配元素当前正在运行的动画。 第一个布尔值，指示是否取消以列队动画。默认 false
第二个布尔值指示是否当前动画立即完成。默认false
.fadeIn( [duration ] [, complete ] )  描述: 通过淡入的方式显示匹配元素。
.fadeOut( [duration ] [, complete ] )  描述: 通过淡出的方式隐藏匹配元素。
.fadeTo( duration, opacity [, complete ] )  描述: 调整匹配元素的透明度。
.fadeToggle( [duration ] [, easing ] [, complete ] ) 描述: 通过匹配的元素的不透明度动画，来显示或隐藏它们。