jqueryAPI

入口函数：$(document).ready(function(){ console.log("jquery入口函数")  }) ;$(function(){ console.log("jquery入口函数")   }) ;
window.οnlοad= function(){ console.log("js入口函数")  }      js入口函数执行比jquery入口函数执行晚；都会等待文档加载完成，jq不等待图片；

1.x版本：兼容IE678;  2.x版本：不兼容IE678；  3.x版本：不兼容IE678,更加精简；
开发环境 -- (git,svn仓库)--测试环境 --(git,svn仓库) -- 生产环境

jQuery对象不能调用DOM对象的方法；(是一个伪数组；取出来$("li")[0])  var lis = $("li");lis[0].style.backgroundColor = "red";   lis.get(0)..style.backgroundColor = "red";
DOM对象不能调用jQuery对象的方法；(需要把DOM对象转换成jQuery对象$(变量))  var dv = document.getElementById("dv); $(dv).text("hello");   

修改样式：css(name,value);
$("li").css("backgroundColor":"pink");
$("li").css({backgroundColor:"red",color:"blue",fontSize:"18px",borderBottom:"1px solid #000"});
隐式迭代：设置操作的时候：会给jq内部的所有对象都设置上相同的值；获取的时候：只会返回第一个元素对应的值。
添加类：addClass； 移除类：removeClass；判断类：hasClass； 切换样式类：toggleClass；

修改属性：attr(name,value);
$("li").attr("backgroundColor":"pink");
$("li").attr({backgroundColor:"red",color:"blue",fontSize:"18px",borderBottom:"1px solid #000"});
对于布尔类型的属性，不要attr方法，应该用prop方法；
$("input").prop("checked",true);
列表全选：
$("#j_cbAll"),click(function(){
    $("#j_tb input").prop("checked",$(this).prop("checked"));
});
$("#j_tb input").click(function(){
    var allLength = $("#j_tb input").length;
    var checkedLength = $("#j_tb input:checked").length;
    if(allLength == checkedLength){
        $("#j_cbAll").prop("checked", true);
    }else{
        $("#j_cbAll").prop("checked", false);
    }
})

基本动画：显示：show(speed);  show([speed],[callback])； 隐藏：hide(speed);  hide([speed],[callback])；
滑入：slideUp(speed);  slideUp([speed],[callback])；  滑出：slideDown(speed);  slideDown([speed],[callback])；  切换：slideToggle(speed);  slideToggle([speed],[callback])；
淡入：fadeIn(speed);   fadeIn([speed],[callback])； 淡出：fadeOut(speed);  fadeOut([speed],[callback])； 切换：fadeToggle(speed);  fadeToggle([speed],[callback])；

animate:自定义动画。
$(selector).animate({params},[speed],[easing],[callback]);
params:要执行动画的css属性，带数字（必选）；speed:执行动画时长；easing：执行效果，默认为swing（缓动）可以是linear（匀速）callback：动画执行完后立即执行的回调函数。
stop()方法：停止动画效果。
stop（clearQueue, jumpToEnd);
第一个参数：是否清楚队列；第二个参数：是否跳转到最终效果。
创建添加元素：
append（）；appendTo（）；prepend();prependTo(); before();  after();
清空节点与删除节点：
empty();  remove();

弹幕：
<div class="#boxDom"></div>
<textarea name="" id="txt" cols="30" rows="10"></textarea><button id="btn">发布</button>
$(function(){
    var colors= ["red","green","hotpink","pink",yellow"];
    $("btn").click(function(){
        var randomColor = parseInt(Math.random()*colors.length);
        var randomY = parseInt(Math.random() * 400)
        if($("#txt").val().trim().length() ===0){return;}
        $("<span></span>").text($("#text).val()).css("color",colors[randomColor]).css("left","1400px")
        .css("top",randomY).animate({left:-500},10000,"linear",function(){$(this).remove();}).appendTo("#boxDom");
        $("#text").val("");
    })
    $("#text").keyup(function(e){
        if(e.keyCode == 13 ){ $("#btn").click();
    })
})

val方法用于设置和获取表单元素的值，例如input/textarea的值；
$("input").val("思念"); $("input").val();
html方法与text方法：html方法相当于innerHTML(识别标签)，text方法相当于innerText；
获取页面可视区宽高：
$(window).resize(function (){
        $(window).width();$(window).height();
});
获取宽度：
innerWidth()=padding+width;  outerWidth()=padding+width+border; outerWidth(true) = padding+width+border+margin;
scrollTop与scrollLeft：设置或者获取垂直滚动条的位置；
获取页面被卷曲的高度：$(window).scrollTop();  获取页面被卷曲的宽度：$(window).scrollLeft();
offset();相对于doc；position()相对于有定位的父元素;

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
简单事件注册：
click(handler)       单击事件 ；mouseenter(handler)     鼠标进入事件 ；mouseleave(handler)       鼠标离开事件
缺点：不能同时注册多个事件
bind方式注册事件：
//第一个参数：事件类型 ；//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){    //事件响应方法     });
缺点：不支持动态事件绑定
delegate注册委托事件：给父元素注册委托事件，最终还是有由子元素来执行。
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
缺点：只能注册委托事件，因此注册时间需要记得方法太多了
on注册事件：
jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
on注册简单事件：
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});
on注册委托事件：
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});
on注册事件的语法：
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);

