Jquery 扩展学习

最新推荐文章于 2024-01-20 21:49:50 发布

ycmail

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量424

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/yuchen_0515/article/details/49153979

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

@{
    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>