事件委托、动画、插件、Ajax

Day42 事件委托、动画、插件、Ajax

1. 动画

   1.1 显示/隐藏

   Hide() : 隐藏,无参是直接隐藏,第一个参数是毫秒数

   show() : 显示,无参是直接显示出来,第一个参数是毫秒数

   toggle() : 切换,显示就变隐藏,隐藏就变显示,第一个参数是毫秒数

第二个参数是回调函数,比如,2秒内显示完成,显示完成后把大小更改

因为动画效果本质就是定时器,而定时器实质会开启一个线程,和定时器之外的代码异步执行,假如我们需要在动画完成之后,要做一些其他操作,就需要用到第二个参数

新事件 - toggle,需要引入1.8.3的jQuery包

这里的toggle方法：toggle传入两个方法，第一次点击执行第一个，第二次执行第二个 ------------

1.2 淡入/淡出

fadeIn , fadeOut,fadeToggle , 用法同上

1.3 滑动

slideDown , slideUp,slideToggle , 同上

1.4 自定义

以上几种方法,都不是我们想要的效果,我们就可以通过animate进行自定义

1.5 Stop

1.6 案例

1. 事件

   2.1 事件注册

   Bind和on可以绑定多个事件,但是不能动态绑定(后添加的元素,不会拥有该事件)

   

   

   

2.2 事件委托

本质就是利用冒泡机制和事件源,对父标签绑定事件,然后通过子标签去触发执行

这样可以进行事件的动态绑定,使新增元素也拥有事件监听

2.3 Event

event对象有以下属性

type：事件类型，比如click。

which：触发该事件的鼠标按钮或键盘的键。

target：事件发生的初始对象,事件源(谁触发的这个事件)。

data：传入事件对象的数据。

pageX：事件发生时，鼠标位置的水平坐标（相对于页面左上角）。

pageY：事件发生时，鼠标位置的垂直坐标（相对于页面左上角

Key,keyCode,target,type,pageX,pageY,data

2.4 Each

就是forEach,主要做遍历操作

1. HTML设置与捕获

3.1 Html()

Html() 等价于 innerHTML

无参是获取,有参是设置

3.2 Text()

Text() 等价于 innerText

无参是获取,有参是设置

3.3 Val()

Val()等价于 value , 常用于表单操作

无参是获取,有参是设置

3.4 Attr()

属性操作,等价于 setAttribute和getAttribute

一个参数是获取对应的属性值,两个参数是设置该属性的值

可以自定义属性,但是 输入框相关的,比如checked等 获取不到

3.5 Prop()

一个参数,如果是表单的checked等,就是判断该元素是否有该属性(是否被选择)

如果是id,class之类的 就是获取对应的值

两个参数是设置该元素的属性和值

只支持元素自带属性,不能自定义属性

一般用于表单操作,比如 判断是否选中

1. 宽高相关

   4.1 Width()和height()

   只是宽高,不包含内外边距,无参是获取,有参是设置

   

4.2 InnerWidth()和innerheight()

包含内边距

4.3 outerWidth()和outerheight()

包含内边距和边框

如果想要获取外边距 需要加 true

4.4 滚动条

1. 元素操作

5.1 Append

尾部追加元素,添加为子标签

$(‘#div’).append§

5.2 Prepend

插入到内部 的首部

5.3 After

平级关系,插入到你后面

5.4 Before

平级关系,插入到你前面

5.5 Remove

删除一个节点

5.6 Empty

清空子节点