Jquery главная страница. Введение в jQuery. Начало работы с jQuery
У меня есть xml-документ, который сейчас даже не распознается как xml в IE9. Я попытался добавить правильный атрибут xmlns: xsl, также он имеет правильный заголовок, начинающийся с
Этот xml отлично отображается в IE 6 7 8, но не работает в IE9. Я не уверен, что это проблема, связанная с режимом Quirks, и если я не уверен, что DOCTYPE должен использовать для XML-документов. Любая помощь будет оценена. Ниже приведены первые несколько строк документа XML.
3 ответов
Можете ли вы уточнить, как он "даже не распознается как xml на IE9"? Появляется ли сообщение об ошибке, или просто оно выглядит иначе в IE9, чем в предыдущих версиях?
Первое, что делает ваш XML файл, - это связать себя с таблицей стилей XSLT на странице "/mobiledoc/jsp/empi/master/CCD.xsl", так что это может стать источником вашей проблемы. Некоторые предложения:
В качестве теста удалите бит . Вы теперь получаете такое же поведение во всех браузерах? (Возможно, это просто иерархическое представление XML файла). Если это так, то проблема заключается в вашей таблице стилей XSLT.
Что делает эта таблица стилей? Если он преобразует XML файл в HTML, он может использовать некоторые несоответствующие (X) HTML-конструкции или стили, которые более старые версии IE допускают, но какой IE9 является более строгим. Если "не распознано" - это проблема с макетом/отображением, настройка таблицы стилей может исправить то, что вы видите в браузере.
Основываясь на том, что вы сказали нам до сих пор, я думаю, что, вероятно, там, где вам нужно начать.
ETA. Ниже приведенный ниже разговор заключался в том, что директива вынуждала к выпуску 4,04 HTML doctype; изменив это на (и установив пару других проблем с преобразованием), исправил проблему в IE9.
Я рад, что проблема была исправлена - в данном конкретном случае. Но реальная причина ошибки в IE9 пока не разглашается, поэтому я сделаю это здесь.
Причина встречного поведения - ошибка в обработке XSLT в IE9 .
Хорошо, хорошо, это не ошибка, а просто плохая отчетность об ошибках. Дело в том, что IE9 применяет MSXML6 по умолчанию, и многое изменилось в отношении MSXML4. Когда в XSLT есть простая ошибка, она не сообщается - IE9, похоже, пропускает обработку шаблонов по умолчанию text(), что приводит к представлению всех текстовых узлов.
Хуже того, когда что-то делается в XSLT, который по умолчанию запрещен в MSXML6, происходит то же самое. Итак, что запрещено по умолчанию в MSXML6? Много! Например, применение Jscript. И DTD. И функция document() не будет работать.
В вышеприведенном случае можно подозревать, что текст, показанный на рисунке (который, очевидно, исходит от применения шаблонов по умолчанию), свидетельствует о наличии ошибки в xslt - ожидании обнаружения с помощью хороших инструментов. Но это поведение IE9 не так явно связано с xslt, когда нет текста в xml-части открытого файла (то есть, когда сам xslt поставляет все обрабатываемые данные, например, импортируя xml файлы во время выполнения или данные в xml, что xslt-процессы - все в атрибутах и nodenames). Вы просто должны знать...
Вы можете увидеть сообщение об ошибке за всем этим, если вы перейдете к инструментам разработчика, нажав F12 (или выберите его в меню "Инструменты"). В подэкране инструментов разработчика выберите Script Меню и загрузите свою страницу сейчас. Вы увидите, что справа, на консоли появится сообщение об ошибке:
XSLT8690: XSLT processing failed.
Когда эта ошибка возникает, отображаются только текстовые узлы в xml (поэтому для пустого корня xml node страница будет пустой).
Я могу найти только одну ссылку на эту ошибку в Интернете: http://www.wikistep.org/bugzilla/show_bug.cgi?id=4140 .
Обратите внимание, что когда вы выбираете "вид совместимости", нажав кнопку рваной страницы рядом с кнопкой обновления (которая не всегда доступна, другая -minor-ошибка IE9), страница возвращается к отображению IE8 и будет в порядке опять же - ну, конечно, кроме любых ошибок в xslt, конечно, но MSXML 4.0 не имеет всех этих ограничений, которые по умолчанию имеет MSXML 6.0. Это безопаснее, конечно, но очень раздражает.
Обратите внимание, что, выбирая представление совместимости, часть сайта файла url добавляется в список сайтов, для которых автоматически применяется вид совместимости.
Чтобы воссоздать проблему, вам нужно будет удалить сайт из этого списка, нажав Alt, чтобы открыть меню, выбрать инструменты/параметры просмотра совместимости и удалить сайт из списка, прежде чем повторять попытку.
Также обратите внимание, что трюк применения представления совместимости не всегда исправить: когда, например, xslt вызывает встроенный javascript, содержащий классы, недоступные в версии Jscript IE8, xslt также не будет отображаться в представлении совместимости.
jQuery — библиотека JavaScript, содержащая в себе готовые функции языка JavaScript, все операции jQuery выполняются из кода JavaScript.
Библиотека jQuery производит манипуляции с html-элементами, управляя их поведением и используя DOM для изменения структуры веб-страницы. При этом исходные файлы HTML и CSS не меняются, изменения вносятся лишь в отображение страницы для пользователя.
Для выбора элементов используются селекторы CSS. Выбор осуществляется с помощью функции $() . При вызове функция $() возвращает новый экземпляр объекта JQuery, который оборачивает ноль или более элементов DOM и позволяет взаимодействовать с ними различными способами.
Выполнение различных сценариев возможно только после окончания загрузки структуры документа document , когда браузер преобразует html-код страницы в дерево DOM. Управление процессом загрузки обеспечивает конструкция
JQuery(document).ready(function() { ... });
Сначала производится обертывание экземпляра document в функцию jQuery() , после применяется метод ready() , которому передается функция function() {...} , исполняемая после загрузки документа.
На практике обычно используется сокращенная форма такой записи jQuery(function() {...}); , или $(function() {...}); .
Для хранения информации при работе с библиотекой jQuery используются переменные JavaScript. В переменных могут храниться элементы. Имена переменных, предназначенных для хранения возвращаемых элементов, начинаются со знака $ , например:
$h = $(".list").parent().parent().detach();
Для хранения нескольких элементов используются массивы JavaScript:
$k = 15;
Правила работы с библиотекой jQuery 1. Как добавить jQuery на веб-страницуДобавить библиотеку jQuery на свою веб-страницу можно двумя способами:
Использовать
версию файла jQuery, размещенную на ресурсах Google
, Microsoft
или jQuery.com
.
Данный метод использует «Сеть дистрибуции контента» (CDN, content distribution network),
т.е. файл jQuery расположен на другом веб-сайте, который при запросе пользователем отправляет данный файл на его компьютер. Очевидные преимущества данного способа — снижение нагрузки на собственный веб-сервер и ускорение загрузки файла в силу разветвленности сети серверов дистрибьютора.
Чтобы воспользоваться данным способом, необходимо перейти по одной из ссылок:
После перехода на сайт ресурса вам потребуется всего лишь скопировать ссылку на jQuery-файл и добавить её на свою веб-страницу между тегами .... В результате у вас должно получиться, например,
Загрузить
последнюю версию библиотеки jQuery с официального сайта. Для этого вам необходимо перейти по адресу jQuery.com и выбрать интересующую вас версию библиотеки. Для загрузки предлагается две версии jQuery-файла — минимизированный и несжатый. Размер несжатого файла около 300 Кб, он содержит комментарии, поэтому его лучше использовать с целью разработки и отладки кода.
Минимизированная версия файла весит около 100Кб, в ней удалены все комментарии и ненужные пробелы, что ускоряет загрузку файла браузером.
Для загрузки нужно перейти по ссылке, и в открывшемся окне щелкнуть правой кнопкой мыши и выбрать «Сохранить как …». После этого поместить файл в нужную папку (обычно для этого используется папка «scripts») и добавить его на вашу страницу:
2. Правила добавления jQuery на страницу
Размещайте
ссылки на jQuery-файл внутри тега .
Размещайте
ссылки на jQuery-файл после ссылок на стили CSS, так как зачастую библиотека jQuery производит манипуляции со стилями элементов веб-страницы.
Размещайте
другие теги ... только после ссылки на файл jQuery, если данный скрипт использует библиотеку jQuery.
Создать пустой html-элемент, например, блок, можно несколькими способами:
1) с помощью краткой формы записи $("")
2) с помощью инструкции $("")
3) с помощью инструкции $("")
Все три способа рабочие, но, тем не менее, рекомендуется включать открывающие и закрывающие теги, чтобы показать, что данный элемент может содержать другие элементы.
При создании нового элемента методу $() можно передать второй параметр в виде объекта JavaScript, определяющий дополнительные атрибуты элемента:
$("",
{src: "images/flower.jpg",
title: "Rose_in_garden",
click: function() {...}
}).appendTo("body");
Таким образом создается элемент с заданными атрибутами и включается в дерево DOM.
JQuery HTML — это библиотека, предназначенная чтобы «писать меньше, а делать больше «. Это не язык программирования, а инструмент, используемый для того, чтобы упростить реализацию общих задач JavaScript .
JQuery имеет дополнительное преимущество — кроссбраузерную совместимость . Можете быть уверены, что ваш код будет интерпретироваться в любом современном браузере.
Сравнив написание простой программы «Hello, World! » с помощью JavaScript и jQuery , можно увидеть разницу между ними.
JavaScript
document.getElementById("demo").innerHTML = "Hello, World!";
JQuery
$("#demo").html("Hello, World!");
Этот короткий пример иллюстрирует, как с помощью jQuery можно получить тот же результат, что и с помощью стандартного JavaScript , но более кратко.
ЦелиДанное руководство не предполагает наличие базовых познаний в jQuery , оно охватывает следующие темы:
- Как установить jQuery в веб-проекте;
- Определение важных концепций веб-разработки, таких как API , DOM и CDN ;
- Общие селекторы, события и эффекты jQuery ;
- Примеры для проверки концепций, изученных в рамках этой статьи.
JQuery — это файл JavaScript , на который вы будете ссылаться в документе. Как подключить JQuery в HTML :
- Скачать локальную копию;
- Добавить ссылку на файл через сеть доставки контента (CDN ).
Примечание. Сеть доставки контента (CDN ) представляет собой систему из нескольких серверов, которые предоставляют пользователю веб-контент в зависимости от его географического положения. Когда вы добавляете ссылку на файл jQuery через CDN , он будет предоставлен пользователю быстрее и эффективнее, чем в случае его размещения на собственном сервере.
В наших примерах мы будем использовать ссылку на jQuery через CDN . Последнюю версию jQuery можно найти в Google . Если вместо этого вы хотите скачать библиотеку, можно получить копию jQuery на официальном сайте .
Создадим небольшой веб-проект. Он будет состоять из файла style.css , scripts.js и основного файла index.html .
Задайте основную HTML-разметку и сохраните ее в index.html .
Index.html
jQuery Demo
Index.html
jQuery Demo
Скрипт JavaScript (scripts.js ) должен подключаться в документе ниже библиотеки jQuery или он не будет работать.
Примечание. Если вы загрузили локальную копию jQuery, сохраните ее в папке js/ и подключите через ссылку js/jquery.min.js.
Библиотека jQuery добавлена в HTML , и у нас есть полный доступ к API jQuery .
Использование jQueryjQuery используется для соединения с элементами HTML в браузере через DOM .
Объектная модель документа (DOM ) — это метод, с помощью которого JavaScript (и jQuery ) взаимодействуют с HTML в браузере. Чтобы увидеть, что собой представляет DOM , в браузере кликните правой кнопкой мыши на текущей веб-странице и выберите пункт «Просмотреть код «. В результате откроется панель «Инструментов для разработчиков «. HTML-код , который вы увидите в ней, это и есть DOM .
Каждый элемент HTML считается узлом DOM — объектом, к которому может обратиться JavaScript . Эти объекты имеют древовидную структуру, в которой элемент является ближайшим к корню, а каждый — ветвью дерева. JavaScript может добавлять, удалять и изменять любые из этих элементов.
Если вы снова кликните правой кнопкой мыши и выберете пункт «Просмотреть исходный код », то увидите необработанный HTML . Сначала вы можете путаться в понятиях DOM и исходный HTML-код , но это разные вещи. Исходный код страницы точно соответствует тому, что написано в HTML-файле . Он статичен и неизменен, на него не действует JavaScript . В свою очередь DOM — динамичен и может меняться.
Внешний слой DOM , который обертывает весь узел , является объектом документа. Чтобы использовать на странице jQuery , нужно убедиться, что документ «готов ».
Создайте в папке js/ файл scripts.js и добавьте в него следующий код:
js/scripts.js
Весь код jQuery , вставленный в HTML , будет обернут в указанный выше код. Он будет работать только после того, как DOM будет готов для выполнения кода JavaScript . Даже не смотря на то, что в некоторых случаях JavaScript не загружается, пока элементы не будут отображены, включение этого блока считается лучшей практикой.
Чтобы запустить скрипт «Hello, World !» и вывести текст в браузере с помощью jQuery , сначала создадим пустой элемент абзаца, к которому применен идентификатор demo .
Index.html
... ...
JQuery вызывается и обозначается знаком доллара ($) . Мы обращаемся к DOM с помощью jQuery , используя синтаксис CSS , и применяем действие с помощью method :
$("selector").method();
Так как идентификатор в CSS обозначается символом (#) , мы получаем доступ к идентификатору demo с помощью селектора #demo . html() — метод, который изменяет HTML-разметку внутри элемента.
Теперь мы поместим программу «Hello, World! » внутрь оболочки jQuery ready() . Добавьте эту строку в существующую функцию в файле scripts.js :
js/scripts.js
$(document).ready(function() { $("#demo").html("Hello, World!"); });
После сохранения изменений можно открыть в браузере файл index.html . Если все работает правильно, то вы увидите надпись «Hello, World! »
Кликните правой кнопкой мыши по надписи «Hello, World! » и выберите пункт «Просмотреть код «. Теперь в DOM отображается
Hello, World!
. Если вы просмотрите исходный код страницы, то увидите только , исходный HTML-код, который мы написали. СелекторыСелекторы — это то, с помощью чего мы указываем jQuery HTML , с какими элементами мы хотим работать. Вы можете просмотреть полный список селекторов jQuery в официальной документации.
Чтобы получить доступ к селектору, используйте символ $ , за которым следуют круглые скобки () .
$("селектор")
Строки с двойными кавычками являются предпочтительными (согласно руководству jQuery ). Хотя часто используются и строки с одиночными кавычками.
Ниже приведен краткий обзор часто используемых селекторов.
- $(«*») — подстановочный знак : выбирает каждый элемент на странице;
- $(this) — текущий : выбирает текущий элемент, управляемый в данный момент внутри функции;
- $(«p»)
— тег
: выбирает все экземпляры тега
;
- $(«.example») — класс : выбирает все элементы, к которым применяется класс example ;
- $(«#example») — идентификатор : выбирает один экземпляр с уникальным идентификатором example ;
- $(«») — атрибут : выбирает все элементы, в атрибуте type которых задано значение text ;
- $(«p:first-of-type»)
— псевдоэлемент
: выбирает первый элемент
.
При подключении JQuery к HTML вы будете иметь дело с классами и идентификаторами. Классы используются, когда нужно выбрать несколько элементов, а идентификаторы — когда только один.
События jQueryВ примере «Hello, World! » код запускался, когда страница загружена и документ готов, поэтому в нем не требовалось вмешательство пользователя. В этом случае мы могли бы написать текст непосредственно в HTML , без jQuery . Но нужно будет использовать jQuery , если мы хотим, чтобы текст отображался на странице после клика мыши.
Вернитесь к файлу index.html и добавьте в него элемент . Мы будем использовать эту кнопку для отслеживания события клика.
index.html
... Click me
Мы используем метод click() для вызова функции, содержащей код «Hello, World! ».
js/scripts.js
$(document).ready(function() { $("#trigger").click(); });
Иидентификатор элемента — trigger , мы выбираем его с помощью $(«#trigger») . Добавив click() , мы отслеживаем событие клика. Далее мы вызываем функцию, которая содержит наш код внутри метода click() .
function() { $("#demo").html("Hello, World!"); }
Вот полный код JQuery HTML элемента.
js/scripts.js
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); }); });
Сохраните файл scripts.js и обновите в браузере index.html . Теперь, когда вы нажимаете кнопку, появляется текст «Hello, World! «.
Событие — это любое взаимодействие пользователя с браузером с помощью мыши или клавиатуры. В примере, который мы только что создали, используется событие клика. В официальной документации jQuery можно найти полный список методов событий jQuery . Ниже приведен перечень часто используемых событий.
- click() — клик : происходит при одиночном клике мыши;
- hover() — наведение курсора : происходит при наведении указателя мыши на элемент;
- submit() — отправка : происходит при отправке данных формы;
- scroll() — прокрутка : происходит при прокрутке страницы или элемента;
- keydown() — нажатие клавиши : происходит при нажатии на клавишу на клавиатуре.
Чтобы вывести элементы с помощью анимации или убрать их, когда пользователь прокручивает страницу, используется метод scroll() .
Чтобы выйти из меню с помощью клавиши ESC , используется метод keydown() . Чтобы создать выпадающее меню или с помощью JQuery добавить HTML в div , используется метод click() .
Эффекты jQueryЭффекты jQuery позволяют добавлять анимацию и образом управлять элементами на странице.
В следующем примере мы создадим всплывающее и скрывающееся окно. Мы могли бы использовать два идентификатора — один для открытия окна, а второй для его закрытия, но применим класс для открытия и закрытия окна с помощью той же функции.
Удалите существующие теги и
Из файла index.html и добавьте следующий код:
index.html
Open Close
В файле style.css мы будем использовать минимальное количество кода CSS , чтобы скрыть overlay с помощью display: none и расположить его по центру экрана.
css/style.css
Overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray; }
В файле scripts.js мы используем метод toggle() , который будет переключать значения свойства CSS display с none на block и наоборот, скрывая и выводя окно при нажатии мыши.
→ Примеры jQuery для начинающих
jQuery - javascript библиотека, состоящая из кроссбраузерных функций - оплеток для манипулирования элементами DOM (Document Object Model - Объектная модель документа). Главный ее принцип это автоматическое применение нужного механизма, в зависимости от браузера. К примеру, получение элемента html документа по ID, в разных браузерах происходит по разному. До появления jquery, я использовал такую функцию:
Function getObj(objID){ if (document.getElementById) {return document.getElementById(objID);} else if (document.all) {return document.all;} else if (document.layers) {return document.layers;} }
Чтобы это же действие совершить в jquery, достаточно сделать так:
$("#objID") или jQuery("#objID")
Обращение к функции $() равносильно jQuery() , так как первая является алиасом для второй. Если Вы не используете других библиотек, подобных jquery, то можете смело обращаться к пространству имен через $(). В противном случае лучше использовать непосредственное имя объекта - jQuery. Далее, считаем что нет других библиотек.
Начало работы с jQueryИтак, начинаем работу. Первым делом необходимо получить новейшую версию библиотеки jquery с официального сайта проекта http://jquery.com/ или скачать jquery здесь. В архиве и на официальном сайте лежат две версии: сжатая и девелоперская. На сайте лучше использовать сжатую, а если захочется поэкспериментировать воспользуйтесь второй. Первым делом подключаем библиотеку jquery в тело страницы:
После этого пространство имен javascript, определено таким образом, что обращение к функции $() занято jquery и получить любой элемент документа html в виде объекта, можно выражением $("#objID") . Где objID - ID объекта.
jQuery и CSSВ качестве первого примера рассмотрим работу jquery и CSS. Существует два основных способа манипулирования CSS с помощью jquery: изменение одного атрибута или сразу нескольких. Выполняются они через функцию css() . Выглядит в теории это примерно так:
$("#objID").css("display","block") $("#objID").css({ display:"block, margin:"10px", color:"#ffffff" })
Пример изменения одного атрибута CSSПример изменения одного атрибута удался!
Исходный код:
Пример изменения одного атрибута удался!
Пример изменения нескольких атрибутов CSSПример изменения нескольких атрибутов!
Исходный код:
function demo_css(){ $("#span2").css({ color:"#ffffff", padding:"5px", background:"#980000" }); } Пример изменения нескольких атрибутов!
Изменение текста и htmlДля изменения текста или html кода существуют функции text() и html() .
$("#objID").text("Тру ля ля") $("#objID").html("
Тру ля ля
Причем, если попытаетесь с помощью функции text() вставить html код, то получите его в исходном виде. Функция text() все экранирует.
Пример использования text()Исходный код:
function set_text(){ $("#span3").text("Спасибо!"); }
Пример использования html()Исходный код:
function set_html(){ $("#span4").html("Спасибо! Так гораздо лучше."); }
Управление атрибутами с помощью jQueryФункция attr() манипулирует любыми атрибутами элемента. С ее помощью можно добавить или изменить title, href, value, src и так далее.
Пример использования attr()Исходный код:
function plus_ten(){ var cur_value = $("#text").attr("value"); cur_value = parseInt(cur_value) + 10; $("#text").attr("value",cur_value); }
Обработчики событий в jQueryПолный список доступен по адресу http://api.jquery.com/category/events/. Приведу лишь несколько примеров. Самый распространенный обработчик события onclick. В jQuery можно перехватить через функцию click() .
Пример использования click()Исходный код:
$("#butt").click(function(){ alert("Решили проверить?"); });
Пример использования keyup()Введите что-нибудь:
Вы ввели:
Исходный код:
Введите что-нибудь:
Вы ввели:
$("#text2").keyup(function(){
if ($("#text2").val()){
$("#text2_target").css({background:"#980000"});
} else {
$("#text2_target").css({background:"#ffffff"});
}
$("#text2_target").text($("#text2").val());
});
Кликни по мне!
Исходный код:
div#log{
background:#1C93A5;
width:300px;
height:100px;
padding:10px;
color:#fff;
}
Кликни по мне!
$(document).ready(function() {
$("#log").bind("click", function(e) {
$("#coord").html("Координата X: "+ e.pageX + " Координата Y: " + e.pageY + "");
});
});
