day17

回顾

1 基本使用

2 jquery 选择器

3 筛选器

过滤

查找

串联

4 DOM 操作

内部插入

append()
appendTo()
prepend()
prependTo()

外部插入

after()
insertAfter()
before()
insertBefore()

包裹

wrap()
wrapAll()
wrappInner()
unwrap()

替换

replaceWith()
replaceAll()

删除

empty()
remove()

克隆

clone()

5 属性

# 属性
attr()
prop()
removeAttr()
removeProp()
​
# CLASS类
addClass()
removeClass()
toggleClass()
hasClass()
​
# 值/文本
html()   
text()
val()

6 样式

# css
css()
​
# 位置
offset()
position()
scrollLeft()
scrollTop()
​
# 尺寸
width() / height()
innerWidth() / innserHeight()
outerWidth() / outerHeight()

day17

笔记

1 jQuery 事件

1.1 事件的绑定和解除绑定

on(事件名, fn)
off()  解除事件绑定
one(事件名, fn)  仅仅绑定一次

1.2 代码触发事件动作

trigger(事件名)

1.3 委派

$('.list li').on('click', fn)
$('.list').on('click', 'li', fn)

1.4 特殊事件

ready()  事件  类似于onload     
hover()  事件  mouseenter 和 mouseleave 相结合的事件

1.5 事件列表

同之前的 jS 事件

1.6 事件对象

属性
offsetX, offsetY     鼠标在本元素上的位置
pageX, pageY         鼠标在页面上的位置坐标
clientX, clientY     鼠标在视口上的位置
which               按键的值(ASCII)或鼠标按键的值 （1，2,3）
target
​
#方法
stopPropagation()   
preventDefault()   

2 jQuery 动画

2.1 基本效果

hide([speed] [,fn])   隐藏
show([speed] [,fn])   显示
toggle([speed] [,fn])  切换
​
宽高(width/height padding) 透明度 变化

2.2 滑动效果

slideUp([speed] [,fn])  隐藏
slideDown([speed] [,fn])  显示
slideToggle([speed] [,fn])  切换
​
高度(height padding)  变化

2.3 淡入淡出

fadeOut([speed] [,fn])  隐藏
fadeIn([speed] [,fn])   显示
fadeToggle([speed] [,fn])  切换
fadeTo([speed,] opacity [,fn])
​
只有 opacity 的变化

2.4 自定义动画

animate(对象，speed, [fn])

2.5 动画控制

delay()  延迟
finish() 瞬间完成动画
stop()   停止动画
​
is(':animated') 判断是否在执行动画  返回boolean

2.6 jQuery 插件