JQuery

1.javascript

不爽的地方：
1. 代码比较麻烦，需要遍历，可能还需要嵌套。
2. 找对象麻烦，方法少，还长
3. 会有兼容性问题。
4. 如果想要实现简单的动画效果 animate
5. js注册事件，会被覆盖，addEventListener

2.JQuery

JQuery：

jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）

优点总结：

1. 查找元素的方法多种多样，非常灵活
2. 拥有隐式迭代特性，因此不再需要手写for循环了。
3. 完全没有兼容性问题。
4. 实现动画非常简单，而且功能更加的强大。
5. 代码简单、粗暴。

3.JQuery入口函数

//js的入口函数执行要比jQuery的入口函数执行得晚一些。
//jq的入口函数会等待页面的加载完成才执行，但是不会等待图片的加载。
//js的入口函数会等待页面加载完成，并且等待图片加载完成才开始执行。
  
  window.onload = function () {
    console.log("我是js的入口函数");
  };
  
  //认识
  $(document).ready(function () {
    console.log("这是jQuery入口函数的第一种写法");
  });
  
  
  $(function () {
    console.log("这是jQuery入口函数的第二种写法");
  });

4.DOM对象与JQ对象

DOM对象(js对象):使用js的方式获取到的元素就是js对象（DOM对象）。

jq对象：使用jq的方式获取到的元素就是jq对象。

jq对象与js对象的区别：js对象对象不能调用jq对象的方法。

jq对象与js对象的联系（jq对象其实就是js对象的一个集合，伪数组，里面存放了一大堆的js对象）（宏观上）

5.选择器

基本选择器

