jQuery

1. 查找元素的方法太少，麻烦。
2. 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。
3. 有兼容性问题。
4. 想要实现简单的动画效果，也很麻烦
5. 代码冗余。

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

1. 引入jQuery文件
2. 入口函数
3. 功能实现

//第一种写法
$(document).ready(function() {
    
});
//第二种写法
$(function() {
    
});

$ 其实就是一个函数，用的时候要跟（）；
参数不同，功能就不同；

三种用法：
 //1. 参数是一个function, 入口函数
 $(function () {    
 });
 console.log(typeof $);

//2. $(domobj)  把dom对象转换成jquery对象
$(document).ready(function () {
 });

//3. 参数是一个字符串,用来找对象
 $("div") $("div ul")   $(".current")

//addClass(name):添加类
//removeClass(name):移除类
//hasClass(name):判断类
//toggleClass(name):切换；有就删除，没有就添加

//设置单个属性
   attr(name, value)

//设置多个属性
   attr({
       name:value,
       name: value,
   }

//移除某个属性
removeAttr(name)

注意：对于布尔类型（disabled，selected，checked）的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。

显示：show() 不传参数，没有动画效果；
隐藏：hide()
show(speed)
    speed 是动画的持续事件，可以是毫秒值，也可以是固定的字符串；
    fast:200ms   normal:400ms   slow:600ms

滑入：slideDown() 如果不传参数，有个默认值 normal;
滑出：slideUp()
切换：slideToggle()

淡入：fadeIn()
淡出：fadeOut()
切换：fadeToggle()

例如：
$("#box3").animate({left:800}, 8000, "linear", function () {
        console.log("hahaha");
      });

//第一个参数：对象，里面可以传需要动画的样式
//第二个参数：speed 动画的执行时间
//第三个参数：动画的执行效果
//第四个参数：回调函数

//4.1 创建节点:  $("<span></span>")
//4.2 添加节点   append appendTo prepend prependTo after before
//4.3 清空内容   empty
//4.4 删除节点   remove
//4.5 克隆节点   clone

val方法：
//设置值
$("#name").val(“张三”);
//获取值
$("#name").val();

html和text方法：
//设置内容
$(“div”).html(“<span>这是一段内容</span>”);
//获取内容
$(“div”).html()

//设置内容
$(“div”).text(“<span>这是一段内容</span>”);
//获取内容
$(“div”).text()

scrollTop与scrollLeft方法：
//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();

offset方法与position方法：
//获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
//获取相对于其最近的有定位的父元素的位置。
$(selector).position();

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);

// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});

// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");

$(selector).click(); //触发 click事件

//screenX和screenY    对应屏幕最左上角的值
//clientX和clientY    距离页面左上角的位置（忽视滚动条）
//pageX和pageY    距离页面最顶部的左上角的位置（会计算滚动条的距离）

//event.keyCode    按下的键盘代码
//event.data    存储绑定事件时传递的附加数据

//event.stopPropagation()    阻止事件冒泡行为
//event.preventDefault()    阻止浏览器默认行为
//return false:既能阻止事件冒泡，又能阻止浏览器默认行为。

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。

jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。
each方法的作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数。

  // 参数一表示当前元素在所有匹配元素中的索引号
  // 参数二表示当前元素（DOM对象）
  $(selector).each(function(index,element){});

animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。

使用插件的步骤：
1. 引入jQuery文件
2. 引入插件（如果有用到css的话，需要引入css）
3. 使用插件

懒加载插件