jquery API 使用

创建一个元素并添加到父元素

步骤：

1. 选择一个元素
   var parent = $("#id") or $("element") or $(".class");
2. 追加到父元素
   $("#foo").append("<div>hello world</div>")
   注意： 使用.html()方法会替换掉节点的所有子节点

.animate()方法

几个注意点：

• 使用动画 的属性值必须都是数字；除非另有说明
• 例如width、height或left等可以使用动画，但background-color不能，除非使用jquery的ui插件
• 使用animate时，如果代码没有问题的情况下，效果没有出来，记得查看相应属性是否支持动画（例如：background-color）

.scroll()方法

为元素绑定一个scroll事件，主要适用于三种情况：

• window对象：当页面出现滚动条时，滚动页面会触发该事件
• 可滚动的frames：嵌入的frame页面
• CSS的overflow属性设置为scroll或auto：当该元素的显示高度小于内容高度出现滚动条时

.scrollTop()方法

获取匹配元素集合中第一个元素当前垂直滚动条的距离或设置每个匹配元素的垂直滚动条位置

注意： 可以配合scroll事件获取滚动条的实时数据

$(window).scroll(function() {
   $(".scroll .dist").text(parseInt($(this).scrollTop()));
});

mouseenter、mouseleave、mouseover和mouseout事件

• mouseenter和mouseleave是一对
• mouseover和mouseout是一对
• mouseenter事件只在绑定了该事件的元素上触发，并且不会冒泡，mouseleave也是一样；而mouseover事件会冒泡，也就是说，当在绑定了该事件的元素的后代元素中触发该事件也是有效的，mouseout也是一样

检测input输入框的数据变化：input事件和change事件

• input事件：可以使用input事件监听input输入框的数据变化，该事件是实时触发的
• change事件： 当元素的值发生改变时，触发该事件，该事件仅限于<input>元素、<textarea>元素和<select>元素。对于下拉框、单选框和复选框，当用户用鼠标做出选择时，该事件会立即触发；但对于其他类型的input元素，该事件会推迟到元素失去焦点时触发
  示例：

// 当输入数据时，将其转换为大写
 $(".input").on("input", function(){
      $(this).val($(this).val().toUpperCase());
    });
  // 失去焦点时打印输入的信息
    $(".input-wrap .input").on("change", function(){
      $(".input-wrap .output-content").text(`输入的内容为: ${$(this).val()}`);
      console.log($(this).val());
    });

.outerWidth()和.outerHeight()方法

该方法获取的对象的宽高，该宽高包括的是：margin、padding和content，并不仅仅是content的宽高

$(window).resize()

该方法为窗口大小改变绑定一个事件
如