Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

JQuery 'this' keyword

  1. Aug 25, 2009 #1
    I've read in several sources that the keyword 'this', and have come up with the following summary:

    But I am having difficulty with the context it is used, and having a difficult time trying to understand it's equivalent. I've also attached the HTML file (if necessary, and if people have the time to read)

    -------------------------------------------------------------------------------------
    This is a .js segment of code I would like to look at (for those that also have the time):
    -------------------------------------------------------------------------------------

    //jQuery allows for the web-page to behave dynamically.

    var holder = $.fn;
    holder.extend({
    SplitID : function()
    {
    return this.attr('id').split('-').pop();​
    },​

    Slideshow : {
    Ready : function()
    {
    $('div.tmpSlideshowControl')
    .hover(
    function() {
    $(this).addClass('tmpSlideshowControlOn');​
    },​
    function() {
    $(this).removeClass('tmpSlideshowControlOn');​
    }​
    )​
    .click(
    function() {
    holder.Slideshow.Interrupted = true;

    $('div.tmpSlide').hide();
    $('div.tmpSlideshowControl').removeClass('tmpSlideshowControlActive');

    $('div#tmpSlide-' + $(this).SplitID()).show()
    $(this).addClass('tmpSlideshowControlActive');​
    }​
    );​

    this.Counter = 1;
    this.Interrupted = false;

    --------------------------------------------------------------------------------------
    My Question:

    1.)
    Every keyword 'this' could be removed from the segment of code above, except for 'this.Counter = 1'. But for the rest of the code why not just remove it? For instance "$(this).whatever." could simply just be written as "$.whatever".

    2.)
    Ready() is not a callback function, so the keyword 'this' used in this segment refers to a jQuery element. Instead of writing 'this', could we write the element's name in its place? For instance $(element's name).removeClass('tmpSlideshowControlOn'); (elements name for a slide show would be the ID name defined in the HTML?)?​

    3.)
    Why is the keyword 'this' is required in this.Counter = 1? Is it because 'this' refers to a DOM element, or because Counter is a new variable, I am pretty confused? When I wrote this.Counter=1 as holder.Slideshow.Counter = 1, the page loaded the same- from which I concluded both are the same. But the question remains, why is this required here, and other portions (above that particular line) of the code, I could remove the keyword 'this'?​

    Any help would be great, thanks.​
     

    Attached Files:

    Last edited: Aug 25, 2009
  2. jcsd
  3. Aug 25, 2009 #2
    Question #3:
    I think the answer to #3 is because Counter was not previously defined, so we had to define it within the jquery object Slideshow. Otherwise the variable Counter would be syntaxically incorrect.

    Question #2 (and thus #1):
    All the references to the keyword 'this' could be replaced with holder.Slideshow (or could be completely removed, unless a new variable is being declared), which leads me to conclude that the keyword 'this' is something of a convention of style (in my opinion useless). Thus, I feel that I've answered my own questions, but if I'm wrong in anyway, could someone be kind enough to let me know.

    Thanks,

    JL
     
    Last edited: Aug 25, 2009
  4. Aug 25, 2009 #3

    Borg

    User Avatar
    Science Advisor
    Gold Member

    'this' is a keyword in Javascript (and Java) and is not specific to JQuery. This site should help with what you're trying to understand: http://www.quirksmode.org/js/this.html" [Broken]
     
    Last edited by a moderator: May 4, 2017
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook




Similar Discussions: JQuery 'this' keyword
  1. JQuery notation (Replies: 1)

  2. Javascript/Jquery hep (Replies: 2)

  3. This keyword in Java (Replies: 2)

  4. Jquery AJAX input (Replies: 1)

Loading...