Introduction to Cheatsheet JQuery
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
- PHP for server end scripting
- MYSQL for database querying
Advantages of using JQuery framework over others,
- It involves a huge community and a whole lot of plugins introduced in it.
- 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
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:
|$(“*”)||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 leave||.mouseleave()||Browser Events||Browser Event method||Document Events||Document Event methods|
|mouse down||.mousedown()||Error population||.error()||unload||.unload()|
Cheat sheet Jquery effects:
Basics : .hide(), .show() , .toggle() – Allows to hide ,show and toggle the selected elements .
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.
opacity : 0.50
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.
- 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 Cheat sheet jQuery
1) Keep a context parameter which allows the execution to kick start from a deeper DOM branch instead of invoking from the root.
4.5 (1,665 ratings)
2) Check whether the element exists and then push forward for execution of the code.
// DOM element exists
//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.
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.
if (typeof jQuery == 'undefined')
console.log('jQuery not loaded');
8) Broken image links can be replaced with ease by carrying out the below piece of code,
$('img').on('error', function ()
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.
var random = 0
$.expr[':'].random = function(a, i, m, r)
if (i == 0)
random = Math.floor(Math.random() * r.length);
return i == random;
// how to utilize this piece of code.
11) Adding the disabled attribute to the input allows keeping the input field disabled until certain relative fields are filled.
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.
$(document).on('ajaxError', function (e, xhr, settings, error)
Cheat sheet JQuery – conclusion
This has been a guide to Cheat sheet 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 –