Updated March 4, 2023
Introduction to Cheatsheet JQuery
Jquery is a cross-platform Javascript library that is persistent on a primary intention to make web development easier to code. It is a proven statement that the introduction of Jquery has fairly reduced the length of javascript codes.so even a multiple line javascript code can easily be achieved with a small block or even a single line of JQuery statement.
In this Cheatsheet JQuery article, we will discuss what Jquery is and the PTP of this framework:
There are numerous websites active on the web, and the market includes a wide range of languages that accomplish the build of these websites and online products. Some of the famous ones are as follows,
- HTML , CSS
- Javascript and JQuery for client end scripting
- PHP for server end scripting
- MYSQL for database querying
- etc.
Advantages of using JQuery framework over others,
- It involves a huge community and a whole lot of plugins introduced in it.
- Lightweight
- powerful chaining capabilities
- Brief Documentation and tutorials
- Ability to develop Ajax components easily
- It’s Capability to make code simple and reusable
- Browser friendly
Basic Content and Syntax of Cheat Sheet JQuery
Include: Including Jquery to the current Execution script
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>Syntax: The Syntaxual structure of JQuery
The Selector select the HTML components
$(Selector).action()Action performed on selected component
Defines the use of JQuery
Cheat sheet for Jquery Selectors:
| Selector | DESCRIPTION |
| $(“*”) | Selects all the HTML elements |
| $(“p.demo”) | Selects <P> tag elements |
| $(“:button”) | Selects the button and input elements |
| $(“tr:even”) | Selects the even <tr> tag elements |
| $(“tr:odd”) | Selects the odd <tr> tag elements |
| $(“span:parent”) | Selects elements which have a child element associated |
| $(“[href]”) | Selects all elements with href attributes |
| $(“:input”) | Selects all form elements |
Cheat sheet for Jquery Events: Event is some sort of action on the webpage, The key events involved are as follow.
| Mouse Events | Mouse Event method | Keyboard Events | Keyboard Event method | Form Events | Form Event method |
| mouse enter | .mouseenter() | keypress | .keypress() | change | .change() |
| Double click | .dblclick() | Keydown | .keydown() | focus | .focus() |
| click | .click() | Keyup | .keyup() | blur | .blur() |
| mouse leave | .mouseleave() | Browser Events | Browser Event method | Document Events | Document Event methods |
| mouse down | .mousedown() | Error population | .error() | unload | .unload() |
| mouse up | .mouseup() | scroll | .scroll() | load | .load() |
Ex :
$("p").dblclick(function(){
$(this).hide();
});Cheat sheet Jquery effects:
Basics : .hide(), .show() , .toggle() – Allows to hide ,show and toggle the selected elements .
Ex:
$("p").hide();Custom : .animate() , .delay() , .dequeue() , .stop()
- the animate() method prepares custom animations
- the delay() method allows delayed execution of items.
- dequeue() execute the next sequence of functions present in the queue.
Ex :
$("element1").animate(
{
opacity : 0.50
left: "+=27"
}Fade : fadeTo(),fadeOut(),fadeIn(),fadeToggle()
- fadeIn() Fades a hidden element
- fadeout() allows a visible element to be faded
- fadeTo() fades to a given opacity
- fadeToggle() allows the element to get toggled with fade in and fade out methods.
Ex :
$("button").click(function()
{
$("#div2").fadeOut("slow");
});Slide: slideDown(),slideUp(),slideToggle()
- slideDown() Display with a sliding motion overmatched elements
- slideToggle() Displays or hides with a sliding motion overmatched elements
- slideUp() Hides with a sliding motion overmatched elements
Free Tips and Tricks of using Cheatsheet jQuery
1) Keep a context parameter that allows the execution to kick start from a deeper DOM branch instead of invoking from the root.
2) Check whether the element exists and then push forward for the execution of the code.
Syntax :
if($("#element").length)
{
// DOM element exists
}
else
{
//DOM element dont exists
}3) jQuerys data method binds DOM elements and data without modifying the DOM.
4) Verify if any of the elements are hidden.
Ex :
if($(element).is(":visible") == "true")
{
//The element is Visible
}5) Keep a count of immediate preceding child elements.
6) Loading the images prior optimizes the performance of query execution.
7) It is better to check the query has been successfully loaded before getting it executed.
Ex:
if (typeof jQuery == 'undefined')
{
console.log('jQuery not loaded');
}
else
{
console.log('jQuery loaded');
}8) Broken image links can be replaced with ease by carrying out the below piece of code,
Ex:
$('img').on('error', function ()
{
if(!$(this).hasClass('broken-image'))
{
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});9) The frame must be always made sure to fit the content of the page.
10) Own selection filters can be added in Jquery. as like everything in the library selection filters can also be customized.adding a $.expr[‘:’] object will make this done.
Ex :
(function($)
{
var random = 0
$.expr[':'].random = function(a, i, m, r)
{
if (i == 0)
{
random = Math.floor(Math.random() * r.length);
}
return i == random;
};
})(jQuery);
// how to utilize this piece of code.
$('li:random').addClass('glow');11) Adding the disabled attribute to the input allows keeping the input field disabled until certain relative fields are filled.
Ex:
$('input[type="submit"]').prop('disabled', true);12) Make sure to define the error handler section in order to handle ajax error returns. when a 400 or 500 error is hit then this section will automatically get triggered.
Ex:
$(document).on('ajaxError', function (e, xhr, settings, error)
{
console.log(error);
});Conclusion – cheat sheet JQuery
Jquery reduces the additional complexity which javascript holds with it. with multiple entities associated with jquery stands as among the top webpage development tools in the market. its lightweight and efficient chaining capabilities have fairly made web coding easily for developers.
Recommended Article
This has been a guide to Cheatsheet JQuery here we have discussed the content and command as well as free tips and tricks of cheat sheet JQuery you may also look at the following article to learn more –
