A high-level dissection of the code posted:
Html-element to embed a script in it
$ 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
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.
.. the callback passed in...
Similar to the $("#circle")-statement. Select all paragraph-elements in the DOM as jQuery elements. (
.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 ..
.. 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.
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 :)