Search your questions here
Search results for: in category: JQUERY
jQuery is a fast, small, and feature-rich JavaScript library designed to simplify tasks like HTML document traversal and manipulation, event handling, animation, and AJAX interactions.
Key Features of jQuery
DOM Manipulation: Easily select and manipulate elements in the DOM.
Event Handling: Simplifies handling and binding events to elements.
AJAX: Streamlines making asynchronous HTTP requests.
Effects and Animations: Provides built-in methods for creating visual effects.
Cross-Browser Compatibility: Abstracts browser inconsistencies, offering a consistent API.
Plugins: Extensible through plugins for additional functionality.
Selectors in jQuery allow you to target HTML elements for manipulation, event handling, or other operations.
.class
To find elements with a specific class
$(".test")
$("*") Selects all elements
ID Selector (#id): Selects an element by its ID
Example
$("#myId")
Element Selector (element): Selects all elements of a specific type
Example
$("p") // Selects all `<p>` elements
Descendant Selector (ancestor descendant): Selects all descendants of a specific ancestor
Example
$("div p") // All `<p>` inside `<div>`
Child Selector
Example
$("ul > li")
[name]: Selects elements with a specific attribute.
Example
$("input[name]")
[name="value"]: Matches a specific value
Example
$("input[type='text']")
[name^="value"]: Starts with a specific value
Example
$("input[name^='user']")
[name$="value"]: Ends with a specific value.
$("input[name$='name']")
*[name="value"]**: Contains a specific value
Example
$("input[name*='email']")
:input: Selects all input, textarea, select, and button elements.
Example
$(":input")
:text: Selects text input fields
Example
$(":text")
:checkbox: Selects checkboxes.
$(":checkbox")
:checked: Selects checked checkboxes or radio buttons.
Example
$(":checked")
:selected: Selects selected options
Example
$("option:selected")
:contains("text"): Selects elements containing the specified text
$("p:contains('hello')")
:empty: Selects elements with no children
Example
$("div:empty")
:visible: Selects all visible elements
Example
$("div:visible")
:hidden: Selects all hidden elements
Example
$("div:hidden"):eq(index)
:first: Selects the first matched element.
Example
$("li:first")
:last: Selects the last matched element
Example
$("li:last")
:odd: Selects elements with odd indices
Example
$("tr:odd")
:even: Selects elements with even indices
$("tr:even")
:eq(index)
Example
$("ul li:eq(3)") // The fourth element in a list (index starts at 0)
Events in jQuery are a core feature that allows developers to easily add interactivity to web pages. jQuery provides methods to bind, trigger, and manage events efficiently.
scroll event
Bind an event handler to the "scroll" event, or trigger that event on an element.
.resize() event
Bind an event handler to the "resize" event, or trigger that event on an element.
.error() event
Bind an event handler to the "error" event, or trigger that event on an element.
jQuery.holdReady()
Holds or releases the execution of jQuery’s ready event.
jQuery.ready
A Promise-like object (or “thenable”) that resolves when the document is ready.
load event
Bind an event handler to the “load” event, or trigger that event on an element.
.load()
Bind an event handler to the “load” event, or trigger that event on an element.
.ready()
Specify a function to execute when the DOM is fully loaded.
unload event
Bind an event handler to the “unload” event, or trigger that event on an element.
.bind()
Attach a handler to an event for the elements.
.live()
Attach an event handler for all elements which match the current selector, now and in the future.
.off()
Remove an event handler.
.on()
Attach an event handler function for one or more events to the selected elements.
.one()
Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
.trigger()
Execute all handlers and behaviors attached to the matched elements for the given event type.
.triggerHandler()
Execute all handlers attached to an element for an event.
.unbind()
Remove a previously-attached event handler from the elements.
.undelegate()
Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
blur event
Bind an event handler to the “blur” event, or trigger that event on an element.
.blur()
Bind an event handler to the “blur” event, or trigger that event on an element.
change event
.change()
Bind an event handler to the “change” event, or trigger that event on an element.
focus event
Bind an event handler to the “focus” event, or trigger that event on an element.
.focus()
Bind an event handler to the “focus” event, or trigger that event on an element.
focusin event
Bind an event handler to the “focusin” event, or trigger that event on an element.
.focusin()
Bind an event handler to the “focusin” event, or trigger that event on an element.
focusout event
Bind an event handler to the “focusout” event, or trigger that event on an element.
.focusout()
Bind an event handler to the “focusout” event, or trigger that event on an element.
select event
Bind an event handler to the “select” event, or trigger that event on an element.
.select()
Bind an event handler to the “select” event, or trigger that event on an element.
submit event
Bind an event handler to the “submit” event, or trigger that event on an element.
.submit()
Bind an event handler to the “submit” event, or trigger that event on an element.
keydown event
Bind an event handler to the “keydown” event, or trigger that event on an element.
.keydown()
Bind an event handler to the “keydown” event, or trigger that event on an element.
keypress event
Bind an event handler to the “keypress” event, or trigger that event on an element.
.keypress()
Bind an event handler to the “keypress” event, or trigger that event on an element.
keyup event
Bind an event handler to the “keyup” event, or trigger that event on an element.
.keyup()
Bind an event handler to the “keyup” event, or trigger that event on an element.
click event
Bind an event handler to the “click” event, or trigger that event on an element.
.click()
Bind an event handler to the “click” event, or trigger that event on an element.
contextmenu event
Bind an event handler to the “contextmenu” event, or trigger that event on an element.
.contextmenu()
Bind an event handler to the “contextmenu” event, or trigger that event on an element.
dblclick event
Bind an event handler to the “dblclick” event, or trigger that event on an element.
.dblclick()
Bind an event handler to the “dblclick” event, or trigger that event on an element.
.hover()
Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
mousedown event
Bind an event handler to the “mousedown” event, or trigger that event on an element.
.mousedown()
Bind an event handler to the “mousedown” event, or trigger that event on an element.
mouseenter event
Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.
.mouseenter()
Bind an event handler to the “mouseenter” event, or trigger that event on an element.
mouseleave event
Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.
.mouseleave()
Bind an event handler to the “mouseleave” event, or trigger that event on an element.
mousemove event
Bind an event handler to the “mousemove” event, or trigger that event on an element.
.mousemove()
Bind an event handler to the “mousemove” event, or trigger that event on an element.
mouseout event
Bind an event handler to the “mouseout” event, or trigger that event on an element.
.mouseout()
Bind an event handler to the “mouseout” event, or trigger that event on an element.
mouseover event
Bind an event handler to the “mouseover” event, or trigger that event on an element.
.mouseover()
Bind an event handler to the “mouseover” event, or trigger that event on an element.
mouseup event
Bind an event handler to the “mouseup” event, or trigger that event on an element.
.mouseup()
Bind an event handler to the “mouseup” event, or trigger that event on an element.
.toggle()
Bind two or more handlers to the matched elements, to be executed on alternate clicks.
It is used as a shorthand for selecting elements, applying actions, or invoking jQuery methods.
Example
$("#elementID").css("color", "red"); // // Select by ID
$(".elementClass").hide(); // // Select by class
$("p").text("This is a paragraph."); //// Select by tag
The .show() method is used to make hidden elements visible by setting their display property to its default value. It is often used alongside .hide() to toggle the visibility of elements.
Sample Code
$("#text").show();
$("#text").show("slow"); // Slowly shows the paragraph
The .hide() method is used to hide selected elements. It sets the CSS display property of the elements to none, making them disappear from view without removing them from the DOM.
Sample Code :-
$("#myElement").hide();
$("#myElement").hide("slow");
The toggle() function in jQuery is a convenient method for toggling the visibility of elements. It switches between showing and hiding an element with a single function call.
Sample Code
$("#myParagraph").toggle("slow");
$("#myParagraph").toggle("fast");
.fadeIn()
Display the matched elements by fading them to opaque.
.fadeOut()
Hide the matched elements by fading them to transparent.
.fadeTo()
Adjust the opacity of the matched elements.
.fadeToggle()
Display or hide the matched elements by animating their opacity.
.slideDown()
Display the matched elements with a sliding motion.
.slideToggle()
Display or hide the matched elements with a sliding motion.
.slideUp()
Hide the matched elements with a sliding motion.
addClass()
Adds the specified class(es) to each element in the set of matched elements.
.hasClass()
Determine whether any of the matched elements are assigned the given class.
.removeClass()
Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
.toggleClass()
Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the state argument
.clone()
Create a deep copy of the set of matched elements.
What are the methods allow us to insert new content surrounding existing content ?
.unwrap()
Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.
.wrap()
Wrap an HTML structure around each element in the set of matched elements.
.wrapAll()
Wrap an HTML structure around all elements in the set of matched elements.
.wrapInner()
Wrap an HTML structure around the content of each element in the set of matched elements
.append()
Insert content, specified by the parameter, to the end of each element in the set of matched elements.
.appendTo()
Insert every element in the set of matched elements to the end of the target.
.html()
Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.
.prepend()
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
.prependTo()
Insert every element in the set of matched elements to the beginning of the target.
.text()
Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.
.after()
Insert content, specified by the parameter, after each element in the set of matched elements.
.before()
Insert content, specified by the parameter, before each element in the set of matched elements.
.insertAfter()
Insert every element in the set of matched elements after the target.
.insertBefore()
Insert every element in the set of matched elements before the target.
.detach()
Remove the set of matched elements from the DOM.
.empty()
Remove all child nodes of the set of matched elements from the DOM.
.remove()
Remove the set of matched elements from the DOM.
.unwrap()
Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.
.get()
Retrieve the DOM elements matched by the jQuery object.
.index()
Search for a given element from among the matched elements.
.size()
Return the number of elements in the jQuery object.
.toArray()
Retrieve all the elements contained in the jQuery set, as an array.
The phrase "no conflict in jQuery" typically refers to using jQuery in a way that avoids conflicts with other libraries or frameworks that also use the $ symbol as a shortcut or alias.
To avoid conflicts, you can use jQuery's noConflict() method.
<input type="hidden" id="hdnEnquiryId/>
let EnquiryId = 10;
$("#hdnEnquiryId").val(EnquiryId);
<input type="hidden" id="hdnEnquiryId/>
var EnquiryId = $("#hdnEnquiryId").val();
<div id="divSOAPrintDet"></div>
$("#divSOAPrintDet").html('');
$("#div").removeAttr("style");
$("#btnCancelFee").attr("style", "display:none;");
$("#txtPaidDate").attr('style', 'border:1px solid #b94a48');
<table id="myTable">
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
var cellValue = $('#myTable tr:eq(0) td:eq(0)').text();
<input type="text" class="onlynumbers" value="" />
<script>
$('.onlynumbers').keyup(function () {
this.value = this.value.replace(/[^0-9.]/g,'');
});
</script>
<input type="text" class="onlynumbers" value="" />
<script>
$('.onlynumbers').keyup(function () {
this.value = this.value.replace[/^a-zA-Z0-9. ]/g,'');
});
</script>
The jQuery ajax() method is used to perform asynchronous HTTP requests, allowing you to load data from a server without reloading the webpage. It provides a flexible way to interact with remote servers using GET, POST, or other HTTP methods, supporting various data formats.
Example:
$.ajax({
url: "https://api.example.com/submit",
type: "POST",
data: { name: "smith", age: 40 },
dataType: "json",
success: function(response) {
console.log("Response:", response);
},
error: function(xhr, status, error) {
console.error("Error:", error);
}
});
Important Options in $.ajax :-
url: The endpoint to send the request to.
type (or method): The HTTP method to use (GET, POST, PUT, DELETE, etc.).
data: Data to be sent with the request.
dataType: The type of data expected in the response (json, xml, html, etc.).
success: A callback executed when the request is successful.
error: A callback executed if the request fails.
timeout: Sets a timeout (in milliseconds) for the request.
headers: Custom headers for the request.
async: Boolean to specify synchronous (false) or asynchronous (true, default).
Sample Code
<select id="myDropdown">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<button id="getValue">Get Selected Value</button>
$(document).ready(function () {
$("#getValue").click(function () {
const selectedValue = $("#myDropdown").val(); //Selected Value
var selectedText = $('#dropdownId option:selected').text(); //Selected Text.
});
});
To Set Focus on an Input Field
<input type="text" id="myInput" placeholder="Focus on me!">
$("#myInput").focus();
To Add a Focus Event Handler
<input type="text" id="myInput" placeholder="Type something here">
<script>
$("#myInput").focus(function() {
$(this).css("background-color", "#ffdddd");
});
</script>
You can use each() function.
Sample Code
$(document).ready(function() {
$('#myTable tbody tr').each(function() {
// For each row
var rowText = '';
$(this).find('td').each(function() {
// For each cell in the current row
rowText += $(this).text() + ' ';
});
console.log('Row data:', rowText.trim());
});
});
Sample Code
Html
<table id="myTable">
<tr>
<td><input type="text" id="textbox1" value="Hello"></td>
</tr>
<tr>
<td><input type="text" id="textbox2" value="World"></td>
</tr>
</table>
<button id="getValue">Get Textbox Value</button>
Jquery
$(document).ready(function() {
// On button click
$("#getValue").click(function() {
// Find the textbox inside the table and get its value
$("#myTable input[type='text']").each(function() {
console.log($(this).val()); // Logs the value of each textbox
});
});
});
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown in HTML Table</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<th>Item</th>
<th>Options</th>
</tr>
<tr>
<td>Row 1</td>
<td>
<select class="dropdown">
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</td>
</tr>
<tr>
<td>Row 2</td>
<td>
<select class="dropdown">
<option value="X">Option X</option>
<option value="Y">Option Y</option>
<option value="Z">Option Z</option>
</select>
</td>
</tr>
</table>
<button id="getValue">Get Selected Value</button>
Jquery
<script>
$(document).ready(function() {
$('#getValue').click(function() {
// Loop through all dropdowns in the table
$('#myTable .dropdown').each(function(index, dropdown) {
const selectedValue = $(dropdown).val(); // Get the selected value
console.log(`Row ${index + 1} Selected Value: ${selectedValue}`);
});
});
});
</script>
</body>
</html>
The $.getJSON function in jQuery is a convenient shorthand for performing an asynchronous HTTP GET request and retrieving JSON data from a server
Sample Code
$.getJSON("https://api.example.com/data")
.done(function(data) {
console.log("Data received:", data);
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.error("Request failed:", textStatus, errorThrown);
});
$('#yourTextboxId').val('');
The prepend() and append() methods are used to insert content into an element.
Prepend()
Inserts content at the beginning of the selected element(s).
Sample code
$("#myDiv").prepend("<p>This is prepended text.</p>");
append()
Inserts content at the end of the selected element(s).
Sample code
$("#myDiv").append("<p>This is appended text.</p>");
const items = [
{ value: "1", text: "Option 1" },
{ value: "2", text: "Option 2" },
{ value: "3", text: "Option 3" },
{ value: "4", text: "Option 4" }
];
const dropdown = $('#myDropdown');
dropdown.empty(); // Clear existing options
dropdown.append('<option value="">-- Select an option --</option>'); // Default option
// Append new options
$.each(items, function (index, item) {
dropdown.append(`<option value="${item.value}">${item.text}</option>`);
});
It is used to ensure that the DOM is fully loaded before running any JavaScript code. This prevents issues that may arise from trying to manipulate elements before the page is ready.
<div id="content"></div>
$("#content").html("<h2>Hello, this is the filled content!</h2><p>This content was inserted using jQuery .html() method.</p>");
$('#yourTextboxId').attr('required', 'required'); // for setting
$('#yourTextboxId').removeAttr('required'); // for removing
$(document).ready()
Fires when the DOM is fully loaded: This event triggers as soon as the HTML is parsed, and the DOM (Document Object Model) is ready, even if images, CSS, or other external resources haven't finished loading.
$(window).load()
Fires when the entire page is loaded: This event triggers after everything on the page, including images, videos, and other media, have finished loading. This means it waits for more than just the DOM to be ready.
$('#yourLabelId').text('New text for the label');
Cross-Browser Compatibility
Simplified Syntax
DOM Manipulation
AJAX Simplification
Animation and Effects
Chainability
Plugins and Extensions
Support and Documentation
Consistency Across Versions
var length = $('#myTextbox').val().length;
if ($('#checkboxId').prop('checked')) {
console.log('Checkbox is checked');
} else {
console.log('Checkbox is not checked');
}
// Select all checkboxes and check them
$('input[type="checkbox"]').prop('checked', true);
$('input[type="checkbox"]').each(function() {
if ($(this).is(':checked')) {
console.log($(this).attr('id') + ' is checked');
} else {
console.log($(this).attr('id') + ' is not checked');
}
});
if ($('#dropdown').val() != '') {
console.log('A value is selected');
} else {
console.log('No value selected');
}
$(document).ready(function() {
$('#myTextbox').on('input', function() {
var inputText = $(this).val();
var specialCharsRegex = /[^a-zA-Z0-9s]/; // Regex for special characters (non-alphanumeric characters)
if (specialCharsRegex.test(inputText)) {
alert('Special character detected!');
} else {
alert('No special characters.');
}
});
});
<table id="jsonTable" class="table table-bordered">
<thead class="thead-light" id="av">
</thead>
</table>
$("#jsonTable").empty();
var array = [1, 2, 3, 4, 5];
var valueToFind = 3;
var index = $.inArray(valueToFind, array);
if (index !== -1) {
console.log("Found at index " + index);
} else {
console.log("Not found");
}
$(document).ready(function() {
// Equivalent of document.querySelectorAll in jQuery
var elements = $('div.someClass'); // Selects all div elements with the class "someClass"
// You can loop over the matched elements, if needed
elements.each(function() {
console.log($(this).text()); // diplay its content
});
});
$(document).ready(function() {
// Select all textboxes and apply a style
$('input[type="text"]').css({
"background-color": "#f0f0f0", // Change the background color
"border": "2px solid #007BFF", // Change the border
"color": "#333", // Change the text color
"font-size": "16px" // Change the font size
});
});
<script>
$(document).ready(function () {
// Change the background color of odd rows
$('#myTable tr:odd').css('background-color', '#f9f9f9');
// Change the background color of even rows
$('#myTable tr:even').css('background-color', '#e6f7ff');
});
</script>
$('#txtFirstName').css('display', 'block'); // show
$('#txtFirstName').css('display', 'none'); // hide
The fadeIn() method in jQuery is used to gradually show a hidden element by increasing its opacity.
Sample code
<div id="box" style="display:none; width:100px; height:100px; background-color:blue;"></div>
$("#box").fadeIn("slow");
keydown event is triggered when a key is pressed down on the keyboard.We can get the name of key pressed and its keycode
Sample code
<input type="text" id="textInput" placeholder="Type something...">
<script>
$(document).ready(function() {
$('#textInput').keydown(function(event) {
console.log('Key pressed:', event.key); // Logs the key pressed
console.log('Key code:', event.which); // Logs the key code
});
});
</script>
keypress:
Triggers only for character-producing keys (e.g., letters, digits, symbols).
Deprecated and inconsistent across browsers.
keydown / keyup:
Triggers for all keys, including special keys like arrows, Ctrl, Shift, etc.
Works reliably and consistently across browsers.
To serialize a form using jQuery, you can use the .serialize() method. This method converts the form's input values into a query string, which is useful for submitting the form via AJAX or just for getting the form data in a structured format.
var formData = $('#myForm').serialize();
console.log(formData);
If you need the data as an array of objects instead of a query string, you can use .serializeArray(), which returns an array of objects with name and value properties.
var formDataArray = $('#myForm').serializeArray();
console.log(formDataArray);
The mouseenter event in jQuery is triggered when the mouse pointer enters the element. It's commonly used for creating hover effects or triggering specific actions when the user moves the cursor over a certain element.
Sample code
Html
<style>
.box {
width: 200px;
height: 200px;
background-color: lightblue;
margin: 50px;
text-align: center;
line-height: 200px;
transition: background-color 0.3s;
}
</style>
<div class="box">Hover Over Me</div>
Jquery
<script>
$(document).ready(function () {
$(".box").mouseenter(function () {
$(this).css("background-color", "lightcoral");
});
$(".box").mouseleave(function () {
$(this).css("background-color", "lightblue");
});
});
</script>
Chaining allows you to perform multiple operations on the same set of elements without needing to repeatedly select them
Sample Code
// Basic example of chaining in jQuery
$("#myElement")
.css("color", "red") // Change text color
.slideUp(500) // Slide up the element
.slideDown(500); // Slide it back down
$("div")
.addClass("highlight") // Add a class to all divs
.css("font-size", "18px") // Increase font size
.fadeIn(400) // Fade in over 400 milliseconds
.text("Updated text!"); // Change the text content
// Select all paragraphs and add a specific div to the selection, then apply styles
$('p')
.add('#myDiv') // Add the element with ID "myDiv" to the matched set
.css('color', 'blue') // Change the text color to blue
.fadeIn(); // Show the elements with a fade-in effect
The .filter() method is used to reduce the set of matched elements to a subset that matches a specific selector, element, or callback function
Examples
1. $("li").filter(".active").css("color", "red");
This selects all <li> elements with the class .active and changes their text color to red.
Filter using function
2. $("li").filter(function(index) {
return index % 2 === 0; // Keep even-indexed elements
}).css("background-color", "lightblue");
This changes the background color of all even-indexed <li> elements to light blue.
3. let highlightedItems = $(".highlighted");
$("li").filter(highlightedItems).css("color", "green");
This applies green text color to <li> elements that are also in the .highlighted jQuery object.
4
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
$( "li" ).filter( ":nth-child(2n)" ).css( "background-color", "red" );
The result of this call is a red background for items 2, 4, and 6, as they match the selector.
5 using a function
Html
<ul>
<li><strong>list</strong> item 1 - one strong tag</li>
<li><strong>list</strong> item <strong>2</strong> -
two <span>strong tags</span></li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
Jquery
$( "li" )
.filter(function( index ) {
return $( "strong", this ).length === 1;
})
.css( "background-color", "red" );
6.
Html
<div></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div></div>
Jquery
<script>
$( "div" )
.css( "background", "#c8ebcc" )
.filter( ".middle" )
.css( "border-color", "red" );
</script>
The map() function in jQuery is used to iterate over an array, object, or a jQuery collection and return a new array containing the results of applying a callback function to each item in the original collection.
Examle 1
var numbers = [1, 2, 3, 4];
var squared = $.map(numbers, function(value, index) {
return value * value;
});
console.log(squared); // [1, 4, 9, 16]
Example 2
var obj = { a: 1, b: 2, c: 3 };
var doubledValues = $.map(obj, function(value, key) {
return value * 2;
});
console.log(doubledValues); // [2, 4, 6]
In jQuery, the .end() method is used to return the previous jQuery object in the chain. It effectively "steps back" in the chain of jQuery method calls to the state before the last method was applied
Sample code
$(document).ready(function() {
// Select all <li> elements within a <ul> and add a red border
$("ul li")
.css("border", "1px solid red") // Apply a red border
.end() // Go back to the original selection (the <ul>)
.css("border", "2px solid blue"); // Apply a blue border to the <ul>
});
$("ul li") selects all <li> elements inside a <ul>.
.css("border", "1px solid red") applies a red border to those <li> elements.
.end() goes back to the previous selection, which is the <ul> element.
.css("border", "2px solid blue") applies a blue border to the <ul>.
The .children() method is used to select the direct children of a specified element.
Example
// HTML
<div id="parent">
<p>Child 1</p>
<p>Child 2</p>
<span>Child 3</span>
</div>
// jQuery
$("#parent").children();
This will return all direct children (<p> and <span> elements) of the #parent element.
Example 2 using function
// HTML
<div id="parent">
<p class="highlight">Child 1</p>
<p>Child 2</p>
<span>Child 3</span>
</div>
// jQuery
$("#parent").children("p");
This will return only the <p> elements that are direct children of #parent.
Example 3
$("#parent").children().addClass("child-class");
// Add a class to each direct child
Example 4 - Iterate through child elements
$("#parent").children().each(function(index, element) {
console.log("Child #" + index, element);
});
The .contents() method is used to retrieve the child nodes (including text, comment nodes, and element nodes) of the selected element.
Sample code
html
<div id="parent">
<p>First paragraph</p>
<p>Second paragraph</p>
<!-- A comment -->
Text node here
</div>
jquery
$('#parent').contents().each(function() {
if (this.nodeType === 1) { // This checks if the node is an element
console.log('Element:', this);
} else if (this.nodeType === 3) { // This checks if the node is a text node
console.log('Text Node:', this.nodeValue);
}
});
Result will be
Element: <p>First paragraph</p>
Element: <p>Second paragraph</p>
Text Node: Text node here
The find() method is used to search for descendants of the selected elements
Html
<div class="parent">
<p>First paragraph</p>
<p>Second paragraph</p>
<span>Text in span</span>
</div>
Jquery
<script>
// Find all <p> elements inside the .parent div
$(".parent").find("p").css("color", "red");
</script>
Here, the find() method will search for all <p> elements inside the .parent div and change their text color to red.
The .closest() method is used to find the nearest ancestor of the selected element that matches the given selector
Sample code
Html
<div class="parent">
<div class="child">
<button class="btn">Click me</button>
</div>
</div>
jquery
<script>
// When the button is clicked, find the closest parent with class 'parent'
$('.btn').click(function() {
var closestParent = $(this).closest('.parent');
console.log(closestParent); // Logs the .parent element
});
</script>
The parent() function is used to get the immediate parent element of the selected element(s). It returns the direct parent(s) of the element, or elements if more than one element is selected.
Sample code
Html
<div class="parent">
<p>First paragraph</p>
<p>Second paragraph</p>
<span>Text in span</span>
</div>
Juery
$(document).ready(function() {
$("span").click(function() {
var parentElement = $(this).parent();
parentElement.css("background-color", "yellow");
});
});
When a span element is clicked, the parent() function gets the immediate parent element of the clicked span.
The parent element's background color is changed to yellow.
The parents() function is used to get all the ancestor elements (parent, grandparent, etc.) of the selected element, up the DOM tree.
Example 1
Html
<div class="parent">
<p>First paragraph</p>
<p>Second paragraph</p>
<span>Text in span</span>
</div>
jquery
$("span").parents().css({"color": "red", "border": "2px solid red"});
This will select all ancestor elements of all <span> elements and apply the styles. That is, div,first paragraph,second paragraph
.parentsUntil() method is used to get all ancestor elements of a given element up to, but not including, a specified selector.
Html
<div id="parent1">
<div id="parent2">
<div id="target">Target Element</div>
</div>
</div>
Jquery
$('#target').parentsUntil('#parent2');
or
$('#target').parentsUntil('#parent2', 'div');
The .parentsUntil('#parent2') will return all ancestor elements of the #target element, except the element with the id="parent2". It will select #parent1 because #parent2 is the stopping point.
What is next() method in jquery ?
The next() method is used to select the next sibling element of the selected element(s) in the DOM.
Sample 1
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
$('li').first().next().css('color', 'red');
This will select the second li (Item 2) and change its text color to red.
$('li').first().next().next().css('color', 'blue');
This will select the third li (Item 3) and change its text color to blue.
The nextAll() method is used to get all the siblings of the selected element that come after it in the DOM order.
Example
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$( "li.third-item" ).nextAll().css( "background-color", "red" );
list item 4 & 5 will be affected.
The .siblings() method is used to get all sibling elements of a selected element, excluding the selected element itself.
Example
<ul>
<li id="item1">Item 1</li>
<li id="item2">Item 2</li>
<li id="item3">Item 3</li>
</ul>
Jquery
$("#item2").siblings().css("color", "red");
Here, all sibling elements of the element with id="item2" (which are Item 1 and Item 3) will have their text color changed to red.
$("#item2").siblings("li:first-child").css("color", "blue");
It will change the color of the first sibling of #item2 to blue. (item 1)
Example
<div id="1">First</div>
<div id="2">Second</div>
<div id="3">Third</div>
// jQuery
$('#3').prevAll().css('color', 'red'); // All previous siblings of the element with id '3' will turn red, that is First & Second.
var newDiv = $('<div></div>');
// Add some content or attributes to the new element
newDiv.text('This is a new div!').addClass('new-class');
// Append the new <div> to the body
$('body').append(newDiv);
The .clone() method is used to create a copy of selected elements, including their attributes, child elements, and data (if specified).
Example
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
$( ".hello" ).clone().appendTo( ".goodbye" );
Result will be
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
</div>
To append an element using jQuery, you can use the append() method
Example
<div id="container">
<p>This is the original content.</p>
</div>
<button id="appendButton">Append Content</button>
Jquery
<script>
$(document).ready(function() {
$("#appendButton").click(function() {
$("#container").append("<p>This is the appended content.</p>");
});
});
</script>
When the "Append Content" button is clicked, a new <p> element is added to the #container div.
The append() function adds the content after any existing content inside the container.
To prepend content to an element using jQuery, you can use the .prepend() method. It allows you to insert content at the beginning of the selected element(s)
Example
$('#myElement').prepend('<p>This is the new content at the start!</p>');
What is wrap function ?
The wrap() function is used to wrap each element in the set of matched elements with the specified HTML structure.
// Wrap each <p> element in a <div> with a class 'wrapper'
$('p').wrap('<div class="wrapper"></div>');
The wrapAll() method is used to wrap a set of matched elements with a single HTML structure, such as a div or any other element. It wraps all of the selected elements in a parent element.
Sample code
<div class="wrapper">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
// jQuery code
$("p").wrapAll("<div class='new-wrapper'></div>");
Result will be
<div class="new-wrapper">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
The wrapInner() method in jQuery is used to wrap the inner contents of each element in the selected set of elements with a specified HTML structure.
Sample Code
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
Jquery
$( ".inner" ).wrapInner( "<div class='new'></div>");
The result will be
<div class="container">
<div class="inner">
<div class="new">Hello</div>
</div>
<div class="inner">
<div class="new">Goodbye</div>
</div>
</div
Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.
Sample code
let isChecked = $('#myCheckbox').prop('checked');
console.log(isChecked); // true or false
$('#myButton').prop('disabled', true);
.prop() deals with DOM properties and reflects real-time states.
.attr() manages attributes as defined in the HTML markup.
var attrValues = {
src: "rose.jpg",
style: "border: thick solid red"
};
$("img").attr(attrValues);
Sample Code
$('img').attr("style", "border: thick solid red");
$('img:odd').removeAttr("style");
<style type="text/css">
img.redBorder {border: thick solid red}
img.blueBorder {border: thick solid blue}
</style>
$('img').addClass("redBorder");
$('img').removeClass("redBorder").addClass("blueBorder");
The on() function is one of the most versatile methods in jQuery, allowing you to attach event handlers to elements.
Examples
1
$("button").on("click", function() {
alert("Button clicked!");
});
Attach a click event to all <button> elements:
2
$("#parent").on("click", ".child", function() {
alert("Child element clicked!");
});
Attach a click event to dynamically added items:
3.
$("input").on("focus blur", function(event) {
if (event.type === "focus") {
$(this).css("background-color", "yellow");
} else {
$(this).css("background-color", "");
}
});
Bind multiple events using a single on() method:
4
$("button").on("click", { message: "Hello, World!" }, function(event) {
alert(event.data.message);
});
Pass custom data to the event handler:
To unbind event handlers in jQuery, you can use the .off() method. This method removes one or more event handlers that were attached with .on() or other jQuery event binding methods.
$('#TextElement').off();
Unbind All Events for an Element
$('#Element').off('click');
This removes all click event handlers from #myElement.
The hover() method is used to bind event handlers for the mouseenter and mouseleave events. It enables you to define two functions: one for when the mouse enters an element and another for when it leaves.
Sample code
html
<div class="hover-box">Hover over me!</div>
css
<style>
.hover-box {
width: 200px;
height: 100px;
border: 1px solid black;
text-align: center;
line-height: 100px;
}
</style>
jquery
$(document).ready(function() {
$(".hover-box").hover(
function() {
$(this).css("background-color", "lightblue"); // Mouse enters
},
function() {
$(this).css("background-color", ""); // Mouse leaves
}
);
});
The slideUp() and slideDown() methods in jQuery are used for sliding animations to show or hide elements vertically
its general syntax is $(selector).slideUp(duration, complete);
Sample code
$("#myDiv").slideUp(500, function() {
alert("Element is now hidden!");
});
$("#myDiv").slideDown(500, function() {
alert("Element is now visible!");
});
You can use these methods together to create toggle-like functionality.
$("#toggleButton").click(function() {
$("#myDiv").slideToggle(500);
});
fadeIn() and fadeOut() are methods used to create fading effects for elements. These effects gradually change the opacity of an element, making it appear or disappear smoothly.
it's general syntax is
$(selector).fadeIn/.fadeOut(speed, callback);
Examples
$("#btnShow").click(function() {
$("#element").fadeIn("slow");
});
$("#btnHide").click(function() {
$("#element").fadeOut(500); // Fades out over 500 milliseconds
});
$("#btnToggle").click(function() {
$("#element").fadeOut(1000, function() {
alert("The element has faded out!");
});
});
You can use fadeIn() and fadeOut() in combination with other effects or conditions:
$("#btnToggle").click(function() {
if ($("#element").is(":visible")) {
$("#element").fadeOut("slow");
} else {
$("#element").fadeIn("slow");
}
});
The animate() method in jQuery allows you to create custom animations for CSS properties of an element.
it's general syntax is
$(selector).animate(properties, duration, easing, complete);
html
<div id="box" style="width:100px;height:100px;background-color:red;"></div>
<button id="animateBtn">Animate</button>
jquery
$(document).ready(function () {
$("#animateBtn").click(function () {
$("#box").animate({
width: "200px",
height: "200px",
opacity: 0.5
}, 1000);
});
});
Example for chaining animations
$("#box").animate({ height: "300px" }, 1000)
.animate({ width: "300px" }, 1000)
.animate({ opacity: 0.2 }, 1000);
Example for completing callback function
$("#box").animate(
{ left: "200px" },
2000,
"swing",
function () {
alert("Animation Complete!");
}
);
Example for animate with delay
$(document).ready(function() {
$("#box").animate({ left: '100px' }, 1000) // Move right in 1 second
.delay(500) // Wait for 500ms
.animate({ top: '100px' }, 1000); // Move down in 1 second
});
jQuery UI is a set of user interface (UI) components and interactions built on top of the jQuery JavaScript library. It provides a wide range of easy-to-use, customizable tools for adding interactive elements and functionality to web pages. These components can enhance the user experience by providing features like drag-and-drop, sliders, date pickers, dialogs, and animations.
Main Jquery widgets are
Accordion
Autocomplete
Button
Checkboxradio
Controlgroup
Datepicker
Dialog
Menu
Progressbar
Selectmenu
Slider
Spinner
Tabs
Tooltip