码迷,mamicode.com
首页 > Web开发 > 详细

jquery的扩展:编写好代码封装起来供他人使用

时间:2021-02-16 12:19:06      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:rap   方法   cond   oct   ice   代码   src   device   idv   

 知识点在:《 html5  app 应用开发教程》第209页

jQuery的扩展可分为两类
1: jquery全局函数的扩展
语法的定义:
$.extend({
  定义的函数名:function(){}

}) 语汇的调用:
onclick="$.函数名()"
2: jquery对象的扩散
1: jquery全局函数的扩展
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>bootStrap4习</title>
        <link rel="stylesheet" href="bootstrap-4.6.0-dist/css/bootstrap.min.css">

    </head>

    <body>
        <div class="container">
            <h3 class="warning" >查看容器</h3>
        </div>
        <div id="result">此节点值将被初化而改变</div>
        <button class="btn btn-secondary" onclick="$.addId(‘result‘)">调用自定义全局对象table下的init()</button>
        <button class="btn btn-secondary" onclick="$.table.init(‘result‘)">调用自定义全局对象table下的init()</button>
        
                
        <!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" ></script>-->
        <script src="bootstrap-4.6.0-dist/js/jquery-3.5.1.js"></script>
        <script src="bootstrap-4.6.0-dist/js/bootstrap.bundle.js"></script>
    </body>
</html>
<script type="text/javascript">
    //jQuery的全局扩展,开发自己的table插件
    /* 
     
     */
    $.extend({
        //1:全局自定义函数的方法实现把值持挂载到节点上
        addId:function(idValue){
            $("#"+idValue).html("<h3  style=‘color:red;‘>通过自定义全局方法,我将被挂载到指的节点上哦</h3>")
        },
        //2:全局自定义对象的方法init()实现挂载到节点上
        table:{
            //根据id的值,把指定的html("<h3 style=‘color:red;‘>被自定义插件挂载到指定节点上</h3>")代码挂载到指定节点上
            init:function(idValue){
                //挂载数据到节点idVale上
                $("#"+idValue).html("<h3  style=‘color:red;‘>通过自定义对象(table)下的方法.我将被挂载到指的节点上哦</h3>")
            }
        }
    })
     
    //也可直接不通过如下代码执行语句来加载
     // $.table.init(‘result‘)
</script>

 

jquery的扩展:编写好代码封装起来供他人使用

标签:rap   方法   cond   oct   ice   代码   src   device   idv   

原文地址:https://www.cnblogs.com/asplover/p/14399274.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!