小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
接前文继续来学习 jquery 学习小结: 本文来学习 jquery 的插件及宽高操作等, 相对比较实用的
1、梳理知识点
mouseover 和 mouseenter 区别 :
- mouseover 会产生冒泡现象 只要焦点发生改变就会触发该事件
- mouseenter 不会冒泡 (项目中使用)
$().事件(function () {
/// 函数操作方法
})
事件绑定 : bind() 的用法 :
对象.bind("事件",function(){ })
对象.bind({
事件 : function(){},
事件 : function(){},
.....
})
unbind() 解除绑定
事件委托 delegate: 对象.delegate("事件源",事件,function(){
}) 取消委托 : undelegate
事件绑定 + 事件委托 : on ---- off 事件绑定 用法 和 bind() 事件委托 用法 : 对象.on(事件 , "事件源" , function(){
})
事件切换 hover 用法 :
对象.hover(function(){
mouseenter
},function(){
mouseleave
})
jquery 插件
插件--工具 定义插件的方式 :
方式一:
$.extend({
//...
})
调用 : $.方法() 全局方法
方式二 :
$.fn.extend({
})
调用 : jq 选择器.方法() 局部方法
1、jquery 的宽度和高度
- width()/height()获取实际宽度
- outerWidth()/outerHeight() 获取 实际宽度 + padding + border
- innerWidth()/ innerHeight() 获取实际宽度 + padding
2、jquery 中的坐标
- offset() 返回值是一个 json 对象 有两个属性 left top 获取相对于 body 的上偏移和左偏移
- position() 获取离该元素最近的具有定位的元素的左偏移和上偏移 返回值也是一个对象 有 left 和 top 两个属性
注意: 上面两个方法的特点 : 只能获取 不能设置
3、jq 获取页面滚走距离
scrollTop() 可以设置 也 可以获取