zoukankan      html  css  js  c++  java
  • Jquery扩展方法

        网上搜索了信息在编写JQUERY扩展方法有两种,一种是使用jquery.fn.extend,一种是jquery.extend.

    jquery.fn表示jquery.prototype,,给jquery对象添加方法。刚好用到扩展方法,并且使用jquery.fn,这里就写下jquery.fn的用法,这些网上很多

     

    比如当点击 button时弹出一个textbox的值加一个参数值

    jquery.fn.extend({

          alertMessage:function(message){

              var txtboxValue = $(this).val();//使用$(this)表示对哪个对象添加了扩展方法,这里是指$('#textbox' )

              alert(txtboxValue + message);

         }

    });

    $(function(){

        $("input[name='btn' ]").click(function(){

              $('#textbox' ).alertMessage("是字符串");

       })

     

    })

     

    html:

    <input type='button' name='btn' value='Alert'/>

    <input type='text' id='textbox' value='abc'/>

    自定义jquery插件

    (function ($) {
        $.fn.myPlugin = function () {
            this.fadeOut('normal');
        };
    })(jQuery);


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="JTableAspNetWebFormsDemos.WebForm2" %>


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
        <script src="Scripts/myJs/Message.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("input[name='btn' ]").click(function () {
                    $("#div1").myPlugin();
                })
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <input type='button' name='btn' value='Alert' />
            <input type='text' id='textbox' value='abc' />
        </div>
         <div id="div1" style=" 400px; height: 30px; background-color: Gray;">
            My God</div>
        </form>
    </body>
    </html>

     回调函数:

    var ohter = {
        add: function (fn, name, pwd) {
            name = "habolong";
            pwd = "123456";
            var newstr = name + pwd;
            //执行回调函数
            fn(newstr,1,2,3,4,5,6,7,8,9);
        }
    }


    <body>
        <form id="form1" runat="server">
        <div>
            add
        </div>
        <script type="text/javascript">


            ohter.add(otherfn, "123", "456"
        );
        function otherfn(a,b,c,d,e,f,f,g,h,r,h,ii){
            var _1=a; 
        }
        </script>
        </form>
    </body>

    var o = {};
    这样就是新建一个object对象


    var o = new Object();
    o.prototype.add = function() {};

  • 相关阅读:
    haproxy 2.5 发布
    cube.js sql 支持简单说明
    基于graalvm 开发一个cube.js jdbc driver 的思路
    apache kyuubi Frontend 支持mysql 协议
    oceanbase 资源池删除说明
    基于obd 的oceanbase 扩容说明
    jfilter一个方便的spring rest 响应过滤扩展
    cube.js schema 定义多datasource 说明
    typescript 编写自定义定义文件
    meow 辅助开发cli 应用的工具
  • 原文地址:https://www.cnblogs.com/wangyhua/p/4050616.html
Copyright © 2011-2022 走看看