jQuery And jQuery Related Resources For Designers & Developers
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.2.min.js"></script> <!-- jQuery 4.x.x Slim Build --> <script src="//code.jquery.com/jquery-4.0.0-beta.2.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.14.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/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
2. jQuery UI API Documentation
3. jQuery Learning Center
4. jQuery Discussion Forum
5. Learn the basic building blocks of jQuery
6. A guide to the basics of jQuery
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-08-08
- Update jQuery UI v1.14.0
2024-07-18
- Update jQuery v4.0.0 Beta 2
2024-04-27
- Update jQuery 1.13.3
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
- Prev: None
- Next: Top 10 New jQuery Plugins Published In May 2013