jQuery中$this和$(this)的区别介绍(一看就懂)

前端之家收集整理的这篇文章主要介绍了jQuery中$this和$(this)的区别介绍(一看就懂)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<div class="jb51code">
<pre class="brush:js;">
// this其实是一个Html 元素。
// $this 只是个变量名,加$是为说明其是个jquery对象。
// 而$(this)是个转换,将this表示的dom对象转为jquery对象,这样就可以使用jquery提供的方法操作。

(function($){
$.fn.hilight = function(options){
debug(this);

    var defaults = {
        foreground: 'red',background: 'yellow'
    };

    var opts = $.extend({},$.fn.hilight.defaults,options);

    return this.each(function() {
  // this其实是一个Html 元素。
  // $this 只是个变量名,加$是为说明其是个jquery对象。
  // 而$(this)是个转换,将this表示的dom对象转为jquery对象,这样就可以使用jquery提供的<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>操作。
        $this = $(this);

        // build element specific options
        var o = $.<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> ? $.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);
    });

};


// define our format function
$.fn.hilight.format = function(txt) {
    return '<h3>' + txt + '</h3>';
};


// <a href="https://www.jb51.cc/tag/chajian/" target="_blank" class="keywords">插件</a>的defaults
$.fn.hilight.defaults = {
    foreground: 'red',background: 'yellow'
};

function debug($obj) {
    if (window.console && window.console.log){
        window.console.log('hilight selection count: ' + $obj.size());
    }
};

})(jQuery)

原文链接:https://www.f2er.com/jquery/53504.html

猜你在找的jQuery相关文章