jQuery的事件和API与动画

第二章 jQuery的事件和API

一、事件

   on()
      在选定的元素上绑定一个或多个事件处理函数。
   off()
      移除一个事件处理函数。
   trigger()
      根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。

二、鼠标事件

   click()  单击
   dblclick()  双击
   hover()   悬停
   mousedown()  按下
   mouseup()  抬起
   mouseenter()  移入  不支持子元素
   mouseleave()  离开  不支持子元素 
   mouseout()   离开  支持子元素 
   mouseover()  进入  支持子元素 
   mousemove()  移动

三、键盘事件

   keypress()   按键按下
   keyup()   按键抬起
   keydown()   按键按下

四、表单事件

   focus()  聚焦事件
   blur()    失去焦点事件
   change()  当元素的值发生改变时激发的事件
   select()  当textarea或文本类型的input元素中的文本被选择时触发的事件
   submit()  表单提交事件，绑定在form上

五、jQuery中常用的API

1.jQuery中的html(),text(),val()方法

   html()
           无参：获取html的值
           有参数html：设置html的值

   text()
           无参：获取文本值
           有参数text：设置文本值
   val()
           无参：获取value的值
           有参数value：设置value的值

2.jQuery中的工具方法

   1) get();  //以数组的形式返回DOM节点。
        console.log($('div').get());
        
   2) toArray();  //返回一个包含jQuery对象结合中的所有DOM元素数组。
        console.log($('div').toArray());

   3) eq(index);  //返回index位置上的jQuery对象。
        console.log($('div').eq(1).get(0));

   4) filter(function(index,item){});   //过滤器函数，返回jQuery对象。
        var $result = $('div').filter(function(index,item){
        return index == 2;
      });
         
   5) map(function(index,item){});   //用于获取或设置元素集合中的值。
        var $result = $('div').map(function(index,item){
        return $(item).html()
      });
    
   6) each(function(index,item){});  //遍历一个jQuery对象。
          $('div').each(function(index,item){
        console.log(index,'--',item);
      });

   7) slice(0,3);  //截取
        var $result = $('div').slice(0,3);
      console.log($result.get());
   }); 

  8) not() 
  9) first()
  10) last()
  11) is()
  12) has()

3.jQuery中属性设置函数

   //获取属性值
       attr(key)
       prop(key)
    //删除属性   
       removeAttr(attributeName)
       removeProp(propertyName)
    //批量设置属性   
       css(key)
    //添加类   
       addClass(className)
    //判断有没有指定的类，有，返回true，否则返回false   
       hasClass(className)
    //删除类   
       removeClass(className)

第三章 jQuery中的动画

一、jQuery样式相关方法

宽度 = width + 2padding + 2border + 2margin

   //获取视口区的宽高：
   1、$(window).height()
   2、$(window).width()

   //获取内容区的宽高：
      $('div').width(); 
      $('div').height();

   //获取内容+padding区的宽高：
   3、$('div').innerHeight()
   4、$('div').innerWidth()

   //获取内容+padding+border区的宽高：
   5、$('div').outerHeight()
   6、$('div').outerWidth()

   //获取内容+padding+border+margin区的宽高： 
    $('div').outerWidth(true); 
    $('div').outerHeight(true);

   //获取相对于文档的偏移
   7、.offset()

   //获取相对于定位父元素的偏移
   8、.position()

   //横向滚动条左侧的偏移
   9、.scrollLeft()

   //横向滚动条上侧的偏移
   10、.scrollTop()

   //获取离它最近的父定位元素  
   11、.offsetParent()
```

二、效果

    1.基本效果
      1）隐藏 hide()
      2）显示 show()
      3）隐藏与显示 toggle()

    2.淡入淡出效果
      1）淡入  fadeIn()
      2）淡出  fadeOut()
      3）淡入到 fadeTo()
      4）淡入与淡出 fadeToggle()

    3.滑动效果
      1）滑下 slideDown()
      2）滑上 slideUp()
      3）滑上与滑下 slideToggle()

    4.自定义效果
      animate()   
      ```