ID选择器 ------------------   $(“#id”); （获取指定ID的元素） 
类选择器  ------------------  $(“.class”);  （获取同一类class的元素） 
标签选择器  ---------------- $(“div”); （获取同一类标签的所有元素）
并集选择器 ----------------- $(“div,p,li”); （使用逗号分隔，只要符合条件之一就可）
交集选择器  ---------------- $(“div.redClass”); （获取class为redClass的div元素）

层级选择器

 子代选择器 ---------------- $(“ul>li”);  （使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素）
 后代选择器 ---------------- $(“ul li”); （使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等）

过滤选择器：这类选择器都带冒号:

 :eq（index） ----------------  $(“li:eq(2)”).css(“color”, ”red”);  （获取到的li元素中，选择索引号为2的元素，索引号index从0开始。）
 :odd  ---------------- $(“li:odd”).css(“color”, ”red”); （获取到的li元素中，选择索引号为奇数的元素）
 :even  ----------------  $(“li:even”).css(“color”, ”red”);  （ 获取到的li元素中，选择索引号为偶数的元素）

筛选选择器(方法)：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

 children(selector) ----------------  $(“ul”).children(“li”)  （相当于$(“ul>li”)，子类选择器）
 find(selector) ----------------  $(“ul”).find(“li”);  （相当于$(“ul li”),后代选择器）
 siblings(selector) ----------------  $(“#first”).siblings(“li”);  （查找兄弟节点，不包括自己本身。）
 parent()  ----------------  $(“#first”).parent(); （查找父亲）
 eq(index)  ----------------  $(“li”).eq(2);  （相当于$(“li:eq(2)”),index从0开始）
 next()  ---------------- $(“li”).next()  （找下一个兄弟）
 prev() ---------------- $(“li”).prev()  （找上一次兄弟）

6.index()方法

index()方法会返回当前元素在所有兄弟元素里面的索引。

$("li").click(function () {
      console.log($(this).index());
    });

7.css操作

$(function () {
  
    //css(name, value)
    //修改单个样式
    //name:样式名 value:样式值
 
    $("li")
      .css("backgroundColor", "pink")
      .css("color", "red")
      .css("fontSize", "32px");
    
    //css(obj)
    //修改多个样式
    
    $("li").css({
      backgroundColor:"pink",
      color: "red",
      fontSize:"32px",
      border: "1px solid black"
    });

    //获取样式
    //css(name)
    //name:想要获取的样式
    $("li").eq(0).css("fontSize", "20px");
    $("li").eq(1).css("fontSize", "21px");
    $("li").eq(2).css("fontSize", "22px");
    $("li").eq(3).css("fontSize", "23px");
    
    //A:20  b:21  c:22   d:23  e:16  f:[20, 21, 22, 23]
    
    
    //隐式迭代：
      // 设置操作的时候：会给jq内部的所有对象都设置上相同的值。
      // 获取的时候：只会返回第一个元素对应的值。
    console.log($("li").css("fontSize"));//16px
  
  
  });

8.class操作

$(function () {
    
    $("input").eq(0).click(function () {
      
      // 添加一个类
      $("li").addClass("basic");
    });
  
    $("input").eq(1).click(function () {
      $("li").addClass("bigger");
    });
    
    
    $("input").eq(2).click(function () {
      
      //移除一个类
      $("li").removeClass("bigger");
    });
    
    //判断类
    $("input").eq(3).click(function () {
    
      //移除一个类
      console.log($("li").hasClass("bigger"));;
    });
  
  
    $("input").eq(4).click(function () {
    
      //判断li有没有basic类，如果有，就移除他，如果没有，添加他
      //toggle
      $("li").toggleClass("basic");
    });
  });

9.属性操作

//用法和css一样
    //设置单个属性
    //attr(name, value)
    $("img").attr("alt", "图破了");
    $("img").attr("title", "错错错错");
    
    //设置多个属性
    $("img").attr({
      alt:"图破了",
      title:"错错错",
      aa:"bb"
    })

10.prop方法

//对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。
  $(function () {
    $("input").eq(0).click(function () {
      $("#ck").prop("checked", true);
    });
  
    $("input").eq(1).click(function () {
      $("#ck").prop("checked", false);
    });
  });

11.show方法

$(function () {
    
    $("input").eq(0).click(function () {
      
      //show不传参数，没有动画效果
      //$("div").show();
      
      //show(speed)
      //speed:动画的持续时间  可以是毫秒值 还可以是固定字符串
      //fast:200ms   normal:400ms   slow:600
      //$("div").show("ddd");
    
      // show([speed], [callback])
      $("div").show(1000, function () {
        console.log("哈哈，动画执行完成啦");
      })
      
    });
    
    
    $("input").eq(1).click(function () {
      $("div").hide();
    })
    
  });

12.滑入滑出动画

$(function () {
    
    //滑入（slideDown）  滑出：slideU
    $("input").eq(0).click(function () {
      
      //slideDown：如果不传参数，有一个默认值normal
      //$("div").slideDown();
      //$("div").slideDown(1000);
      $("div").slideDown(1000, function () {
        console.log("额呵呵");
      });
    });
    
    
    $("input").eq(1).click(function () {
      $('div').slideUp();
    })
  
  
    $("input").eq(2).click(function () {
      
      //如果是滑入状态，就执行滑出的动画，
      $('div').slideToggle();
    })
  });

13.淡入淡出动画

$(function () {
  
    //淡入：fadeIn  淡出：fadeOut    切换：fadeToggle
    $("input").eq(0).click(function () {
      
      $("div").fadeIn(2000);
      
    });
    
    
    $("input").eq(1).click(function () {
      $("div").fadeOut(1000);
    })
    
    
    $("input").eq(2).click(function () {
      
      //如果是滑入状态，就执行滑出的动画，
      $('div').fadeToggle();
    })
  });

14.自定义动画

$(function () {
    $("input").eq(0).click(function () {
      
      //第一个参数：对象，里面可以传需要动画的样式
      //第二个参数：speed 动画的执行时间
      //第三个参数：动画的执行效果
      //第四个参数：回调函数
      $("#box1").animate({left:800}, 8000);
      
      //swing:秋千 摇摆
      $("#box2").animate({left:800}, 8000, "swing");
      
      //linear:线性 匀速
      $("#box3").animate({left:800}, 8000, "linear", function () {
        console.log("hahaha");
      });
    })
  });

15.动画列表

$(function () {
    $("#btn").click(function () {
      
      //把这些动画存储到一个动画队列里面
      $("div").animate({left:800})
        .animate({top:400})
        .animate({300,height:300})
        .animate({top:0})
        .animate({left:0})
        .animate({100,height:100})
    })
  });

16.停止动画

$(function () {
    $("input").eq(0).click(function () {
      $("div").slideDown(4000).slideUp(4000);
    });

    $("input").eq(1).click(function () {
      //stop:停止当前正在执行的动画
      //clearQueue:是否清除动画队列 true  false
      //jumpToEnd:是否跳转到当前动画的最终效果 true false

      //.stop().animate();
      $("div").stop(true, true);
    })
  });

17.动态创建节点

$(function () {
   // var box = document.getElementById("box");

   // var a = document.createElement("a");
   // box.appendChild(a);
   // a.setAttribute("href", "http://www.baidu.com");
   // a.setAttribute("target", "_blank");
   // a.innerHTML = "百度";
    
    $("#box").append('<a href="http://www.baidu.com" target="_blank">百度</a>');
    
  });

18.创建与添加节点

$(function () {

//    //创建jq对象
      var $li = $('<a href="http://www.baidu.com" target="_blank">百度</a>');
//    console.log($li);      $("div").append('<a href="http://www.baidu.com" target="_blank">百度</a>');
    
    //添加到子元素的最后面
      $("div").append($("p"));
      $("p").appendTo($("div"));
    
      $("div").prepend($("p"));
      $("p").prependTo($("div"));
    
      $('div').after($("p"));
      $('div').before($("p"));
  });

19.html方法和text方法

$(function () {
    
      //html:innerHTML  text:innerText
      console.log($("div").html());//<h3>我是标题</h3>
      console.log($("div").text());//我是标题
    
      $("div").html("<p>我是文本</p>");
      $("div").text("<p>我是文本</p>");
    
  });

20.width方法和height方法

$(function () {
    //获取div的宽度
     console.log($("div").css("width"));
     $("div").css("width", "400px");

    //直接获取到的是数字
    //就是获取的width的值
    console.log($("div").width());//width
    console.log($("div").innerWidth());//padding+width
    console.log($("div").outerWidth());//padding+width+border
    console.log($("div").outerWidth(true));//padding+width+border+margin
    //$("div").width(400);
  
    //需要获取页面可视区的宽度和高度
   $(window).resize(function () {
     console.log($(window).width());
     console.log($(window).height());
   });  
  });

21.offset和position方法

$(function () {
    
    //获取元素的相对于document的位置
    console.log($(".son").offset());
    
    //获取元素相对于有定位的父元素的位置
    console.log($(".son").position());
    
  });

22.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);