JavaScript必备小知识-jquery(五)插件等相关

143 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

接前文继续来学习 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() 可以设置 也 可以获取