Jquery 扩展学习

来源：互联网发布：指南数据库编辑：程序博客网时间：2024/05/18 11:13
@{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport" content="width=device-width" />    <title>JqueryIndex</title>    <script src="~/docs/js/jquery-2.1.3.min.js"></script>    <script>        // 创建一个闭包        (function ($) {            // 插件的定义            $.fn.hilight = function (options) {                debug(this);                // build main options before element iteration                var opts = $.extend({}, $.fn.hilight.defaults, options);                // iterate and reformat each matched element                return this.each(function () {                    $this = $(this);                    // build element specific options                    var o = $.meta ? $.extend({}, opts, $this.data()) : opts;                    // update element styles                    $this.css({                        backgroundColor: o.background,                        color: o.foreground                    });                    var markup = $this.html();                    // call our format function                    markup = $.fn.hilight.format(markup);                    $this.html(markup);                });            };            // 私有函数：debugging            function debug($obj) {                if (window.console && window.console.log)                    window.console.log('hilight selection count: ' + $obj.size());            };            // 定义暴露format函数            $.fn.hilight.format = function (txt) {                return '<strong>' + txt + '</strong>';            };            // 插件的defaults            $.fn.hilight.defaults = {                foreground: 'red',                background: 'yellow'            };            // 闭包结束        })(jQuery);        //(function($) {        //    $.fn.extend({        //        hilight: function(options) {        //            //var defaults = {        //            //    foreground: 'red',        //            //    background: 'yellow'        //            //};        //            var $this = $(this);        //            var opt = $.extend({},$.fn.hilight.defaults,options);        //            var o = $.extend($.mate?$.extend({},opt,$this.data):opt);        //            $this.css({        //                backgroundColor: o.background,        //                color: o.foreground        //            });        //        }                        //    });        //    $.fn.hilight.defaults = {        //        foreground: 'red',        //        background: 'yellow'        //    };        //})(jQuery);        $(document).ready(function () {            //$('#myDiv').hilight({                      //});            $('.hilight').hilight();        });    </script></head><body>    <div id="myDiv" class="hilight { background: 'red', foreground: 'white' }">myDiv</div><div>    @*<ul id="ul">                <li>1</li>                <li>2</li>                <li>3</li>                <li>4</li>            </ul>*@</div>    <div class="hilight { background: 'red', foreground: 'white' }">        Have a nice day!    </div>    <div class="hilight { foreground: 'orange' }">        Have a nice day!    </div>    <div class="hilight { background: 'green' }">        Have a nice day!    </div>   </body></html>
0 0