поэтому я чувствую (и надеюсь) это довольно просто. Я новичок в javascript и пытаюсь заставить это работать. Когда я ссылаюсь на мой внешний .js файл из моего html, он не работает. Однако при вводе кода script непосредственно в мой HTML он работает.
$(document).ready(function()< $(«#flip»).click(function()< $(«#panel»).slideToggle(«slow»); >); >);
Это файл index.html:
slidepanel test Click to slide the panel down or up Hello world!
#panel,#flip < padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; >#panel
Лучший ответ:
Вы используете jQuery, но похоже, что вы его не включили. Добавьте это в свой элемент HEAD
Вам нужно импортировать jQuery.
На самом деле, у меня была такая проблема, и я попробовал код ниже.
У вас нет jquery в разделе . Добавьте его перед тем, как добавить scripts.js . Только тогда ваш код будет работать.
slidepanel test
Если вы тестируете это на своем локальном компьютере, добавьте http в src или загрузите свою собственную копию jQuery.
Как подключить javascript к html | HTML уроки
И как в качестве побочного элемента, всегда лучше добавить stylesheets перед вашими файлами js .
Похоже, вам не хватает jQuery. Включите его, прежде чем включать собственный код JavaScript.
В вашем script содержится jQuery. Чтобы использовать его, у вас есть 2 варианта:
1. Загрузите его на свою веб-страницу:
- Загрузите производственную версию из jQuery.com
- В разделе добавьте:
2. Включить jQuery из CDN:
У меня похожая проблема. Ниже приведен код в двух файлах, который генерирует только белую пустую страницу, при выполнении кода не сообщается об ошибках, в чем проблема?
Three.js html, body
function init() < var scene = new THREE.Scene(); var box = getBox(1, 1, 1); var plane = getPlane(4); box.position.y = box.geometry.parameters.height/2; plane.rotation.x = Math.PI/2; scene.add(box); scene.add(plane); var camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 1, 1000 ); camera.position.x = 1; camera.position.y = 2; camera.position.z = 5; camera.lookAt(new THREE.Vector3(0, 0, 0)); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.getElementById(‘webgl’).appendChild(renderer.domElement); renderer.render( scene, camera ); >function getBox(w, h, d) < var geometry = new THREE.BoxGeometry(w, h, d); var material = new THREE.MeshBasicMaterial(< color: 0x00ff00 >); var mesh = new THREE.Mesh( geometry, material ); return mesh; > function getPlane(size) < var geometry = new THREE.PlaneGeometry(size, size); var material = new THREE.MeshBasicMaterial(< color: 0xff0000, side: THREE.DoubleSide >); var mesh = new THREE.Mesh( geometry, material ); return mesh; > init();
Источник: techarks.ru
Как подключить Javascript файл к html документу
Подключение jQuery
jQuery — это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript.
JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять различные задачи, используя меньше кода.
Немного теории
Для лучшего понимания давайте рассмотрим основные задачи, которые можно решить с помощью библиотеки jQuery, рассмотрим какие бывают версии и варианты подключения, а затем перейдем непосредственно к практике.
Важные особенности jQuery
Выбор DOM: jQuery предоставляет селекторы для извлечения элемента DOM на основе различных критериев, таких как имя тега, идентификатор, имя класса css, имя атрибута, значение, n-й дочерний элемент в иерархии и т.д.
DOM манипуляции: вы можете манипулировать DOM-элементами, используя различные встроенные функции jQuery. Например, добавление или удаление элементов, изменение содержимого HTML, класса CSS и т.д.
Специальные эффекты: Вы можете применять специальные эффекты к элементам DOM, таким как показ или скрытие элементов, постепенное увеличение или уменьшение видимости, эффект скольжения, анимация и т.д.
События: библиотека jQuery включает в себя функции, которые эквивалентны DOM-событиям, таким как нажатие, dblclick, mouseenter, отпускание мыши, размытие, keyup, keydown и т.д. Эти функции автоматически решают проблемы, возникающие в браузере.
Ajax: jQuery также включает в себя простые в использовании функции AJAX для загрузки данных с серверов без перезагрузки всей страницы.
Кросс-браузерная поддержка: библиотека jQuery автоматически обрабатывает кросс-браузерные проблемы, поэтому пользователю не нужно об этом беспокоиться. jQuery поддерживает IE 6.0+, FF 2.0+, Safari 3.0+, Chrome и Opera 9.0+.
Преимущества jQuery
Легко учиться: jQuery легко научиться, потому что он поддерживает то же самое кодирование в стиле JavaScript.
Пишите меньше, делайте больше: jQuery предоставляет богатый набор функций, которые повышают производительность разработчиков за счет написания меньшего количества удобочитаемого кода.
Отличная документация по API: jQuery предоставляет отличную онлайн-документацию по API.
Кросс-браузерная поддержка: jQuery обеспечивает отличную кросс-браузерную поддержку без написания дополнительного кода.
Ненавязчивый: jQuery является ненавязчивым, что позволяет разделить проблемы путем разделения HTML и jQuery кода.
Версии jQuery
На данный момент существуют три версии jQuery: 1.x, 2.x и 3.x. Отличие второй версии лишь в том, что в ней перестали поддерживаться старые браузеры, такие как Internet Explorer ниже 8 версии. Это позволило уменьшить размер файла библиотеки и ускорить её работу. Третья версия получила еще больше ускорения, новых методов и исправлений.
Так же jQuery используется в сжатом (.min) и не сжатом варианте. Несжатую версию библиотеки вы можете использовать во время разработки. В сжатом варианте код минимизирован и внести какие-то изменения в него практически невозможно. Поэтому сжатый вариант используют уже на рабочем проекте для более оптимальной работы, так как библиотека в таком варианте занимает гораздо меньше места и быстрее обрабатывается.
Подключение jQuery
Для подключения jQuery к вашему проекту существует 2 способа: локальный и с помощью CDN. При локальном способе библиотека подключается как обычный .js файл, который находится на вашем сервере. При подключении с CDN библиотека подключается с удаленного сервера, например с Google CDN. Давайте рассмотрим каждый способ более подробно.
Подключение jQuery локально
1. Загрузите js-файл библиотеки jQuery с официальной страницы. Просто щелкните правой кнопкой мыши ссылку для загрузки и выберите пункт «Сохранить ссылку как» во всплывающем меню.
2. Затем сохраните загружаемый файл в каталоге вашего сайта. Я например просто сохраняю его в папке js моего проекта вместе с остальными js-скриптами.
3. Теперь вам нужно включить скачанный ранее файл библиотеки в вашу страницу. Разместите следующий код между тегами и :
Должно получится что-то вроде этого:
jQuery
Подключение jQuery
Подключение jQuery с CDN
Подключение jQuery размещенного на CDN похоже на локальное, за исключением того, что файл библиотеки будет не на вашем сервере, а на удаленном. Помимо этой детали, вы просто добавляете jQuery в вашу страницу, как и любой другой внешний файл JavaScript.
Одно большое преимущество использования размещенного jQuery от Google: многие пользователи уже загрузили jQuery из Google CDN при посещении другого веб-сайта. В результате он будет загружен из кэша при посещении вашего сайта, что приводит к ускорению загрузки. Кроме того, Google CDN будет следить за тем, чтобы после того, как пользователь запросил у него файл, он был отправлен с ближайшего к ним сервера, что также приводит к ускорению загрузки.
Наиболее популярные CDN — это Google CDN и jQuery CDN. Мы рассмотрим подключение с Google CDN, но подключение с других серверов аналогично и можете выбрать любой понравившийся вариант.
1. Получите ссылку на библиотеку на официальном сайте Google CDN.
2. Разместите полученный код между тегами и :
Должно получится примерно следующее:
jQuery
Подключение jQuery
Как проверить подключен ли jQuery на странице?
Добавьте следующий код перед закрывающим тегом :
$(document).ready(function()< alert(‘Библиотека подключена и работает!’); >);
Если библиотека подключена и работает, то скрипт вызовет всплывающее окно при открытии страницы.
Обратите внимание, что вызовы функций jQuery должны находится после подключения самой библиотеки. Если код подключения библиотеки будет находится после вызова, то ваша функция не сработает и скорее всего вызовет ошибку.
Полный код примера:
jQuery
Подключение jQuery
$(document).ready(function()< alert(‘Библиотека подключена и работает!’); >);
Сохраните этот код в файл .html и запустите его. Вы увидите вот такое всплывающее окно:
Заключение
Как видите подключить и начать использовать библиотеку jQuery совсем просто. А каким именно вариантом подключения воспользоваться это уже решать вам.
Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Поделиться:
Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
Если мы используем JavaScript, то некоторые действия по умолчанию нужно отменить. Самый распространённый случай это клик по ссылке. К примеру при нажатии должно появляться всплывающее окно, но по умолчанию браузер будет переходить по URL. Если в атрибуте href указать знак Читать далее
Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ — это определить Читать далее
Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее
Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее
Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню с флагами. На данный момент сервис Google Translate Widget больше не поддерживается, но это никак не отразится на сайтах, которые были подключены ранее. Наш кастомный Читать далее
В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим Читать далее
Источник: it-blog.ru