Unit 02

Introduction

jQuery is a fast, small, and feature-rich JavaScript library that simplifies client-side scripting of HTML. Its motto is "Write Less, Do More."

Advantages of jQuery

jQuery Syntax

The basic jQuery syntax is:

$(selector).action();

Example

$(document).ready(function(){
  $("p").hide();
});

Definition

jQuery selectors are used to select and manipulate HTML elements. They work similarly to CSS selectors and allow easy access to elements in the DOM.

The selector syntax always starts with the dollar sign:

$(selector)

Types of jQuery Selectors

$("element-name")

$("p")

$("#id")

$("#header")

$(".class-name")

$(".intro")

Example Program

<p class="intro">Hello</p>
<p id="msg">Welcome</p>

<script>
$(document).ready(function(){
  $(".intro").hide();        // class selector
  $("#msg").show();          // id selector
  $("p").css("color","red"); // element selector
});
</script>

Definition

jQuery events are actions that occur when a user interacts with a web page, such as clicking, typing, or submitting a form. jQuery makes event handling easy and cross-browser compatible.

Common jQuery Events

Example

$("#loginBtn").click(function(){
  alert("Login button clicked");
});

This runs the function when the button with id loginBtn is clicked.

Document Ready Event

$(document).ready(function(){
  // jQuery code here
});

It ensures the code runs only after the page is fully loaded.

Definition

jQuery effects are used to add visual animations and dynamic behavior to web pages with minimal code. jQuery effects include showing, hiding, fading, sliding, and custom animations.

Common jQuery Effects

Example

$("#box").fadeIn(1000);

This fades in the element with id box over 1 second (1000 milliseconds).

Definition

jQuery manipulation methods are used to modify the content, attributes, CSS, and structure of HTML elements dynamically. They make DOM manipulation simple and efficient.

Types of jQuery Manipulation Methods

$("#msg").text("Hello");

$("#img").attr("src", "pic.jpg");

$("p").css("color", "red");

$("#list").append("<li>New Item</li>");