Пример кода
Вот универсальный блок кода, который подключает jQuery и другие популярные библиотеки (Bootstrap, Lodash, Axios) в одном месте:
html
<!-- Подключение библиотек -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- Пользовательский код --> <script> $(document).ready(() => { $(".ten").on("click", () => $(".six").click()); // Пример использования Lodash console.log(_.random(1, 100)); // Пример запроса через Axios axios.get('https://jsonplaceholder.typicode.com/todos/1') .then(response => console.log(response.data)) .catch(error => console.error(error)); }); </script>
📌 Популярные JS-библиотеки и фреймворки
🔹 1. jQuery (разные источники)
html
<!-- jQuery с Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src=“https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js”></script>
<script src=“https://code.jquery.com/jquery-3.6.0.min.js”></script>
🔹 2. Bootstrap (CSS + JS + Popper.js)
html
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><script src=“https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js”></script>
🔹 3. Vue.js
html
<!-- Vue 2 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script><script src=“https://unpkg.com/vue@3.2.31/dist/vue.global.js”></script>
🔹 4. React + ReactDOM
html
<!-- React -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
🔹 5. Angular
html
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
🔹 6. Lodash (утилиты для работы с массивами и объектами)
html
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
🔹 7. Axios (работа с HTTP-запросами)
html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
🔹 8. Moment.js (работа с датами и временем)
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
🔹 9. Chart.js (графики и диаграммы)
html
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
🔹 10. D3.js (визуализация данных)
html
<script src="https://d3js.org/d3.v7.min.js"></script>
🔹 11. Three.js (3D-графика)
html
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
🔹 12. Swiper.js (слайдеры и карусели)
html
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
🔹 13. Slick Carousel (слайдеры и карусели)
html
<!-- Slick CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Slick JS -->
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
🔹 14. GSAP (анимации)
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
🔹 15. Anime.js (анимации)
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
🔹 16. Particles.js (анимация частиц)
html
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
🔹 17. AOS (Animate On Scroll) (анимации при прокрутке)
html
<!-- AOS CSS -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<!-- AOS JS -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
🔹 18. Font Awesome (иконки)
html
<script src="https://kit.fontawesome.com/ВАШ-КОД.js" crossorigin="anonymous"></script>
🔹 19. Tailwind CSS (утилитарный CSS-фреймворк)
html
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
🔹 20. SweetAlert2 (красивые модальные окна)
html
<!-- SweetAlert2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css">
<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.all.min.js"></script>
🔹 21. Popper.js (используется для всплывающих подсказок)
html
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
🔹 22. jQuery UI (расширение для jQuery)
html
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- jQuery UI JS -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
📌 Дополнительные ресурсы
- 🔗 CDNJS – большая база библиотек.
- 🔗 jsDelivr – быстрый CDN для популярных библиотек.
- 🔗 Unpkg – удобен для NPM-пакетов.