事件注册
-
简单事件注册
jQuery中的简单事件注册 将原生的js事件封装成了函数
// jQuery中的简单事件注册都支持对于同一事件源注册多个相同的事件
$(btn).click(function (){
console.log(123);
})
$(btn).click(function (){
console.log(456);
})
$(btn).click(function (){
console.log(789);
})
-
on的方式注册事件
jQuery当中推荐使用on的方式,这是最现代,最高效的
zepto
是移动端的jQuery也支持on的事件注册
$('#btn').on('click',function (){
console.log(123);
})
$('#btn').on('click',function (){
console.log(456);
})
动画
jQuery动画的特点:简约、“粗暴”、干净利落、直截了当,所有的动画都支持时间和回调函数
show/hide/toggle 操作的属性: width height opacity display:none
slideDown/slideUp/slideToggle 操作的属性: height display:none
fadeIn/fadeOut/fadeTo/fadeToggle 操作的属性: opacity display:none
animate({},speed,callback) 参数必须是对象
mousenter与mouseleave
用法和mouseover与mouseout是类似的,不同点是处理了冒泡
通过调试发现,从大盒子到小盒子的进入只会触发小盒子的mouseenter事件,其它事件不触发
从小盒子进入大盒子时,只会触发小盒子的mouseleave事件,其它事件不触发
动态创建元素
- $()
- html()
操作节点
- 动态创建节点
- $()
- html()
- 追加节点
- append
- appendTo
- prepend
- after
- before
删除节点
- empty()
- html(’’)
- remove()
克隆元素
- clone(true/false)
- 无论是true还是false都表示深度克隆,即会克隆标签及标签间的一切内容
- 参数为true还会克隆事件,false不会克隆事件
获取或设置表单的值
- val()
设置或获取标签的标准或自定义属性
- attr()
- prop() disabled checked selected
其它样式设置
- width() 一般用于获取页面可视区的大小
- height() 一般用于获取页面可视区的大小
- offset() 返回值 是一个对象,获取的是当前标签对象到页面的距离,与父元素有无定位没有关系
- position() 返回值也是一个对象,与父元素的有无定位有关系
- scrollLeft() 获取或是设置页面被卷去的左侧的距离
- scrollTop() 获取或是设置页面被卷去的顶部的距离
链式编程的原理
- 链式编程的原理,就是当前jQuery对象调用完了这个方法后,这个方法还是返回当前jQuery对象
- 链式编程多用于设置的操作的地方
each
- 可以用来遍历jQuery对象,数组,普通对象
- 一定要使用jQuery对象来调用
jQuery中的常用方法(03-常用方法对比.avi)
原生javascript | jQuery中的方法 |
---|---|
innerText/TextContent | text() |
innerHTML | html() |
style.width/height/top | css(属性名,属性值)/css({}) |
box.className=’’ | addClass()/removeClass()/hasClass()/toggleClass() |
原生javascript中的标签索引 | index() |
表单的值value | val() |
setAttribute/getAttribute | attr(属性名,属性值)/prop() |
nextSibling/nextElementSibling | next() |
previousSibling/previousElementSibling | prev() |
firstChild/firstElementChild | first()/:first |
lastChild/lastElementChild | last()/:last |
scrollLeft/scrollTop | scrollLeft()/scrollTop() |
clientWidth/clientHeight | width()/height() |
offsetLeft/offsetTop | position() |
children | children([选择器]) |
cloneNode(true/false) | clone(true/false) |
父元素.appendChild(子元素) | append() |
insertBefore | insertBefore() |
jQuery中的事件注册
1.简单事件注册
jQuery中的简单事件注册,可以对同一事件源注册多个相同的事件,互相不冲突,也没有兼容性的问题
2.bind的方式注册事件(了解)
.bind(type,callback)-
- 优点:
- 可以对同一事件源注册多个不同的事件,这些事件的事件处理程序是同一个
- 缺点:
- 不支持动态创建出来的元素
3.delegate的方式注册事件(了解)
.delegate(selector,type,callback)
- 优点:与前两种方式最大的优势:减少事件绑定次数提高效率,支持动态创建出来的元素绑定事件!
4.on的方式注册事件(重点,最现代的方式)
- 优点:可以实现以上方式注册事件所有的功能
jQuery中的事件解绑
1.unbind
2.undelegate
3.off
多库共存
1.在一个项目当中有可能会引入多个方法库文件
插件的使用
1.为什么要使用插件
因为jQuery中的方法虽然很丰富,但是并不是面面俱到,并不是十全十美的,比如说animate中就不能实现背景颜色的动画 ,此时就需要借助于插件来完善当前的功能
插件的使用步骤:
1.jQuery.color.js
- 1.引入jQuery文件
- 2.引入jQuery.color.js文件
- 3.调用animate方法
2.jQuery.ui.js
* 1. 引入css样式
* 2. 引入jquery文件
* 3. 引入插件文件
* 4. 复制对应的html结构代码到页面当中
* 5. 调用对应的方法
3.jQuery.lazyload.js
* 1. 先引入img插件结构
* 2. 引入jQuery文件
* 3. 引入插件文件
* 4. 调用对应的方法
##如何制作插件
在插件函数当中this表示jQuery对象
1.函数扩展法
- $.pluginName =function(参数){}
2.对象扩展法
- $.fn.pluginName = function(参数){}
is与:animated
- is用于判断是不是某个元素或者某个元素是否具有某个状态
- :animated是一个选择器,只有具有运动状态的标签对象才可以用这个选择器来选取