获取在JQuery中调用函数的元素?

时间:2016-07-08 11:27:44

标签: javascript jquery prototype

我有两个JQuery元素,如$("myDiv2")SetText(),我为它定义了一个名为SetText的原型, 在myDiv1实施中,如果我$("myDiv1").SetText() public static System.Drawing.Bitmap rotatedImage(System.Drawing.Bitmap img, double deg, bool hq) { int diag = (int)Math.Round(Math.Sqrt(img.Width * img.Width + img.Height * img.Height)); System.Drawing.Bitmap res = new System.Drawing.Bitmap(diag, diag); System.Drawing.Graphics gfx = System.Drawing.Graphics.FromImage(res); if (hq) gfx.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; DoublePair rotCent = new DoublePair(diag / 2, diag / 2); gfx.TranslateTransform((float)rotCent.a, (float)rotCent.b); gfx.RotateTransform((float)deg); gfx.TranslateTransform((-1) * (float)rotCent.a, (-1) * (float)rotCent.b); gfx.DrawImage(img, (diag - img.Width) / 2, (diag - img.Height) / 2, img.Width, img.Height); return res; } ,我怎么知道MAILTO:是谁? 谢谢,

1 个答案:

答案 0 :(得分:1)

您使用this

  • 在你的插件代码中,它将引用你的插件被调用的jQuery对象
  • 在事件处理程序等中,它引用DOM元素

带有选项和几种方法的简单插件的快速示例:



// Our "nifty" plugin.
// Note this is an ES5 and earlier example, no ES2015+ features used.
(function($) {
  // Convenient access to Array#slice
  var slice = Array.prototype.slice;
  
  // Our event namespace
  var eventNS = ".nifty";
  
  // Our data name for options
  var optionsName = "options.nifty";
  
  // Some default options
  var niftyDefaults = {
    color: "green",
    text: "default text"
  };
  
  // Our methods
  var methods = {
    init: nifty$init,
    destroy: nifty$destroy,
    options: nifty$options,
    settext: nifty$settext
  };
  
  // Main plugin function
  $.fn.nifty = function(options) {
    // Note that here, `this` is the jQuery object our plugin was called on.
    var method, args;
    
    // Determine the method to call and arguments to it
    if (typeof options === "string") {
      // Method call
      method = options;
      args = slice.call(arguments, 1); // 1 = skip the method name
    } else {
      // Init
      method = "init";
      args = slice.call(arguments, 0); // 0 = copy all
    }
    
    // Call the method, return the result
    return methods[method].apply(this, args);
  };
  
  // Because of the way we call them, `this` in all of our methods below
  // is the jQuery object we were called on
  
  // Init
  function nifty$init(options) {
    // Initialize each element individually
    this.each(function() {
      // Note that here, `this` is the DOM element for this iteration of
      // the `each` loop. Save the options; each element gets its own copy.
      $(this).data(optionsName, $.extend({}, niftyDefaults, options));
      // If we had other per-element init, we'd do it here.
    });
    
    // Let's have our "nifty" set up an event handler when initialized.
    // We do it here because we don't need a separate handler for each
    // individual element.
    this.on("click.nifty", function() {
      // Resond by setting the color according to this specific
      // element's options.
      var $this = $(this);
      $this.css("color", $this.data(optionsName).color);
    });
    
    // The main init of a plugin should almost always return `this`
    // for chaining
    return this;
  }

  // Plugins should always have a "destroy" method that undoes what they do
  // in init. It should handle it gracefully if init hasn't been called on
  // the elements.
  function nifty$destroy() {
    // Remove our event handler
    this.off("click" + eventNS);

    // Remove the event data
    return this.each(function() {
      $(this).removeData(optionsName);
    });
  }
  
  // Our "options" method
  function nifty$options(newOptions) {
    // For each element in the matched set, update the options.
    // Note how we're returning the return value from `this.each`, which is
    // `this`. A method should always return `this` unless it has a good
    // reason for doing something else.
    return this.each(function() {
      var $this = $(this);
      var opts = $this.data(optionsName);
      checkForInit("options", opts);
      $this.data(optionsName, $.extend({}, opts, newOptions));
    });
  }

  // Our "settext" method
  function nifty$settext() {
    // Set the text on each matched element individually, according to its
    // options.
    return this.each(function() {
      var $this = $(this);
      var opts = $this.data(optionsName);
      checkForInit("settext", opts);
      $this.text(opts.text);
    });
  }

  // Worker function, throws exception if a method is called on an
  // un-initialized element.
  function checkForInit(method, opts) {
    if (typeof opts === "undefined") {
      throw new Error(method + " cannot be called until `nifty` has been initialized on the element");
    }
  }
})(jQuery);

// Using it -- init
$(".foo").nifty({color: "blue"});
$(".bar").nifty({text: "bar text"});

// Calling methods - give different texts to each of the foos, override
// the color we use on the last one
$(".foo")
  .first()
  .nifty("options", {text: "I'm the first foo"})
  .end()
  .last()
  .nifty("options", {text: "I'm the last foo", color: "orange"});
         
// Call "settext" on all the foos and bars
$(".foo, .bar").nifty("settext");

// Destroy "nifty" on bar
$(".bar").nifty("destroy");

// Prove that we did and that methods complain
try {
  $(".bar").nifty("options", {color: "blue"});
  console.log("Shouldn't get here");
} catch (e) {
  console.log("Correctly got error: " + e.message);
}

<div>Click each of the three divs below.</div>
<div style="padding: 8px; border: 1px solid #ddd">
  <div class="foo">foo1</div>
  <div class="foo">foo2</div>
  <div class="bar">bar</div>
</div>
<div>Note that clicking the 'bar' element doesn't change its color, because we destroyed the nifty plugin on it after using nifty to set its text</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
&#13;
&#13;
&#13;