Detailed jQuery Reviewer

Lesson 1: Basics of jQuery

Topic: Introduction to jQuery

Definition, purpose, and advantages of using jQuery over plain JavaScript. Emphasizes the simplicity and cross-browser

compatibility of its API.

IMPORTANT NOTES:

- None

EXAMPLES:

None

PRACTICE QUESTIONS:

1. None

Lesson 1: Basics of jQuery

Topic: jQuery API Integration

Two integration methods: 1) CDN - with security via Subresource Integrity, and 2) Download - manually referencing local

file via <script> tag.

IMPORTANT NOTES:

- None

EXAMPLES:

None

PRACTICE QUESTIONS:

1. None

Lesson 2: jQuery Elements

Topic: Syntax

Standard jQuery syntax using either `jQuery` or `$` as function alias, followed by a selector and an action.
 Detailed jQuery Reviewer

IMPORTANT NOTES:

- The dollar sign ($) is a shorthand for jQuery.

- Syntax format: $(selector).action();

- Common selectors include tag name, class, id, and attributes.

EXAMPLES:

$('div').hide(); // hides all div elements

$('#myId').show(); // shows element with id='myId'

PRACTICE QUESTIONS:

1. What is the purpose of the dollar sign in jQuery?

2. Write a jQuery syntax that hides all <span> elements.

Lesson 2: jQuery Elements

Topic: Selectors

Types include Element, Class, ID, Attribute, Pseudo-Class, Group, Descendant, and `this`. Mirrors CSS selector logic.

IMPORTANT NOTES:

- Selectors in jQuery work the same way as in CSS.

- They allow you to target elements using tag names, class, id, and attributes.

- Special selectors like :hover, :active, and this are also available.

EXAMPLES:

$('input[type=text]') // selects all text inputs

$('.highlight') // selects all elements with class 'highlight'

PRACTICE QUESTIONS:

1. Name and give an example of 3 types of jQuery selectors.

2. How would you select all <a> tags inside a <div>?

Lesson 2: jQuery Elements

Topic: Events

Covers mouse, form, and keyboard events. Emphasizes use of `$(document).ready()` for proper initialization.
 Detailed jQuery Reviewer

IMPORTANT NOTES:

- jQuery supports various event types: form, keyboard, and mouse events.

- $(document).ready() ensures the DOM is fully loaded before events bind.

- Common methods include .click(), .keyup(), .hover(), and .submit().

EXAMPLES:

$(document).ready(function(){ $('#btn').click(function(){ alert('Clicked!'); }); });

PRACTICE QUESTIONS:

1. Why should you use $(document).ready()?

2. What jQuery method is used to detect a button click?

Lesson 2: jQuery Elements

Topic: Effects

Basic: `hide()`, `show()`, `toggle()` with optional speed/callback. Fade: `fadeIn()`, `fadeOut()`, `fadeTo()`, `fadeToggle()`.

Slide: `slideUp()`, `slideDown()`, `slideToggle()`.

IMPORTANT NOTES:

- Basic effects: hide(), show(), toggle().

- Fade effects: fadeIn(), fadeOut(), fadeTo(), fadeToggle().

- Slide effects: slideUp(), slideDown(), slideToggle().

- All effects can take speed and callback parameters.

EXAMPLES:

$('#box').fadeOut(1000);

$('#panel').slideToggle('slow');

PRACTICE QUESTIONS:

1. What is the difference between fadeIn() and slideDown()?

2. Write a code that hides a div with id='info' in 2 seconds.

Lesson 2: jQuery Elements

Topic: Callback Functions

Used to chain effects. A function that runs after an effect completes.

IMPORTANT NOTES:

- None

EXAMPLES:

None

PRACTICE QUESTIONS:

1. None

Lesson 2: jQuery Elements

Topic: HTML and CSS Manipulation

`html()` for container content; `val()` for input values; `css()` to apply styles. Demonstrates setting single or multiple

properties via object notation.

IMPORTANT NOTES:

- Use .html() to get/set HTML content; .val() for form input values.

- Use .css() to apply inline styles dynamically.

- CamelCase is used for CSS properties with hyphens (e.g., backgroundColor).

EXAMPLES:

$('div').html('<p>Hello World</p>');

$('#inputName').val('John Doe');

$('p').css('color', 'blue');

PRACTICE QUESTIONS:

1. What is the jQuery equivalent of JavaScript's innerHTML?

2. Write a code that sets the background color of all paragraphs to yellow.

Lesson 2: jQuery Elements

Topic: Animation and Method Chaining

`animate()` for CSS transitions with speed and callback; method chaining combines multiple actions on a selector in a

single line.

IMPORTANT NOTES:

- animate() changes CSS styles with animation.

- You can chain multiple jQuery methods on the same selector.

- Syntax: animate({property: value}, speed, callback);

EXAMPLES:

$('#box').animate({width:'200px', height:'200px'}, 1000);

$('#box').css('color','red').slideUp(1000).slideDown(1000);

PRACTICE QUESTIONS:

1. What does method chaining do in jQuery?

2. Write a jQuery statement that increases a div's width and hides it after.

Lesson 2: jQuery Elements

Topic: Ajax (Asynchronous JavaScript and XML)

`$.ajax()` to retrieve or send data without reloading the page. Use `.done()` for handling responses. Demonstrates both

data retrieval and creation (XML-based with PHP backend).

IMPORTANT NOTES:

- Use $.ajax() to communicate with the server without reloading the page.

- You must define settings like url, type, success/error callbacks.

- .done() is used to handle successful responses.

- Useful for dynamic data loading from XML/JSON or PHP.

EXAMPLES:

$.ajax({ url: 'data.php' }).done(function(response) { $('#result').html(response); });

PRACTICE QUESTIONS:

1. What is the purpose of $.ajax() in jQuery?

2. How do you handle a successful Ajax response?