事件委托、动画、插件

1. 动画
1.1 显示/隐藏
Hide() : 隐藏,无参是直接隐藏,第一个参数是毫秒数
show() : 显示,无参是直接显示出来,第一个参数是毫秒数
toggle() : 切换,显示就变隐藏,隐藏就变显示,第一个参数是毫秒数

第二个参数是回调函数,比如,2秒内显示完成,显示完成后把大小更改
因为动画效果本质就是定时器,而定时器实质会开启一个线程,和定时器之外的代码异步执行,假如我们需要在动画完成之后,要做一些其他操作,就需要用到第二个参数

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

1.2 淡入/淡出
fadeIn , fadeOut,fadeToggle , 用法同上

1.3 滑动
slideDown , slideUp,slideToggle , 同上

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

1.5 Stop

2. 事件
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,主要做遍历操作

3. 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之类的就是获取对应的值
两个参数是设置该元素的属性和值
只支持元素自带属性,不能自定义属性
一般用于表单操作,比如判断是否选中

4. 宽高相关
4.1 Width()和height()
只是宽高,不包含内外边距,无参是获取,有参是设置

4.2 InnerWidth()和innerheight()
包含内边距

4.3 outerWidth()和outerheight()
包含内边距和边框
如果想要获取外边距需要加 true

4.4 滚动条

5. 元素操作

5.1 Append
尾部追加元素,添加为子标签
$(‘#div’).append§

5.2 Prepend
插入到内部的首部

5.3 After
平级关系,插入到你后面

5.4 Before
平级关系,插入到你前面

5.5 Remove
删除一个节点

5.6 Empty
清空子节点

事件委托、动画、插件相关推荐

JavaScript之jQuery够用即可（事件委托、动画效果、扩展插件）
文章目录一.事件委托二.JS的动画效果三.扩展插件一.事件委托 1.事件委托其实就是给对象绑定一个事件,但是委托给它所属的每一个子对象了,因此每一个子对象都具有添加进的功能书写格式如下: ...
5选项卡(封装插件版)加事件委托版选项卡
HTML代码(两款HTML选项卡代码): 第一款:非事件委托版HTML代码: <!DOCTYPE html> <html> <head><meta chars ...
jQuery——进阶(动画、循环、正则、事件冒泡、事件委托、DOM)
目录特殊动画效果单标签操作链式调用循环遍历正则表达式事件冒泡事件委托创建标签 dom操作特殊动画效果 1.淡入淡出: fadeIn():淡入 fadeOut():淡出 fadeTog ...
四、jQuery 中的事件和动画(嘎嘎详细)
文章目录前言一.事件 1.1 加载 DOM 1.1.1 执行时机 1.1.2 多次使用 1.1.3 简写方式 1.2 事件绑定 1.2.1简单使用 1.2.2 简写绑定事件 1.3 合成事件 1. ...
基于OO的图片墙展示插件-----【如需动画展开需依附前面的动画插件】
最近项目不多,闲下来看到很多图片墙的展示效果,抽空也写了个小插件如下: PS:这个插件最好在页面载入下animation那个动画插件否则效果有点单一,动画插件地址是:http://blog.csdn ...
jQuery基础：下（事件及动画效果）
//.click()绑定单击事件,回调函数中的参数是当前的jQuery事件$('.i1').click(function(e) {alert('w shi ni baba!');console.log ...
html数字变换插件,轻量级jquery数字动画插件
jquery.countup.js是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 该数字动画插件可以控制动画的延迟时间和动画过渡时间.它依赖于 ...
事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
用一个简单的例子来演绎事件委托
本篇博文,Insus.NET想使用一个超简单的例子来演绎事件委托. 我们在开发网页时,刚开始时在网页的顶部放一个铵钮(web control),想实现一个功能. 在xxx.aspx.cs: OK,某一 ...

事件委托、动画、插件

事件委托、动画、插件相关推荐

最新文章

热门文章