jQuery知识点总结（五）

 *css-DOM的操作

   1)css()方法---作用，就是给标签设置行内样式，给标签设置style属性值

       //$("p").css("color","red");

       $("p").css({"color":"red","fontSize":"32px","backgroundColor":"#888888"});

       alert($("p").css("fontSize"));

 

   2)设置元素的宽和高

     1)width()

     2)height()

     注意：

     *有参数是设置，无参数是获取

     *获取浏览器的宽和高

     alert($(window).width());

     alert($(window).height());

     innerHeight()--包括内边距。不包括边框和外边距

     outerHeight()--包括内边距,包括边框       

     innerWidth()

     outerWidth()

 

   3)设置元素的滚动偏移量

     scrollTop()

     scrollLeft()

     $(window).scroll(function(){});浏览器滚动事件

 

   4)css-DOM中的定位方法

     offset()--得到一个Jquery对象，里面封装了相对浏览器的偏移量（left，top属性）

              还可以设置相对浏览器的偏移量 offset({left:100,top:100});

     position()--得到一个Jquery对象,里面封装了相对父元素的偏移量left，top属性）

 

*事件的绑定

  1)on("事件类型1 事件类型2",[{"键":"值"}],"处理函数");

     *第一个参数，事件类型可以多个

     *第二个参数,传给处理函数的数据

     *第三个参数,响应处理函数

 

  2)off()--解除元素的绑定事件

    *不带参数，解除元素上所有的事件

    *带事件名，多个用空格隔开，解除元素上指定的事件

    *带两个参数的，解除具有指定处理函数的事件

 

  3)简写的方式*****

    语法:jquery对象.事件(),比如:$show.click(function(){}).mouserover(function(){})

 

*常用的合成事件

  1)hover(函数1，函数2)

    当鼠标移入的时候执行函数1，移出的时候执行函数2

  2)toggle()--切换（隐藏的时候显示，显示的时候隐藏）

 

*事件对象

  什么是事件对象？

  当一个元素触发事件的时候，内部会生成一个事件对象，（里面封装了与事件相关的信息）

  此事件对象作为参数传给处理函数。处理函数就能从事件对象中获取相关的事件信息

  比如:通过事件对象可以阻止冒泡型事件、阻止元素的默认行为，获得鼠标的坐标、

  获得键盘按键所对应的字符或码值、获得鼠标的按键类型、获得事件源、获得事件类型

 

  1)event.type属性--获取事件类型

  2)event.preventDefault();--阻止元素的默认行为

  3)event.stopPropagation();--阻止冒泡型事件

  4)event.target---获取事件源,返回的是DOM对象

  5)event.pageX和event.pageY 获得鼠标的X,Y坐标

  6)return false，既阻止元素的默认行为，又阻止冒泡型事件

  7)event.which,获得鼠标键 1，左，2中 3右

  8)event.keycode

 

*模拟事件的操作

  trigger("事件名")

  可以使用简写的方式，比如元素.click()

 

 ----------------------------------------------------------------------------------

 *jQuery动画?

 动画就是在单位时间内去修改元素的一个或多个属性值，也就是属性值在单位时间内从一个

 状态到另外一个状态。

 

 jquery为什么提供了一些现成的动画方法来完成特定的效果。

 show(毫秒)

 hide(毫秒)

    ---上面两个动画在指定的时间内改变属性透明度、高度、宽度。

 toggle()--在show()和hide()之间进行切换，自动判断隐藏还是显示

 

 fadeIn()

 fadeOut()

 fadeToggle()--透明边不透明，不透明变透明

 fadeTo()--指定透明度

     ----只改变元素的透明度

 

slideDown()

slideUp()

slideToggle()--收起的时候显示，显示的时候收起。

   ---改变元素的宽度和高度。

 

以上动画都可以指定完成时间和一个函数，这个函数的作用就是当动画结束后要执行的功能。

*以上提供的动画未必能满足我们开发中所需的所有需求，所以要学会自定义动画。

  总结：自定义动画用animate({多个属性的键值对}，时间，函数)；

  结束动画:stop(参数1，参数2)

      参数1：清除队列中的所有动画  true

      参数2：让正在执行的动画直接跳到末尾状态 true

  延迟动画的方法

     delay(时间)--时间为毫秒数