JavaScript is among the most popular programming languages. It is adopted by most developers as it offers a wide range of features. Also, a wide variety of libraries are available for JavaScript that facilitate and make the development process easier. jQuery is one of the most popular JS libraries which is available as an open-source and cross-platform library. It allows developers to create high-performance web applications efficiently. Developers prefer working with jQuery as it eliminates the need of writing lengthy and repeating codes, thus reducing both the time and effort required to build web applications. With jQuery, developers can accommodate multiple lines of code into a small block. In this article, we will discuss some popular jQuery commands that can help you carry out complex tasks efficiently. But before that, we must understand why jQuery is popular.
Why is jQuery Popular?
Following are the key reasons that are accountable for the widespread popularity of jQuery:
- jQuery has a huge active community that is contributing consistently to improving its performance and functionalities.
- It is lightweight and easy to use.
- It comes with powerful chaining capabilities.
- You can get along with jQuery easily with its detailed documentation and tutorials.
- If you are looking to create Ajax components, you can use jQuery for that.
- Its reusable components allow you to write less code.
- It is a browser-friendly library.
jQuery Cheat Sheet
In this cheat sheet, we will be discussing the following parts of jQuery:
- Basics – It will introduce you to jQuery syntax with the help of the most commonly used code examples. With this, you will get to learn how to include jQuery in the HTML code.
- Selector – It works similar to how we target the CSS elements in the style sheets, and here we use selectors for the purpose.
- Events – It is somehow similar to JavaScript events, and here we set up listeners with the help of jQuery.
- Effects – It will allow you to add the desired animation in the HTML elements and add more existing features by customizing the inner CSS properties.
- DOM Manipulation – You will be able to manipulate the specific content of a Document Object Model item.
- Traversing – It allows you to target the elements depending on the hierarchy in the code.
- Ajax – With Ajax, you can exchange the data with the server for dynamically updating the content on a webpage.
Now let’s get started with the jQuery cheat sheet.
1. Attributes
Attributes are used for initializing the data in Jquery.
- .addClass- this will add the specified class(es) to each set of matched elements
- .attr- it will get the attribute’s value for the first element in the set of matched elements
- .hasClass- it determines whether any of the matched elements are assigned the given class
- .html- it gets the HTML contents of the first element in the set of matched elements
- .prop- it gets the value of a property for the first element in the set of matched elements
- .removeAttr- it removes an attribute from each element in the set of matched elements
- .removeClass- it removes a single class, multiple classes, or all classes from each element in the set of matched elements
- .removeProp- it removes a property for the set of matched elements
- .toggleClass- it adds or removes one or more classes from each element in the set of matched elements
- .val- it gets the current value of the first element in the set of matched elements
2. Selectors
Below are the basic selector commands that you can use within your code:
$("*") // it will select all the available elements
$("p.demo") // it will select the <p> elements having the class="intro"
$("p:first") // it will select the first <p> element
$("p span") // it will select the span, descendant of p
$("p > span") // it will select the span, direct child of p
$("p + span") // it will select the span that is immediately proceeded by a p
$("p ~ span") // it will select the strong element proceeded by p
$("ul li:first") // it will select the first <li> element of the first <ul>
$("ul li:first-child") // it will select the first <li> element of every <ul>
$("ul li:nth-child(3)") // it will select the third child
$("[href]") // it will select the element with an href attribute
$("a[target='_blank']") // it will select the <a> elements with a target "_blank" attribute
$("a[target!='_blank']") // it will select the <a> elements with a target attribute value other than "_blank"
$(":input") // it will select all form elements
$(":button") // it will select <button> and <input> elements of type="button"
$("tr:even") // it will select the even <tr> elements
$("tr:odd") // it will select the odd <tr> elements
$("span:parent") // it will select the element which has child element
$("span:contains('demo')") // it will help in selecting the specific element conaining the specified text
- Actions
$(selector).action()
$(this).hide() // it will select the current element
$("div").hide() // it will select all <div> elements
$(".demo1").hide() // it will help in selecting all elements with class="demo"
$("#demo1").hide() // it will select the element with id="demo"
3. Events
Below are some events that will allow you to perform some action whenever these events take place:
- .bind- it attaches a handler to an event for the specific elements
- .click- it binds an event handler to the “click” event of JavaScript, or trigger an event on that element
- .dblclick- it binds an event handler to the “dblclick” event of JavaScript, or trigger that event on an element
- .delegate- it attaches a handler to one or more events for all elements that match the selector, depending on a specific set of root elements
- .die- it removes an event handler that has been previously attached using .live() from the elements
- .error- it binds an event handler to the “error” event of JavaScript.
- event.result- specifies the last value returned by an event handler that was triggered by this event, unless the value was undefined
- event.stopImmediatePropagation- it prevents the execution of keeps the rest of the handlers and the event from bubbling up the DOM tree
- event.stopPropagation- it prevents the bubbling up of the DOM tree, preventing any parent handlers from being notified of the event
- Event.target- specify the DOM element that initiated the event
- .mousemove- it binds an event handler to the “mousemove” event of JavaScript or triggers that event on an element
- .mouseout- it binds an event handler to the “mouseout” JavaScript event, or trigger that event on an element
- .mouseover- it binds an event handler to the “mouseover” JavaScript event, or trigger that event on an element
- .mouseup- it binds an event handler to the “mouseup” JavaScript event, or trigger that event on an element
- .off- it removes an event handler
- .on- it attaches an event handler function for one or more events to the selected elements
4. Effects
These commands will help to add animations when used appropriately with the code. We have mentioned various effects with examples showing their syntax and usage.
- Hide / Show
$("#demo").hide(); // this command will set to display: none
$("#demo").show(200); // this command will show the hidden element with animation (speed)
$("#demo").toggle(); // it allows you to toggle between show and hide
$( "#element1" ).hide( "slow", function1() { // it allows you to hide using the callback function
console.log( "Animation done." );
});
- Fade
Fade methods allow you to add animations to a web page. The four fade methods are namely fadeIn, fadeOut, fadeToggle, and fadeTo.
$("#demo").fadeIn(); // this command will help in fading in a hidden element
$("#demo").fadeOut(300); // this command will implement the fade out
$("#demo").fadeToggle("slow"); // it will allow you to toggle between fadeIn and fadeOut
$("#demo").fadeTo("slow", 0.25); // you can add the time limit that will fade to 0.25 opacity
- Slide
There are three slide methods, namely slideDown, slideUp, and slideToggle, that will help you to implement animations to the screen.
$("#demo").slideDown(); //it will help in sliding the screen down
$("#demo").slideUp("slow"); //it will help in sliding the screen up in slow motion
$("#demo").slideToggle(); //it will help in toggling between the screen
5. DOM Manipulation
The below-mentioned commands will help you manipulate the DOM objects within a web page:
- Content
$("#demo").text(); // it will help in returning text content
$("#demo").html(); // it will help in returning the content, including HTML markup
$("#demo").val(); // it will help in returning the field value
$("#demo").html('Hey <em>yo</em>'); // it will help in setting the specific HTML content
- Attributes
$("#link").attr("href"); // it will get an attribute
$("#link").attr("href",'https://htmlg.com'); // it will help in setting the attribute
$("#link").attr({
"href" : "https://htmlg.com", // you will be able to set multiple attributes
"title" : "HTML Editor"
});
$("#link").attr("href", function1(i, orig_Value){
return orig_Value + "/help"; // callback function will get and change the attribute
});
- Add
$(".demo").prepend("Yo!"); // you can add the required content at the beginning in the specified elements
$(".demo").append("<em>Hey!</em>"); // you will be able to add the required content at the end in the specified elements
$(".demo").before("Cheers"); // you will be able to add the required content before the specified elements
$(".demo").after("<em>Peace</em>"); // you will be able to add the required content after the specified elements
- Remove
$("#demo").remove(); // it will help in removing the selected element
$("#demo").empty(); // it will help in removing the children
$("div").remove(".cl1, .cl2"); // it will help in removing the divs with the listed classes
- Classes
$("#demo").addClass("big red"); // it will help in adding the required class
$("h1, p").removeClass("green"); // it will remove the specified class
$("#demo").toggleClass("small"); // it will help you to toggle between adding and removing
- CSS
$("#demo").css("background-color"); // it will help in returning the CSS value
$("#demo").css("color", "blue"); // you will be able to set the desired CSS rule
$("#demo").css({"color": "blue", "font-size": "20px"}); // it will allow you to set multiple CSS properties
- Dimensions
Below are the available dimensions that you can mention with your code.
- width, height, innerWidth, innerHeight, outerWidth, outerHeight
- inner - it will include the padding
- outer - it will include the padding and border
6. Traversing
jQuery will help you to traverse through the elements with the help of various commands that will help in performing different actions on those elements.
$("#demo").parent(); // it will help you to access the direct parent
$("span").parent().hide(); // you will be able to change the parent color
$("#demo").parents(); // you will get to access all ancestors of the element
$("#demo").parentsUntil("#demo2"); // you will get to traverse through all ancestors between two - demo is inside demo2
$("#demo").children(); // you can traverse all direct children
$("#demo").children(".first"); // you will get to traverse all direct children having a specified class
$("#demo").find("span"); // you can traverse all span elements inside #demo
$("#demo").find("*"); // you can traverse all descendants
$("#demo").siblings("span"); // you can traverse span siblings of #demo
$("#demo").next(); // you can traverse to the next sibling
$("p").nextAll(); // you can traverse through all next siblings
$("#demo").nextUntil("#demo2"); //you can traverse through the siblings between two arguments
$("#demo").prev(); // you can traverse to the previous sibling
$("p").prevAll(); // you can traverse to all previous siblings
$("#demo").prevUntil("#demo2"); // it allows you to traverse to the previous siblings between the two arguments
- Filtering
jQuery allows the users to filter specific data as per their requirement with the help of the following filtering functions:
$("span_strong").first(); // it will specify the first strong in first span
$("span_strong").last(); // it will specify the last strong in last span
$("div").eq(3); // it will specify the element with a specific index
$("div").filter(".large"); // it will specify all div elements with .large class
$("div").not(".large"); // it will specify the opposite of filter
Conclusion
jQuery is capable of reducing the complexity that comes with JavaScript coding. It is only possible due to the rich-featured library that allows the developers to manage the lengthy codes in a few lines with the help of various useful commands. You can use this cheat sheet for revising your concepts or to check something fast while working with the immensely popular JS library.
People are also reading:
Leave a Comment on this Post