Scribd
Upload
3 views

jQuery_CSS_Selectors_Detailed_Fixed

The document provides a detailed guide on jQuery CSS manipulation and basic selectors. It outlines common jQuery methods for changing CSS properties, adding/removing classes, and includes example programs demonstrating their usage. Additionally, it explains various types of basic selectors in jQuery for selecting HTML elements based on different criteria.

Uploaded by

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

jQuery_CSS_Selectors_Detailed_Fixed

The document provides a detailed guide on jQuery CSS manipulation and basic selectors. It outlines common jQuery methods for changing CSS properties, adding/removing classes, and includes example programs demonstrating their usage. Additionally, it explains various types of basic selectors in jQuery for selecting HTML elements based on different criteria.

Uploaded by

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

jQuery CSS Manipulation & Basic Selectors - Detailed Guide

1. jQuery Manipulation in CSS


jQuery provides several methods to manipulate CSS properties dynamically. It allows developers to change
styles, add/remove classes, and toggle styles with ease.

Common jQuery CSS Methods:


- .css(property, value) - Changes a specific CSS property.
- .addClass(className) - Adds a class to an element.
- .removeClass(className) - Removes a class from an element.
- .toggleClass(className) - Toggles a class (adds if missing, removes if present).

Example Program:

<!DOCTYPE html>
<html>
<head>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<style>
.highlight { background-color: yellow; color: red; }
</style>
</head>
<body>
<p id='text'>This is a paragraph.</p>
<button id='changeColor'>Change Color</button>
<button id='addClass'>Add Class</button>
<button id='removeClass'>Remove Class</button>
<button id='toggleClass'>Toggle Class</button>

<script>
$(document).ready(function(){
$('#changeColor').click(function(){
$('#text').css('color', 'blue');
});

$('#addClass').click(function(){
$('#text').addClass('highlight');
});

$('#removeClass').click(function(){
$('#text').removeClass('highlight');
});
$('#toggleClass').click(function(){
$('#text').toggleClass('highlight');
});
});
</script>
</body>
</html>

2. What is Basic Selector in jQuery?


jQuery selectors are used to find and manipulate HTML elements based on their tag name, ID, class, or other
attributes.

Types of Basic Selectors in jQuery:


- Universal Selector (*) - Selects all elements.
- Element Selector (tag) - Selects elements by tag name.
- ID Selector (#id) - Selects an element by ID.
- Class Selector (.class) - Selects elements by class name.
- Group Selector (selector1, selector2) - Selects multiple elements at once.

Example Program:

<!DOCTYPE html>
<html>
<head>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<style>
.highlight { background-color: lightgray; }
</style>
</head>
<body>
<h1 id='heading'>Heading</h1>
<p class='text'>This is a paragraph.</p>
<div class='text'>This is a div.</div>

<script>
$(document).ready(function(){
$('h1').css('color', 'red'); // Element Selector
$('#heading').css('border', '2px solid black'); // ID Selector
$('.text').css('font-size', '18px'); // Class Selector
$('h1, p').css('background-color', 'lightblue'); // Group Selector
});
</script>
</body>
</html>

You might also like