MarshalOfficial/jquery-cheat-sheet.md

## jquery-cheat-sheet.md

      
    Raw
  

              jquery-cheat-sheet.md
            
          
    DOM Manipulation:


Selecting Elements:

$(selector): Selects elements based on CSS-style selectors.
$('#elementId'): Selects an element by its ID.
$('.className'): Selects elements by their class name.


Manipulating Elements:

.html(): Gets or sets the HTML content of an element.
.text(): Gets or sets the text content of an element.
.val(): Gets or sets the value of form elements like input, select, textarea.
.addClass(), .removeClass(), .toggleClass(): Adds, removes, or toggles CSS classes on elements.


Traversing the DOM:

.find(): Finds descendant elements of the selected elements.
.parent(), .children(), .siblings(): Traverse up or down the DOM tree.
.closest(): Finds the first ancestor that matches the selector.


Events:


Binding Events:

.click(), .dblclick(), .hover(): Binds click, double click, hover events.
.on(): General method for attaching events.
.delegate(), .live(): Event delegation for dynamically added elements (deprecated in newer versions).


Event Object:

event.preventDefault(): Prevents the default action of an event.
event.stopPropagation(): Stops the event from bubbling up the DOM tree.
event.target: Returns the element that triggered the event.
event.which: Returns which keyboard key or mouse button was pressed.


Effects and Animations:


Show/Hide:

.show(), .hide(): Shows or hides elements with optional animation.
.toggle(): Toggles the visibility of elements.


Fading:

.fadeIn(), .fadeOut(): Fades elements in or out.
.fadeToggle(): Toggles the fade in/out effect.


Sliding:

.slideDown(), .slideUp(): Slides elements down or up.
.slideToggle(): Toggles the sliding effect.


AJAX:


$.ajax():

As mentioned earlier, for making AJAX requests to the server.


$.get(), $.post():

Shortcut methods for making GET and POST requests.


JSONP:


$.getJSON(): Fetches JSON data using JSONP.


Utility Functions:


$.each():

Iterates over a jQuery object, executing a function for each matched element.


$.trim():

Removes leading and trailing whitespace from a string.


$.extend():

Merges the contents of two or more objects together into the first object.


$.parseJSON():

Parses a well-formed JSON string and returns the resulting JavaScript object.


Miscellaneous:


$.noConflict():

Relinquishes control of the $ variable, allowing other libraries to use it.


$.ready():

Equivalent to $(document).ready(), executes a function when the DOM is fully loaded.


Chaining:

Most jQuery methods return the jQuery object itself, allowing for method chaining.


Here's one example for each of the mentioned jQuery functionalities:
DOM Manipulation:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery DOM Manipulation Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="myDiv">Hello, World!</div>

<script>
// Changing the content of a div
$(document).ready(function() {
    $('#myDiv').text('Hello, OpenAI!');
});
</script>

</body>
</html>
Events:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Events Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="myButton">Click Me!</button>

<script>
// Handling a click event
$(document).ready(function() {
    $('#myButton').click(function() {
        alert('Button clicked!');
    });
});
</script>

</body>
</html>
Effects and Animations:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Effects and Animations Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="myDiv" style="display:none;">This is a hidden div.</div>
<button id="toggleButton">Toggle Div</button>

<script>
// Toggling a div
$(document).ready(function() {
    $('#toggleButton').click(function() {
        $('#myDiv').toggle(1000); // Toggle with animation (1 second)
    });
});
</script>

</body>
</html>
AJAX:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery AJAX Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="fetchButton">Fetch Data</button>
<div id="result"></div>

<script>
// Making an AJAX GET request
$(document).ready(function() {
    $('#fetchButton').click(function() {
        $.get('https://jsonplaceholder.typicode.com/posts/1', function(data) {
            $('#result').text(JSON.stringify(data));
        });
    });
});
</script>

</body>
</html>
Utility Functions:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Utility Functions Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="myList">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

<script>
// Iterating over list items
$(document).ready(function() {
    var items = '';
    $('#myList li').each(function(index) {
        items += 'Item ' + (index + 1) + ': ' + $(this).text() + '<br>';
    });
    $('#myList').html(items);
});
</script>

</body>
</html>