Scribd
Upload
7 views

jQuery_Complete_Guide_Fixed

The document provides a comprehensive guide to jQuery, detailing its purpose as a JavaScript library for simplifying web development tasks such as DOM manipulation, event handling, and AJAX interactions. It outlines key features, methods for escaping special characters, traversing the DOM, setting values, inserting and removing elements, and CSS manipulation, accompanied by example programs for practical understanding. Overall, it serves as a resource for developers looking to enhance their jQuery skills and streamline their coding processes.

Uploaded by

p9280840
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

jQuery_Complete_Guide_Fixed

The document provides a comprehensive guide to jQuery, detailing its purpose as a JavaScript library for simplifying web development tasks such as DOM manipulation, event handling, and AJAX interactions. It outlines key features, methods for escaping special characters, traversing the DOM, setting values, inserting and removing elements, and CSS manipulation, accompanied by example programs for practical understanding. Overall, it serves as a resource for developers looking to enhance their jQuery skills and streamline their coding processes.

Uploaded by

p9280840
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Complete jQuery Guide - Theory & Full Programs

1. What is jQuery?
jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as
event handling, CSS animation, and AJAX interactions. It makes web development easier and faster.

Features of jQuery:
- Simplifies JavaScript coding.
- Reduces the amount of code required for common JavaScript tasks.
- Supports cross-browser compatibility.
- Provides built-in animations and effects.
- Allows easy AJAX implementation.

Example Program:
<html>
<head>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$('p').hide();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Click to Hide</button>
</body>
</html>

2. How to Escape Special Characters in jQuery?


Special characters like '.', '#', '[', ']' in jQuery selectors must be escaped using double backslashes (\\).

Example:
$('div\\.special-class').hide(); // Selects <div class='special-class'>

3. What is Traversing Function in jQuery?


Traversing functions allow navigation through the DOM to find, filter, or modify elements.

Common Traversing Methods:


- parent(), parents(), parentsUntil() - Move up the DOM tree.
- children(), find() - Move down the DOM tree.
- siblings(), next(), prev() - Move sideways in the DOM.

Example Program:
<div id='parent'>
<p id='child'>Hello</p>
</div>
<script>
$('#child').parent().css('border', '2px solid red');
</script>

4. How to Set Value from an Element in jQuery?


Methods to Set Values:
- .val(value): Used for input elements.
- .text(value): Used for text content.
- .html(value): Used for HTML content.

Example Program:
<input type='text' id='myInput' value='Hello'>
<button id='setValue'>Change Value</button>
<script>
$('#setValue').click(function(){
$('#myInput').val('New Value');
});
</script>

5. How to Insert a New Element in HTML using jQuery?


jQuery Methods for Insertion:
- .append(content) - Adds content at the end of an element.
- .prepend(content) - Adds content at the beginning of an element.

Example Program:
<div id='myDiv'>Existing Content</div>
<button id='addContent'>Add</button>
<script>
$('#addContent').click(function(){
$('#myDiv').append('<p>New Content</p>');
});
</script>

6. How to Remove an Element in jQuery?


jQuery Methods to Remove Elements:
- .remove() - Removes the element and its content.
- .empty() - Removes only the inner content but keeps the element.
Example Program:
<p id='myPara'>This will be removed.</p>
<button id='removeBtn'>Remove</button>
<script>
$('#removeBtn').click(function(){
$('#myPara').remove();
});
</script>

7. jQuery CSS Manipulation


Methods for CSS Manipulation:
- .css(property, value) - Sets CSS properties.
- .addClass(className) - Adds a class.
- .removeClass(className) - Removes a class.
- .toggleClass(className) - Toggles a class.

Example Program:
<div id='myDiv'>Change My Color</div>
<button id='changeColor'>Change</button>
<script>
$('#changeColor').click(function(){
$('#myDiv').css('color', 'red');
});
</script>

You might also like