jQuery中$this和$的区别介绍

Question

如题所述

Answer 1

$ 是JQuery对象，是JQuery 常用的一个回传函数，定义为 "选取" 英文是 selector 的缩写例子︰$.function();就是 选取 JQuery 定义的 function() 执行$('input')就是 选取 HTML 当中全部的 input 标签$('#abc')就是 选取 HTML 当中 ID 名称为 abc 的物件$.fn.testing = function() {}就是 选取 JQuery 内核函数 fn (函数) 回传给 testing 这个名称、定义为一个功能 function()

$this 只是个变量名，加$是为说明其是个jquery对象

// 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提供的方法操作。
            $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);
        }); 
    }; 
    // define our format function
    $.fn.hilight.format = function(txt) {
        return '<strong>' + txt + '</strong>';
    }; 
    // 插件的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)