Scribd
Upload
4 views

IT_211_jQuery_Reviewer

The document provides an overview of jQuery, a JavaScript library that simplifies HTML manipulation, event handling, and Ajax. It covers jQuery syntax, selectors, events, effects, HTML and CSS manipulation, animation, and Ajax usage. Key features include methods for basic effects, callback functions, and data retrieval without page reloads.

Uploaded by

boombaklat01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

IT_211_jQuery_Reviewer

The document provides an overview of jQuery, a JavaScript library that simplifies HTML manipulation, event handling, and Ajax. It covers jQuery syntax, selectors, events, effects, HTML and CSS manipulation, animation, and Ajax usage. Key features include methods for basic effects, callback functions, and data retrieval without page reloads.

Uploaded by

boombaklat01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

IT 211 - jQuery Reviewer

LESSON 1: Basics of jQuery

What is jQuery?
- A fast, small, and feature-rich JavaScript library.
- Simplifies HTML document traversal, manipulation, event handling, animation, and Ajax.

jQuery API Integration Methods:


1. Using CDN (Content Delivery Network)
- Faster load if cached in browser.
- Use releases.jquery.com to get the <script> tag.
- Supports Subresource Integrity (SRI) for security.
2. Using a Downloaded jQuery File
- Download from jquery.com
- Save the .js file and link it in your HTML using <script src="path/to/jquery.js"></script>

LESSON 2: jQuery Elements

jQuery Syntax:
- Always starts with $ or jQuery.
$(selector).action();

Selectors:
- Element: $("div")
- Class: $(".btn")
- ID: $("#submit")
- Attribute: $("[type='text']")
- Pseudo-Class: $("a:hover")
- Group: $("div, p")
- Descendant: $("form .input")
- this: Refers to the element triggering the event

Events:
- Form: submit, change, focus, blur
- Keyboard: keyup, keydown, keypress
- Mouse: click, dblclick, hover, mouseenter, mouseleave
- Always use $(document).ready() to ensure DOM is loaded.

jQuery Effects

Basic Effects:
- hide(), show(), toggle()

Fade Effects:
- fadeIn(), fadeOut(), fadeTo(), fadeToggle()

Slide Effects:
- slideDown(), slideUp(), slideToggle()

Callback Function:
- Runs after effect is complete:
$("#box").hide(2000, function() {
$(this).show(2000);
});

jQuery HTML and CSS

HTML Manipulation:
- html(): Get/set HTML content
- val(): Get/set form input values

CSS Manipulation:
- css(): Change CSS
$("#box").css({
backgroundColor: "skyblue",
width: "200px",
height: "200px"
});

jQuery Animation

animate() Method:
- Alters CSS properties with animation:
$("#box").animate({
width: "300px",
height: "300px"
}, 500);

Method Chaining:
- $("#box").css("background", "red").slideUp(200).slideDown(200);

jQuery Ajax

Basic Syntax:
$.ajax({
url: "data.php",
}).done(function(response) {
$("#result").html(response);
});

Use Cases:
- Data Retrieval: Load from XML or PHP.
- Data Creation: Submit form data without page reload.

You might also like