jquery API 使用

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

步骤:

  1. 选择一个元素
    var parent = $("#id") or $("element") or $(".class");
  2. 追加到父元素
    $("#foo").append("
    hello world
    ")

    注意: 使用.html()方法会替换掉节点的所有子节点

.animate()方法

几个注意点:

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

.scroll()方法

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

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

.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事件: 当元素的值发生改变时,触发该事件,该事件仅限于元素