jquery阻止默认行为_Jquery >>> 006

jQuery事件对象

只要是事件，就会有一个事件对象，可以使一个任意的参数名字进行接收。

type表示事件的名字：

currentTarget表示当前单击的对象：

event.pageX 和 event.pageY  获取鼠标相对于文档的X轴坐标，获取鼠标相对于文档的Y轴坐标

案例1：滚动条没有滚动的时候

案例2：滚动条有滚动的时候：

pageX和pageY是考虑滚动条滚动的距离的。

clientX和clientY是不考虑滚动条的情况。

screenX和screenY是相对于屏幕(电脑显示器)的左上角的坐标：

event.preventDefault()  阻止浏览器默认行为

这样就可以阻止浏览器进行跳转了。

event.stopPropagation()  阻止冒泡(有兴趣的话可以看看老师为大家准备的案例)

HTML结构如下：

效果如下：

默认情况下：下拉菜单是不显示的：

下面是JS脚本：

实现不了，单击显示下拉菜单，这就是典型的【冒泡】。那怎么解决呢？？？？

其它略，不常用

jQuery动画效果---基础动画效果

hide()  隐藏

案例1：不带参数，没有动画过渡效果。

案例2：带数字参数，有动画的过渡效果。

案例3：带预定速度的字符串，有动画的过渡效果。

案例4：用200毫秒将段落迅速隐藏，之后弹出一个对话框。

show()  显示

案例1：不带参数，没有动画过渡效果

案例2：带数字参数，有动画的过渡效果。

案例3：也是支持字符串(fast、normal、slow)的。

案例4：用200毫秒将段落迅速显示，之后弹出一个对话框。

toggle()  在show()显示和hide()隐藏之间切换

案例1：不带参数，没有动画过渡效果。

案例2：带数字参数，有动画的过渡效果。

案例3：带预定速度的字符串，有动画的过渡效果。

("slow","normal", or "fast")

案例4：用200毫秒将段落迅速显示和隐藏，并弹出对话框

案例5：如果没有toggle方法的话，可以像下面这样模拟。

jQuery动画效果---滑动动画

slideDown()  通过高度变化(向下增大)来动态地显示所有匹配的元素

注意：在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。

案例1：不带参数，有动画过渡效果。

案例2：带数字参数，有动画过渡效果。

案例3： 三种预定速度之一的字符串

       ("slow","normal", or "fast")

案例4：用200毫秒快速将段落滑下，之后弹出一个对话框

slideUp() 通过高度变化(向上减小)来动态地隐藏所有匹配的元素

注意：在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。

案例1：不带参数，有动画过渡效果。

案例2：带数字参数，有动画过渡效果。

案例3： 三种预定速度之一的字符串

案例4： 用200毫秒快速将段落向上滑动，之后弹出一个对话框

slideToggle()  通过高度变化来切换匹配元素的可见性。

注意：在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

案例1：不带参数，有动画过渡效果。

案例2：带数字参数，有动画过渡效果。

案例3： 三种预定速度之一的字符串

案例4： 用200毫秒快速将段落滑上或滑下，之后弹出一个对话框。

jQuery动画效果---淡入淡出动画

fadeIn()  通过不透明度的变化来实现匹配元素的淡入效果

注意：在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

案例1：不带参数，有动画过渡效果。

案例2：带数字参数，有动画过渡效果。

案例3：三种预定速度之一的字符串

案例4：用200毫秒快速将段落淡入，之后弹出一个对话框

fadeOut()  通过不透明度的变化来实现所有匹配元素的淡出效果

注意：在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

案例1：不带参数，有动画过渡效果。

案例2：带数字参数，有动画过渡效果。

案例3：三种预定速度之一的字符串

案例4：用200毫秒快速将段落淡出，之后弹出一个对话框

fadeTo()  把匹配元素的不透明度以渐进方式调整到指定的不透明度

注意：在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

案例1：带数字参数

案例2：三种预定速度之一的字符串

案例3：用1000毫秒快速将段落的透明度调整到0.3，之后弹出一个对话框

或是：

fadeToggle()  通过不透明度的变化来开关匹配元素的淡入和淡出效果

注意：在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

案例1：不带参数，有动画过渡效果。

案例2：带数字参数，有动画过渡效果。

或是：带两个参数。

用来指定切换效果，默认是"swing"，可用参数"linear"

案例3：三种预定速度之一的字符串

案例4：用200毫秒快速将段落淡入或淡出，之后弹出一个对话框

jQuery动画效果---自定义动画

animate()  用于创建自定义动画的函数

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。

注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

案例1：单击按钮，对象从左走到右。

案例2：单击按钮，对象从左走到右，需要3秒。

案例3：单击按钮，多参数变化的动画。

案例4：单击按钮，多参数变化的动画+背景颜色变化。

案例5：单击按钮，多参数变化的动画+回调函数。

经测试位置发生改变的属性和透明度.....自行测试一下，可以放到animate中，比如背景颜色、边框颜色不行。