jQuery And jQuery Related Resources For Designers & Developers

by jQuery Script,

jQuery is by far one of the most popular web development framework. With jQuery and jQuery plugins, you can create various useful and awesome effects/functionalities/widgets for your projects. To master jQuery development, as well as HTML5/CSS3/javascript, are must skills in Web Front-end Development.

There're a large number of jQuery and related resources available for designers and developers on the web these days. But they’re not always easy to find when you actually need them.  Here is a hand-made and constantly updated collection of useful jQuery and jQuery related resources shared with you! I hope you like it!

Using jQuery with a CDN:

1. jQuery Library

<!-- jQuery 4.x.x -->
<script src="//code.jquery.com/jquery-4.0.0-beta.min.js"></script>
<!-- jQuery 4.x.x Slim Build -->
<script src="//code.jquery.com/jquery-4.0.0-beta.slim.min.js"></script>

<!-- jQuery 3.x.x -->
<script src="//code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- jQuery 3.x.x Slim Build -->
<script src="//code.jquery.com/jquery-3.7.1.slim.min.js"></script>

<!-- jQuery 2.2.x -->
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>

<!-- jQuery 1.x -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<!-- Latest jQuery library -->
<script src="//code.jquery.com/jquery-latest.min.js"></script>

2. jQuery UI Library and CSS

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/flick/jquery-ui.css">

3. jQuery Mobile

<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

How to implement your jQuery plugin:

1. Include jQuery Library on your web site.

<!-- jQuery 3.x.x -->
<script src="//code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- jQuery 3.x.x Slim Build -->
<script src="//code.jquery.com/jquery-3.7.1.slim.min.js"></script>
<!-- jQuery 2.2.x -->
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<!-- jQuery 1.x -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- Latest jQuery library -->
<script src="//code.jquery.com/jquery-latest.min.js"></script>

2. Include the jQuery plugin.

<script src="PLUGIN.js"></script>

3. Call the plugin on document ready.

$(function() {
  $('SELECTOR').PLUGINNAME({
   // [OPTIONS]
  });
});

jQuery Resources

1. jQuery API Documentation

http://api.jquery.com/

2. jQuery UI API Documentation

http://api.jqueryui.com/

3. jQuery Learning Center

http://learn.jquery.com/

4. jQuery Discussion Forum

http://forum.jquery.com/

5. Learn the basic building blocks of jQuery

http://try.jquery.com/

6. A guide to the basics of jQuery

http://jqfundamentals.com/

7. Learn jQuery in 30 Days

http://learnjquery.tutsplus.com/

8. jQuery Succinctly

http://www.syncfusion.com/resources/techportal/ebooks/jquery

Related Resources:

1. HTML5 Cheat Sheet (PDF)

http://www.hostingreviewbox.com/html5-cheat-sheet/

2. CSS3 Cheat Sheet (PDF)

http://media.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf

3. JavaScript Cheat Sheet

http://www.addedbytes.com/cheat-sheets/javascript-cheat-sheet/

4. normalize.css

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

5. modernizr.js

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

6. Twitter's Bootstrap 3 framework.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

7. Twitter's Bootstrap 4 framework.

<!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

8. Twitter's Bootstrap 5 framework.

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Changelog:

2024-02-21

  • Update Bootstrap 5.3.3

2024-02-01

  • Update jQuery 4

2023-09-15

  • Update Bootstrap 5.3.2

2023-08-29

  • Update Bootstrap 5
  • Update jQuery 3.7.1

2023-05-31

  • Update Bootstrap 5

2023-03-09

  • Update jQuery resources.

2022-12-21

  • Update jQuery resources.

2022-12-14

  • Update jQuery and Bootstrap resources.

2022-09-05

  • Update jQuery, jQuery UI, and Bootstrap resources.

2021-12-01

  • Update Bootstrap 5 and jQuery UI resources

2021-05-23

  • Update Bootstrap 5 resources