事件解绑
unbind方式（不用）
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件
undelegate方式（不用）
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件
 off方式（推荐）
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");
 触发事件：
$(selector).click(); //触发 click事件
$(selector).trigger("click");

jQuery事件对象：
jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。
//screenX和screenY  对应屏幕最左上角的值
//clientX和clientY  距离页面左上角的位置（忽视滚动条）
//pageX和pageY  距离页面最顶部的左上角的位置（会计算滚动条的距离）
//event.keyCode    按下的键盘代码
//event.data   存储绑定事件时传递的附加数据
//event.stopPropagation()  阻止事件冒泡行为
//event.preventDefault()   阻止浏览器默认行为
//return false:既能阻止事件冒泡，又能阻止浏览器默认行为。
delay设置延时来推迟执行；

    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .nav {
      width: 900px;
      height: 60px;
      background-color: black;
      margin: 0 auto;
    }
    .nav li {
      width: 100px;
      height: 60px;
      /*border: 1px solid yellow;*/
      float: left;
      position: relative;
      overflow: hidden;
    }
    .nav a {
      position: absolute;
      width: 100%;
      height: 100%;
      font-size: 24px;
      color: blue;
      text-align: center;
      line-height: 60px;
      text-decoration: none;
      z-index: 2;
    }
   .nav span {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: yellow;
      top: 60px;
    }
  <script src="../jquery-1.12.4.js"></script>
  <script>
    $(function () {
      //给li注册鼠标进入事件,让li下面的span top：0  播放音乐
      $(".nav li").mouseenter(function () {
        $(this).children("span").stop().animate({top: 0});
        //播放音乐
        var idx = $(this).index();
        $(".nav audio").get(idx).load();
        $(".nav audio").get(idx).play();
      }).mouseleave(function () {
        $(this).children("span").stop().animate({top: 60});
      });
      
      //节流阀  ：按下的时候，触发，如果没弹起，不让触发下一次
      //1. 定义一个flag
      var flag = true;
      
      //按下1-9这几个数字键，能触发对应的mouseenter事件
      $(document).on("keydown", function (e) {
        if(flag) {
          flag = false;
          //获取到按下的键
          var code = e.keyCode;
          if(code >= 49 && code <= 57){
            //触发对应的li的mouseenter事件
            $(".nav li").eq(code - 49).mouseenter();
          }
        }
       });
      $(document).on("keyup", function (e) {
        flag = true;
        //获取到按下的键
        var code = e.keyCode;
        if(code >= 49 && code <= 57){
          //触发对应的li的mouseenter事件
          $(".nav li").eq(code - 49).mouseleave();
        }
      });
      //弹起的时候，触发mouseleave事件
    });
  </script>
<div class="nav">
  <ul><li><a href="javascript:void(0);">导航1</a><span></span></li>
    <li><a href="javascript:void(0);">导航2</a><span></span></li>
    <li><a href="javascript:void(0);">导航3</a><span></span></li>
    <li><a href="javascript:void(0);">导航4</a><span></span></li>
    <li><a href="javascript:void(0);">导航5</a><span></span></li>
    <li><a href="javascript:void(0);">导航6</a><span></span></li>
    <li><a href="javascript:void(0);">导航7</a><span></span></li>
    <li><a href="javascript:void(0);">导航8</a><span></span></li>
    <li><a href="javascript:void(0);">导航9</a><span></span></li> </ul>
  <div><audio src="mp3/1.ogg"></audio><audio src="mp3/2.ogg"></audio>
    <audio src="mp3/3.ogg"></audio><audio src="mp3/4.ogg"></audio>
    <audio src="mp3/5.ogg"></audio><audio src="mp3/6.ogg"></audio><audio src="mp3/7.ogg"></audio><audio src="mp3/8.ogg"></audio><audio src="mp3/9.ogg"></audio>

链式编程：
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。
end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
each方法
jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});
$("li").each(function(index,element){
    $(element).css("opacity","(index+1)/10");
})
多库共存
jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放$符的控制权.
var c = $.noConflict();//释放$的控制权,并且把$的能力给了c

jquery.color.js  可以支持颜色的渐变。animate不支持颜色的渐变。$("div").animate({ backgroundColor:"#ffc0cb"},1000);十六进制
jquery.lazyload.js  懒加载
<img class="lazy" data-original = "img/example.png" alt="">
$("img.lazy").lazyload();
jquery插件：   jquery.prototype === $.fn
$.fn.bgColor = function(color){   this.css("backgroundColor",color);    return this; };