自定义jquery插件

最新推荐文章于 2019-05-24 13:54:18 发布

灯光下的投影

最新推荐文章于 2019-05-24 13:54:18 发布

阅读量133

点赞数

分类专栏： JQuery 文章标签：自定义jquery插件

本文链接：https://blog.csdn.net/liuyuhua666/article/details/89787946

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、自定义backgrondColor插件：

jquery.bgc.js文件：

// jQuery.proptotype
// jQuery.fn
// $.prototype
// $.fn
$.fn.bgc = function(color) {
  // 修改jquery对象的背景颜色即可
  this.css('backgroundColor', color)
}

调用jquery.bgc.js插件：

<body>
  <div></div>
  <p>123</p>
  <script src="jquery-1.12.4.js"></script>
  <script src="jquery.bgc.js"></script>
  <script>
    $(function() {
      // jquery本身的方法是有限的
      // jquery插件就是给jquery对象增加了一些额外的方法，只要引入了jquery插件，jquery对象就多出来了一些方法

      // 如果想自己定义插件，只需要给jquery添加方法即可。


      // 给jquery的原型增加方法即可
      // jQuery.prototype.sayHi = function() {
      //   console.log('哈哈哈哈')
      // }
      
      
      // $('div').sayHi()
      $('div').bgc('red')

      $('p').bgc('yellow')


      // jquery插件的实质：  给jquery的原型增加方法
    })
  </script>
</body>

二、自定义拖拽插件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      div,
      p {
        width: 100px;
        height: 100px;
        background-color: pink;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div>222</div>
    <p>1111</p>

    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function() {
        /* 
        1. 给div注册mousedown事件
          1.1 获取到鼠标按下的位置
          1.2 给div注册mousemove事件
          1.3 获取到mousemove时鼠标的位置，让div跟着跑
        2. 给div注册mouseup事件
          2.1 清除mousemove事件
      */

        $.fn.drag = function() {
          var that = this
          // jquery的原型上的this指定的jquery的实例
          that.on('mousedown', function(e) {
            e.preventDefault()
            // console.log('鼠标按下了')
            // 记录鼠标在div中按下的位置
            // 直接可以获取到 鼠标在某个盒子中的位置
            var spaceX = e.offsetX
            var spaceY = e.offsetY

            $(document).on('mousemove', function(e) {
              e.preventDefault()
              // 让div跟着鼠标跑
              that.css({
                position: 'absolute',
                left: e.pageX - spaceX,
                top: e.pageY - spaceY
              })
            })
          })

          $(document).on('mouseup', function(e) {
            e.preventDefault()
            console.log('哈哈哈哈')
            // console.log('鼠标谈起了了')
            // 移除mousemove事件
            $(document).off('mousemove')
          })
        }

        $('div').drag()

        $('p').drag()

        // 什么是jquery插件
        // 一个单独的js文件，这个js文件依赖于jquery
        // 因为这个单独的js文件中给jquery的原型增加了方法
      })
    </script>
  </body>
</html>

灯光下的投影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义jquery插件

一、自定义backgrondColor插件：jquery.bgc.js文件：// jQuery.proptotype// jQuery.fn// $.prototype// $.fn$.fn.bgc = function(color) { // 修改jquery对象的背景颜色即可 this.css('backgroundColor', color)}调用jquery...
复制链接

扫一扫

专栏目录