1.回顾
节点.append(内容)
节点.prepend(内容)
节点.remove()
节点.attr("属性","值")
节点.css("样式","值")
节点.html() .text .val()
2.本章目标
掌握jquery 的事件与动画
3.事件
在某个特定的条件下会被执行的一段代码,事件通常用来与用户进行交互
常用的事件:load,click,focus(获取焦点),blur(失去焦点),mousrmove()
4.加载事件
js:window.οnlοad=function(){
//逻辑代码
}
//在jquery1.8+杯废弃
jquery:
$(window).load(function(){
//逻辑代码
})
$(document).ready(function(){
//逻辑代码
})
$().ready(function(){
//逻辑代码
})
$(function(){
//逻辑代码
})
5.绑定事件
绑定单个事件:
对象.bind("事件名",function(){
//逻辑代码
})
绑定多个事件
//第一种写法
对象.bind("事件1",function(){
//逻辑代码
})
.bind("事件2",function(){
//逻辑代码
})
//第二种写法
对象.bind({
"事件1":function(){},
"事件1":function(){}
...........
})
完成:可编辑的表格 (鼠标移动离开变色) 代码如下
| 姓名 | 性别 | 年龄 |
| 张三 | 男 | 20 |
| 李四 | 男 | 21 |
| 王五 | 男 | 22 |
6.事件的冒泡
页面元素有嵌套时,若同时绑定了同一事件,触发事件时,会由里到外依次执行
解决方案:
方案一:只需要在事件代码中添加:return false;
方案二:需要在事件函数中添加参数(event),代码末尾中添加:event.stopPropagation()
p内容
7.模拟触发事件
不需要用户主动触发,就可以执行的事件
比如:按钮通常都需要用户点击时才会执行一段代码,使用模拟触发事件,用户不需要点击按钮,也能执行单击事件代码
语句:
对象.trigger("事件/自定义事件")
8.合成事件
把多个事件合到一起执行
鼠标的移入移出
对象.hover(function(){},function(){})
模拟鼠标的悬停事件,鼠标悬停时触发第一个函数执行,鼠标离开触发第二个函数执行
鼠标的单击合成
对象.toggle(function(){},function(){},...............)
模拟鼠标的单击合成事件,鼠标单击一次执行第一个函数,鼠标点击两次执行第二个函数............
在jquery1.8之后被弃用了
- 添加
- 修改
- 删除
操作2
- 添加
- 修改
- 删除
9.动画
hide([毫秒数]),show([毫秒数]) 显示隐藏动画
slideUp([毫秒数]),slideDown([毫秒数])向上,向下滑动
fadeIn([毫秒数]),fideOut([毫秒数]) 淡入淡出动画
自定义动画
对象.animate({"属性1":"值1","属性2","值2".......},毫秒数,[回调函数])
注意:如果想要使用left,right,top,bottom属性,需要把元素设置为position,absolute或者relative
10.停止动画
对象.stop()
判断动画是否处于活动中
if(对象.is(":animated")){
}
案例 实现 正方形放大缩小效果(随时都能停止)
作业1
使用jquery实现光棒效果
hover()事件
addClass()和removeClass()方法
代码
光棒效果
| 全选 | 学号 | 姓名 | 年龄 | 性别 |
|---|---|---|---|---|
| s001 | 张三 | 22 | 男 | |
| s002 | 李四 | 22 | 女 | |
| s003 | 王五 | 22 | 女 | |
| s004 | 马六 | 22 | 男 | |
| s005 | 李七 | 22 | 女 |
总结 全选反选 出了一点问题 改进了!!!!加了true 和false
作业2
使用jquery实现流式导航菜单
主要知识点
.slideDown()方法 和slideUp()方法
代码如下()
流式导航菜单
全选反选 简洁代码
简洁
作业3
广告图片的幻灯片播放效果
(百度的,)