Gain insights into jQuery for interactive web pages with animations, event-handling, AJAX, and DOM manipulation. Explore core concepts and apply your knowledge in an interactive project with quizzes.

This course will introduce you to jQuery, a framework for building interactive web pages with animations, visual effects, and advanced functionality. You will start with a brief introduction to the course and jQuery. 

Next, you will explore the core concepts in jQuery, such as event-handling, animations, and in-browser manipulation of the document object model. 

Finally, you will learn about the AJAX framework in jQuery for dynamic content loading in web pages. On top of that, you will be working on an interactive project throughout the course with quizzes and challenges at the end of each chapter.

The Complete Guide to jQuery

```
$('selector').event(function(eventObj){
    // response to event goes here
});
```

```
$('selector').on('event', function(eventObj){
    // response to event goes here
});
```

```
$('selector').on({
  event: function(){
    // response to event goes here
  }
});
```

The syntax for event handler assignment is:

The syntax for event handler assignment is:

The event handler function by default receives the event object as an argument.

The event handler function by default receives the event object as an argument.

The `hover` event handler consists of how many event handler functions?

The <code>hover</code> event handler consists of how many event handler functions?

**HTML:**
```
<body>
 <div>
 div text
 
 paragraph text
 
 </div>
 </body>
```
**JavaScript:**
```
$(document).ready(function () {
 $("div").click(function(eventObj){
 alert("Div is clicked");
 }) 
 $("p").click(function(eventObj){
 alert("Paragraph is clicked");
 })
 });
```

In the code above, upon clicking the paragraph text, how many **alert boxes** will be generated?

HTML:
<pre><code>&lt;body&gt;
 &lt;div&gt;
 div text
 &lt;p&gt;
 paragraph text
 &lt;/p&gt;
 &lt;/div&gt;
 &lt;/body&gt;
</code></pre>
JavaScript:
<pre><code>$(document).ready(function () {
 $(&quot;div&quot;).click(function(eventObj){
 alert(&quot;Div is clicked&quot;);
 }) 
 $(&quot;p&quot;).click(function(eventObj){
 alert(&quot;Paragraph is clicked&quot;);
 })
 });
</code></pre>
In the code above, upon clicking the paragraph text, how many alert boxes will be generated?

In reference to the last MCQ, we can **STOP** the bubbling of events by calling which of the following methods in the paragraph click event handler?

In reference to the last MCQ, we can STOP the bubbling of events by calling which of the following methods in the paragraph click event handler?

The user is redirected to Google's homepage.

**HTML:**
```
<body>
 <div>
 <a href= "https://www.google.com/"> Google </a>
 </div>
 </body>
```
**JavaScript:**
```
$(document).ready(function () {
 $("a").click(function(eventObj){
 eventObj.preventDefault();
 });
 });
```

In the code above, what happens upon clicking the hyperlink?

HTML:
<pre><code>&lt;body&gt;
 &lt;div&gt;
 &lt;a href= &quot;https://www.google.com/&quot;&gt; Google &lt;/a&gt;
 &lt;/div&gt;
 &lt;/body&gt;
</code></pre>
JavaScript:
<pre><code>$(document).ready(function () {
 $(&quot;a&quot;).click(function(eventObj){
 eventObj.preventDefault();
 });
 });
</code></pre>
In the code above, what happens upon clicking the hyperlink?

Check your understanding of the concepts of events and event handlers.

jQuery Basics

Events and Event Handlers

DOM Traversal and Manipulation

Effects and Animations

AJAX Methods

Conclusion

Quiz on Events and Event Handlers