Using Method Chaining in jQuery

When you use method chaining in jQuery, it ensures that you never have to use the same selector more than once. Over-using a selector can seriously slow down your code, as every time you call on a selector you’re forcing the browser to go looking for it. By combining or “chaining” multiple methods, you can seriously cut down on the amount of times you make your browser look for the same elements without having to set any variables.

Here’s an example of what your jQuery could look like before you employ method chaining:

$("#header").css('color', '#333");

To chain all of these methods so you only have to use the $(“#header”) selector once, you simply need to connect them using a period “.”:

$("#header").css('color', '#333").addClass("bigger").toggle();

Now, when whatever your event will be to trigger this code occurs, the header will change color, add the .bigger class and whatever CSS properties come along with it, and it will toggle from view — all while the browser only has to find the selector once, rather than three times. Method chaining is a great way to clean up your code, keep things concise, and make sure your code is running as quickly as it possibly can.

Disable Links with jQuery

jQuery’s built in preventDefault() method is a great way to prevent the default functionality of an element from occurring. It’s probably most commonly used to disable links. Maybe you want a certain link only to work under certain conditions (like for example, you only want it clicked if the user is on a desktop sized screen), or maybe you want to disable a link all together. Either way, doing so is pretty simple with jQuery’s preventDefault() method.


The code snippet above will disable ALL your links, so make sure that in place of “a”, you write the exact class or ID of the link you’d like to select and disable, otherwise none of your links will work!

jQuery Prefixes: jQuery vs. $

It’s a really common practice in jQuery to use the dollar sign ($) prefix with your methods, like this:


The above code would make the div with the ID #myDiv slide up when the page loads. But that’s not the only way to write that function. Sometimes you might see it written with the word jQuery in place of the $ symbol:


The two prefixes $ and jQuery are essentially interchangeable with each other because of the function that can be found in the jQuery source code:

window.jQuery = window.$ = jQuery

The function above basically defines $ as an alias for jQuery, so go ahead and use them interchangeably in jQuery.

Create a Simple Back to Top Button with jQuery

We’ve all seen those handy little “back to top” buttons, the one that usually appear at the bottom of a page once a user starts scrolling that, when clicked, will smoothly return the page back to the top position.

Screen Shot 2016-08-29 at 4.37.50 PM

Insert the following snippet into your projects to add a back to top button to your own pages. The code works by having the button (in this case it’s the element with the class .back-to-top) initially hidden, with instructions to .fade-in() once the user has scrolled past 100px. Have fun styling your button any way you like!

var $backToTop = $(".back-to-top");
/* this hides the back to top button when the page first loads */
/* now we need to write a function that makes the back to top button appear after the user has scrolled a certain amount */
$(window).on('scroll', function() {
 if ($(this).scrollTop() > 100) { /* back to top will appear after the user scrolls 100 pixels */
 } else {
/* this function activates a smooth scroll to the top of the page when the back to top button is clicked */
$backToTop.on('click', function(e) {
 $("html, body").animate({scrollTop: 0}, 500);

15 jQuery Rating Plugins

In this post, find a compiled list of 15 jQuery based rating plugins to create rating system on your website. These plugins can use icon fonts, images, text or your own logo to create ratings. These plugins display ratings in the form of stars, smileys, bars, like/dislike button and thumb’s up/down. These plugins can be used for getting feedback and in case of any ecommerce portal, get rating for your products.

1. RateIt


Fast, progressive enhancement, touch support, customizable (just swap out the images, or change some CSS), unobtrusive JavaScript (using HTML5 data-* attributes), RTL support, supports as many stars as you’d like, and also any step size.

2. Bar Rating Plugin

Bar Rating Plugin

Bar Rating Plugin works by transforming a standard select field into a rating widget. The rating widget can be flexibly styled with CSS.

3. Upvote



Upvote is a lightweight jQuery plugin that generates a voting widget like the one used on Stack Exchange sites.

4. Thumb.js



Thumbs.js is a simple jQuery plugin for creating a like/dislike system with thumb icons to rate your content.

5. Star Rating Plugin



Star Rating Plugin is a simple jQuery rating plugin which uses Googles Materialize Icons.

6. starr



starrr is a very lightweight jQuery plugin (less than 75 lines of code) for creating a star quality rating which uses Font Awesome Icon to render the stars.

7. jQuery Emoji Ratings

jQuery Stars

Emoji Ratings is a simple, lightweight jQuery star rating plugin that uses emoji Unicode characters for rating symbols.

8. Rater



Rater.js is a highly customizable rating widget that supports images, utf-8 glyphs and other HTML elements.

9. jRate



jRate is a jQuery plugin that helps to generate RATING with various features like displaying multi-colored STARs, customize own shapes (like square, rhombus, circle, star) and show ratings horizontally or vertically.

10. Raterater



Raterater is jQuery based 5 star rating widget that uses Font Awesome 4 for scalable & style-able star icons.

11. Rate Picker

Rate Picker


Rate Picker is a jQuery plugin for inserting a simple rating system on your webpage.

12. rateYo


rateYo is a simple and flexible jQuery star rating plugin which uses SVG to render rating so no images required. All you need is to create a div, throw some styles, initialize and that’s it!

13. jQuery Stars

jQuery Stars

jQuery Stars.js is a jQuery plugin for generating a star rating system which can use any icon fonts.

14. RatingBar


ratingBar is a jQuery plugin which replaces a textual rating with a graphical rating using CSS. It’s easy to use, fully customizable and degrades gracefully. It also supports jQuery easing animations.

15. jQuery WebRating

jQuery WebRating

jQuery webRating is easy to use jQuery plugin to create a rating system. It can use stars, hearts, smiles or your own logo. It also uses cookies to limit clicks per visitor.

Using jQuery to Access iFrame Elements

Most developers will probably be able to tell you about how much they dislike working with iFrames. The content within the iFrames can’t be accessed with CSS, so if the frame doesn’t work with your site’s design, if the sizing is off, if you’d like to change the positioning of the content…you’re mostly out of luck, unless you have access to the server that hosts whatever is being embedded with the frame and it isn’t a problem to change the source material. However, it’s also possible to use a really simple jQuery to access the elements within the iFrame. Check it out below:

	var iFrameDOM = $("iframe#frameID").contents();

	iFrameDOM.find(".page").css("background-color", "#fff");

In the example above, the iFrame is selected, and then once the selection has been made any element within the iFrame can be accessed and changed using the .find() method. You can use jQuery to add jQuery effects to your iFrame elements, to change the CSS rules, or even to add content. Above, the script is used to change the background color of the .page element within the frame to white. Use the script for yourself and save yourself a headache next time you’re working with an iFrame!