1

What exactly happens underneath (I know it changes the paragraph tag's HTML when the circular div is clicked) when I run this piece of code? Could you please explain the callback function as well.

<script type="text/javascript">
    $("#circle").click(function() {
        $("p").html("You clicked the circle");
     }
</script>

I am aware of the observable changes that take place. What exactly happens underneath when I run this code? Does jQuery convert the resulting code to JavaScript? It would be great if someone could give me a blow by blow account.

This is a part of my question that I had earlier posted on StackOverflow. It got down voted for being too broad.

Thanks :)

  • 2
    The reason your question was deemed Too Broad on Stack Overflow is because we don't know your knowledge level. Assuming that you have a basic understanding of Javascript and HTML, we'd have an awful lot of ground to cover. An adequate answer to your question could very well exceed the 30,000 character limit imposed by the SE software. I suspect you want to know something more specific than that. – Robert Harvey Jun 23 '16 at 2:02
  • 2
    Fundamentally, $ is an alias for the jQuery object, which contains all of the function implementations necessary to make jQuery work. This is explained at How jQuery works. It's not a conversion to Javascript; you're simply calling Javascript functions. – Robert Harvey Jun 23 '16 at 2:05
  • @RobertHarvey I did mention my knowledge level. I wanted a blow by blow account of what happens when a browser reads JavaScript and I also asked additional 2 questions (which made it very broad). I ended up asking it on Reddit. Getting the hang of asking the right questions. – Abhirath Mahipal Jun 23 '16 at 2:49
  • I think you should read the annotated source code of jquery as well as watch paul irish's videos on jquery. That would give you a better idea of how jQuery works. – Vinit Kumar Jun 23 '16 at 5:34
  • What exactly happens underneath? There is only one way to answer, and this is looking at the jquery source: github.com/jquery/jquery/tree/master/src – JacquesB Jun 23 '16 at 6:25
4

A high-level dissection of the code posted:

<script type="text/javascript">

Html-element to embed a script in it

$("#circle")

$ is the jQuery alias for getting the jQuery object which wraps almost all of the stuff jQuery can do. In this case we simply invoke the jQuery object with syntax similar to that of a constructor. This is shorthand for "pass in a css-selector and return all matched DOM elements wrapped as jQuery elements". So we select the element in the DOM with id=circle

  .click(

This is (one of many) jQuery-ways to say when the element(s) - the previous selector could have returned a ton of elements - is clicked run the function passed into me. This function is called a callback-function. Basically subscribing to the onclick event of the DOM element.

    function() {

.. the callback passed in...

      $("p")

Similar to the $("#circle")-statement. Select all paragraph-elements in the DOM as jQuery elements. (<p></p>)

       .html("You clicked the circle");

For all p-elements previously selected set the inner html of this elements to be "You clicked the circle". Note; You should almost never want to do this for security reasons - use .text() instead.

   }

.. close the call back ..

)

.. Honorably mention; You forgot to close the click()-function :) The code as-is will still work though, since javascript is forgiving (For better or for worse, that's another story)

</script>

.. closing the script-tag..

As it has been stated, this is a really broad question even though it does not look like it. For all the above paragraphs you could probably write a page of what it really does under the hood, but that's the gist of it.

For your question "Does jQuery convert the resulting code to JavaScript?". Not really. jQuery is implemented in javascript, so you can simply think of it as a wrapper library. jQuery serves two main purposes: 1) Providing an API that works regardless of browser types. So for example, if Safari has some quirks working with the onclick-event but firefox follows the spec, jQuery will take care of this under the hood for you (Not the the Safari/Firefox example is purely made up, none of those should have quirks). And 2) provide QoL-improvements such as CSS-selectors, although those have since been implemented in ES5 or ES6, can't remember which. When jQuery came out you had to call document.getElementById() or a similar DOM-method to select elements.

At the risk of starting a religious war, jQuery has nowadays largely served its purpose. Most of the stuff that made jQuery popular is now implemented in recent ECMAScript-versions and most browsers are now updated to at least include the basic stuff. Personally, I only use it because it's a familiar API, as I used to work extensively with it, but it's not "as required" to use it as it once was.

Hope it helps :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.