Lecture 8 – Advanced jQuery Functions, Animation & HTML Forms

Lecture 8 – Advanced jQuery Functions, Animation & HTML Forms

Introduction

In the previous lecture, we learned:

  • jQuery Introduction
  • jQuery Selectors
  • jQuery Effects
  • DOM Manipulation
  • DOM Traversing
  • Functions and Methods

In this lecture, we will continue learning more useful jQuery functions and then move toward HTML Forms and Form Validation.

Topics covered:

  1. Advanced jQuery Functions
  2. Class Manipulation
  3. Attribute Manipulation
  4. Element Selection Functions
  5. Value Handling
  6. Element Removal & Cloning
  7. Practical Assignments
  8. jQuery Animation
  9. HTML Forms
  10. Form Methods
  11. Form Fields
  12. jQuery Validation Plugin

1. .hasClass()

The .hasClass() function checks whether an element contains a specific CSS class.

Syntax

.hasClass('classname')

Example

$('#box').hasClass('active');

Result

True

or

False

depending on whether the class exists.

Why Use It?

Useful for:

  • Menu systems
  • Tabs
  • Toggle functionality
  • Active states

2. .addClass()

Adds a CSS class to an element.

Syntax

.addClass('classname')

Example

$('#box').addClass('active');

Before

<div id="box">

After

<div id="box" class="active">

3. .removeClass()

Removes an existing class.

Syntax

.removeClass('classname')

Example

$('#box').removeClass('active');

Why Use It?

Useful when:

  • Removing active menu states
  • Hiding styles
  • Resetting UI components

4. .toggleClass()

Adds a class if it does not exist.

Removes it if it already exists.

Syntax

.toggleClass('classname')

Example

$('#box').toggleClass('active');

Behavior

First click:

Add Class

Second click:

Remove Class

Third click:

Add Again

5. .attr()

Used to get or set attributes.

Get Attribute

$('#box').attr('id');

Output

box

Set Attribute

$('#box').attr('title','Welcome');

Why Use It?

Commonly used for:

  • ID
  • Class
  • Href
  • Src
  • Title

6. .removeAttr()

Removes an attribute.

Syntax

.removeAttr('attribute')

Example

$('#box').removeAttr('title');

Result

The title attribute is removed from the element.

7. .index()

Returns the position of an element.

Example

$('.item').index(this);

Result

0
1
2
3

depending on the position.

8. .eq()

Selects an element at a specific position.

Syntax

.eq(index)

Example

$('li').eq(2);

Result

Selects the third list item.

(Remember indexing starts from 0.)

9. .is()

Checks whether a condition is true.

Example

$('#box').is(':visible');

Result

True

or

False

Common Uses

.is(':checked')
.is(':visible')
.is(':hidden')

10. .not()

Excludes selected elements.

Example

$('div').not('.active');

Meaning

Select all divs except those having class active.

11. .val()

Used to get or set values of form fields.

Get Value

$('#name').val();

Set Value

$('#name').val('Ali');

Common Usage

Textboxes
Dropdowns
Textareas

12. .remove()

Removes an element completely.

Example

$('#box').remove();

Result

The element is deleted from the page.

13. .clone()

Creates a copy of an element.

Example

$('#box').clone();

Why Use It?

Useful for:

  • Dynamic forms
  • Repeatable sections
  • Templates

Assignment 1

Create a button.

When clicked:

First Click

Show:

Hello

Second Click

Show:

Goodbye

Third Click

Show:

You are not allowed

Assignment Objective

Students should practice:

  • Click Events
  • Variables
  • Conditions
  • jQuery Event Handling

Assignment 2 – Dynamic Tabs

Study the following code carefully:

var id = $(this).attr('id');

$('.tab-content').hide();

$('#'+id).show();

Explanation

Step 1

Get clicked element ID.

$(this).attr('id');

Step 2

Hide all tab content.

$('.tab-content').hide();

Step 3

Show only matching content.

$('#'+id).show();

Objective

Build a simple tab system.

Example:

Tab 1
Tab 2
Tab 3

When a tab is clicked, only its content should appear.

14. .animate()

Used to create custom animations.

Syntax

.animate()

Example

$('#box').animate({
    left:'200px'
});

Example 2

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

Uses

  • Sliding objects
  • Moving elements
  • Resizing
  • Interactive effects

Introduction to Forms

Forms are used to collect information from users.

Examples:

  • Login Form
  • Registration Form
  • Contact Form
  • Feedback Form

Form Tag

The <form> tag is used to create forms.

It has:

Opening Tag

<form>

Closing Tag

</form>

Why Forms?

Forms collect data and send it to the server.

Examples:

Name
Email
Password
Profile Image

Form Methods

The form method determines how data is sent.

GET Method

Data is sent through the URL.

Example:

page.php?name=Ali

Advantages

  • Simple
  • Easy testing

Disadvantages

  • Visible in URL
  • Limited length

POST Method

Data is sent in the request body.

Advantages

  • More secure
  • Large amount of data
  • File uploads supported

Common Usage

Login Forms
Registration Forms
Contact Forms

Form Fields

Text Field

Used for normal text input.

Examples:

Name
City
Country

Password Field

Used for passwords.

Characters are hidden.

Example:

******

Dropdown

Allows users to choose from a list.

Example:

Select Country

Pakistan
India
USA
Canada

Textarea

Used for large text input.

Examples:

Message
Comments
Address

File Field

Used to upload files.

Examples:

Profile Picture
Resume
Documents

Checkbox Group

Allows multiple selections.

Example:

Skills

☑ HTML
☑ CSS
☐ PHP
☐ jQuery

Radio Button

Allows only one selection.

Example:

Gender

○ Male
○ Female

Only one option can be selected.

Submit Button

Used to submit form data.

Example:

Submit

Reset Button

Resets all form fields.

Example:

Reset

Form Processing Flow

User Fills Form

↓

Clicks Submit

↓

Data Sent To Server

↓

Server Processes Data

↓

Response Returned

Note for Students

Install the following jQuery validation plugin:

jquery.validate.js

Why Install It?

The plugin helps:

  • Validate forms
  • Check required fields
  • Validate emails
  • Validate passwords
  • Display error messages

Practice Task

Create a registration form and test:

  • Required Fields
  • Email Validation
  • Password Validation
  • Minimum Length Rules

using:

jquery.validate.js

Summary

In this lecture, we learned:

  • .hasClass()
  • .addClass()
  • .removeClass()
  • .toggleClass()
  • .attr()
  • .removeAttr()
  • .index()
  • .eq()
  • .is()
  • .not()
  • .val()
  • .remove()
  • .clone()
  • .animate()
  • Practical jQuery Assignments
  • HTML Forms
  • GET Method
  • POST Method
  • Form Fields
  • jQuery Validation Plugin

In the next lecture, we will start practical form handling and learn how JavaScript, jQuery, and PHP work together to process user data.