Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kostastepetes/jquery-basic-cheatsheet
📃 A comprehensive and simple JQuery cheatsheet that contains the most useful & important aspects of the library.
https://github.com/kostastepetes/jquery-basic-cheatsheet
cheatsheet jquery jquery-cheat-sheet
Last synced: 7 days ago
JSON representation
📃 A comprehensive and simple JQuery cheatsheet that contains the most useful & important aspects of the library.
- Host: GitHub
- URL: https://github.com/kostastepetes/jquery-basic-cheatsheet
- Owner: kostastepetes
- Created: 2024-03-02T18:20:33.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-03-28T15:09:01.000Z (8 months ago)
- Last Synced: 2024-03-28T16:31:13.793Z (8 months ago)
- Topics: cheatsheet, jquery, jquery-cheat-sheet
- Language: JavaScript
- Homepage:
- Size: 22.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jQuery Cheatsheet
This jQuery Cheatsheet provides examples and explanations of various jQuery functionalities.
## Description
This JavaScript file (`jquery-basic-cheatsheet.js`) contains examples of how to use jQuery to perform common tasks such as selecting elements, manipulating CSS and content, handling events, making AJAX requests, applying effects, and handling form submissions.
## Contents
- **Selecting Elements**: Demonstrates various methods to select elements using jQuery.
- **Manipulating CSS**: Shows how to manipulate CSS properties of selected elements.
- **Manipulating Content**: Provides examples of adding, replacing, removing, wrapping, and cloning content.
- **Event Handling**: Demonstrates event handling using jQuery, such as click, hover, focus, blur, and change events.
- **AJAX**: Shows how to make AJAX requests to load data asynchronously.
- **Effects**: Provides examples of applying effects like fading, sliding, and toggling.
- **Form Submission**: Demonstrates how to handle form submissions using both POST and GET methods.
## Usage
1. Include `jquery-cheatsheet.js` in your HTML file after including jQuery.
2. Use the provided examples and modify them according to your needs.
```html
```
## Here's a side-by-side comparison of jQuery and equivalent JavaScript for various functionalities:
### Example 1: Selecting Elements
#### jQuery:
```javascript
var paragraphs = $("p");
var firstParagraph = $("#first-paragraph");
var paragraphsWithClass = $(".highlight");
```
#### JavaScript:
```javascript
var paragraphs = document.querySelectorAll("p");
var firstParagraph = document.getElementById("first-paragraph");
var paragraphsWithClass = document.querySelectorAll(".highlight");
```
### Example 2: Manipulating CSS
#### jQuery:
```javascript
$("h1").css("color", "blue");
$("#second-heading").css({
"font-size": "24px",
"font-weight": "bold"
});
```
#### JavaScript:
```javascript
var h1Elements = document.querySelectorAll("h1");
h1Elements.forEach(function(element) {
element.style.color = "blue";
});
var secondHeading = document.getElementById("second-heading");
secondHeading.style.fontSize = "24px";
secondHeading.style.fontWeight = "bold";
```
### Example 3: Manipulating Content
#### jQuery:
```javascript
$("#add-content").click(function() {
$("#content").append("
New paragraph added!
");
});
$("#replace-content").click(function() {
$("#content").html("Content replaced!
");
});
```
#### JavaScript:
```javascript
document.getElementById("add-content").addEventListener("click", function() {
var newParagraph = document.createElement("p");
newParagraph.textContent = "New paragraph added!";
document.getElementById("content").appendChild(newParagraph);
});
document.getElementById("replace-content").addEventListener("click", function() {
document.getElementById("content").innerHTML = "
Content replaced!
";
});
```
### Additional content manipulation methods follow a similar pattern.
### Example 4: Event Handling
#### jQuery:
```javascript
$("#btn-click").click(function() {
alert("Button clicked!");
});
$("input[type='text']").keypress(function(event) {
if (event.which === 13) {
alert("Enter key pressed!");
}
});
```
#### JavaScript:
```javascript
document.getElementById("btn-click").addEventListener("click", function() {
alert("Button clicked!");
});
document.querySelectorAll("input[type='text']").forEach(function(input) {
input.addEventListener("keypress", function(event) {
if (event.which === 13) {
alert("Enter key pressed!");
}
});
});
```
### Additional event handling methods follow a similar pattern.
### Example 5: AJAX
#### jQuery:
```javascript
$("#load-data").click(function() {
$.ajax({
url: "data.txt",
success: function(data) {
$("#data-container").text(data);
},
error: function() {
$("#data-container").text("Error loading data!");
}
});
});
```
#### JavaScript:
```javascript
document.getElementById("load-data").addEventListener("click", function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.txt", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("data-container").textContent = xhr.responseText;
} else if (xhr.readyState === 4) {
document.getElementById("data-container").textContent = "Error loading data!";
}
};
xhr.send();
});
```
### Example 6: Effects
#### jQuery:
```javascript
$("#hide-text").click(function() {
$("#text-to-hide").hide();
});
// Other effects methods follow a similar pattern.
```
#### JavaScript:
```javascript
document.getElementById("hide-text").addEventListener("click", function() {
document.getElementById("text-to-hide").style.display = "none";
});
// Other effects methods follow a similar pattern.
```
### Example 7: Form Submission
#### jQuery:
```javascript
$("#my-form-post").submit(function(event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
type: "POST",
url: "submit.php",
data: formData,
success: function(response) {
alert("Form submitted successfully (POST)!");
},
error: function() {
alert("Error submitting form (POST)!");
}
});
});
// Form submission using GET follows a similar pattern.
```
#### JavaScript:
```javascript
document.getElementById("my-form-post").addEventListener("submit", function(event) {
event.preventDefault();
var formData = new FormData(this);
var xhr = new XMLHttpRequest();
xhr.open("POST", "submit.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert("Form submitted successfully (POST)!");
} else if (xhr.readyState === 4) {
alert("Error submitting form (POST)!");
}
};
xhr.send(formData);
});
// Form submission using GET follows a similar pattern.
```