4. Сделайте свой HTML-движок.
Вы можете использовать jQuery для создания некоторых базовых анимаций и эффектов. Ядром эффекта анимации является функция animate(), которая может изменить указанный стиль CSS в любое время. Например, вы можете изменить высоту, ширину, прозрачность или положение. Вы также можете указать скорость анимации и. вы можете использовать миллисекунды при изменении скорости (миллисекунды) или использовать заранее определенные значения скорости: медленную, нормальную или быструю.
Вот пример анимации, которая одновременно изменяет ширину и высоту элемента. нет начального значения, только конечное значение. Value. Начальное значение можно взять непосредственно из существующего элемента. В то же время я также добавил функцию обратного вызова:
$('#grow').animate({ height: 500). , width: 500 }, "slow", function() {alert('Элемент закончился!');}); Используя эти встроенные функции jQuery, вы можете легко создавать анимационные эффекты. функцию show() и функциюide() для отображения и скрытия элементов можно настроить на немедленное выполнение или с заданной скоростью. Вы также можете использовать функции FadeIn() и FadeOut() или функции SlideDown() и SlideUp(). чтобы показать или скрыть элемент, в зависимости от того, какой эффект вы хотите. Ниже приведен простой пример, демонстрирующий эффект сдвига вниз панели навигации:
$('#nav').slideDown('slow'); сценарии и обработка событий jQuery, вероятно, лучше всего управляет DOM, и обработка событий на самом деле очень проста в перемещении и управлении событиями DOM. Привязка, удаление и вызов событий также очень естественны и просты в использовании по сравнению с ручным управлением. написав эти коды, количество ошибок можно значительно уменьшить. Фактически, jQuery упрощает DOM. Различные операции можно создать и связать с другими элементами с помощью функции add(), можно скопировать элемент с помощью clone(). установить содержимое с помощью html(), вы можете удалить содержимое с помощью функции пустой(), а удалить с помощью функции () удаляются элементы и содержимое, и вы даже можете использовать функцию Wrap(), чтобы обернуть этот элемент другим элементом. Есть некоторые. функции, которые могут изменять содержимое самого объекта jQuery, проходя через DOM. Вы также можете получить siblings() элемента , Parent() или Children(). Вы также можете использовать next() и prev(). find siblings. find(), пожалуй, самая мощная из этих функций. Она позволяет использовать селектор jQuery для поиска внутри вашего объекта jQuery и его дочерних узлов. Эти функции становятся еще более мощными в сочетании с функцией end(). Функция end() действует как отмена, заставляя ваш объект jQuery вернуться к моменту, когда вы вызвали find() или родительские() или любое другое состояние перед функцией обхода. Если вы используете ссылку на метод, о которой мы упоминали выше, очень сложные функции. может быть реализовано с помощью простого кода. В листинге 7 показан пример: вы найдете форму входа и выполните некоторые операции с ее элементами. Листинг 7. Легкое перемещение и манипулирование DOM$('form#login')// скрыть все. метки внутри формы с «необязательным» class.find( 'label.optional').hide().end()// добавляют красную рамку к любым полям пароля в форме.find('input:password') .css('border', '1px сплошной красный'). end()// добавляем обработчик отправки в форму.submit(function(){return submit('Вы уверены, что хотите отправить?');}) ; Хотите верьте, хотите нет, но на самом деле в этом примере есть только одна ссылка. Строка кода с пробелами посередине. Сначала я выбрал форму входа, затем нашел внутри необязательные метки, скрыл их и затем вызвал end(. ), чтобы вернуться в форму. Я нашел поле ввода пароля и изменил границу на красную, а затем снова вызвал end(), чтобы вернуться в форму. Наконец, я добавил в эту форму функцию обработки времени отправки. Интересно то, что в дополнение к чрезвычайно лаконичному коду jQuery также сам по себе оптимизирует все операции, чтобы гарантировать, что когда все подключено правильно, вам не нужно искать элемент дважды. Обработка общих событий также очень проста, как и в случае с другими событиями. вызов функции click(), submit() или mouseover() и последующая передача ее прослушивателю событий. Функции те же самые. Кроме того, вы также можете использовать связывание('eventname', function(){}) для. укажите функцию обработки событий. Вы можете использовать unbind('eventname') для отмены привязки события или unbind() для отмены привязки всех событий. Для получения дополнительной информации об этой серии функций и о том, как их использовать, обратитесь к разделу прикладного программирования jQuery. документация по интерфейсу (API) 6. Раскрытие возможностей селекторов jQuery
Обычно вы используете ID для выбора элементов, например #myid; или используете имена классов для выбора, например div.myclass. Однако jQuery имеет довольно сложную и полную структуру. Синтаксис селектора, который позволяет использовать один селектор для поиска любой комбинации элементов.
Синтаксис селектора jQuery во многом основан на CSS3 и XPath. Чем больше вы знаете о CSS3 и XPath, тем лучше вы можете использовать jQuery. Дополнительные сведения о селекторах jQuery. , включая CSS3 и XPath, обратитесь к ссылкам на ресурсы в конце этой статьи.
CSS3 включает некоторый синтаксис, который поддерживается всеми, поэтому вы можете увидеть его не очень часто. Однако вы все равно можете использовать его для выбора элементов в jQuery. потому что jQuery имеет собственный настраиваемый механизм анализа селектора. Например, чтобы добавить тире к каждому пустому столбцу в таблице, вы можете использовать псевдооператор :empty:
$('td:empty').html('- '); Как найти каждый элемент, который не содержит определенного имени класса? CSS3 имеет специальный синтаксис для этой ситуации, используя псевдооператор :not. Следующий код скроет все элементы поля ввода текста, которые не содержат требуемого. class name. $('input:not(.required)').hide( ); Вы также можете использовать запятые для соединения нескольких селекторов, как в CSS. Следующий код скроет различные типы элементов списка на странице. в то же время $('ul, ol, dl' ).hide();XPath — мощный инструмент для поиска элементов в документе. Он несколько отличается от CSS и позволяет находить многие вещи, которые невозможно найти с помощью CSS. Например, вы хотите добавить границу, вы можете сделать это: $("input:checkbox/..").css('border', '1px Solid #777'); jQuery также имеет несколько дополнительных селекторов, которые не встречаются, например, в CSS и XPath. Чтобы повысить читабельность таблицы, вы можете установить для нечетных и четных строк разные имена классов. Это называется зебра-барами. Сделать это с помощью jQuery проще простого. благодаря селектору :odd. Вот код, демонстрирующий использование полосатого класса для изменения цвета фона строк с нечетными номерами в таблице: $('table.striped > tr:odd').css('background', ' #999999'); Видите ли, мощные селекторы jQuery могут упростить ваш код. Независимо от того, на какой элемент вы хотите повлиять, независимо от того, насколько он четкий или размытый, вы всегда можете найти способ выбрать его с помощью простого селектора jQuery 7. Расширение jQuery с помощью плагинов. В отличие от другого программного обеспечения, вы можете написать плагин jQuery, который ни в коем случае не является болезненным испытанием с кучей сложных API. На самом деле, написание плагина для jQuery настолько просто, что вы, возможно, захотите. напишите плагин позже, чтобы сделать ваш код более кратким. Вот основная часть плагина, который вы собираетесь написать: $.fn.donothing = function(){return this;}; , это требует небольшого объяснения. Во-первых, вам нужно добавить функцию к каждому объекту jQuery. Вы должны назначить ее $.fn. Во-вторых, функция должна возвращать это (объект jQuery), чтобы гарантировать, что она не нарушит цепочку методов. правила, упомянутые выше. Вы можете легко расширить приведенный выше код. Чтобы изменить цвет фона плагина вместо использования css('background'), вы можете сделать это: $.fn.background = function(bg). {return this.css('background', bg);}; Обратите внимание, что я могу напрямую вернуть функцию css(), поскольку она сама по себе уже является объектом jQuey, поэтому при использовании цепочки методов я рекомендую использовать плагин jQuery. обнаружите, что вы постоянно повторяете код. Например, когда вы используете функциюeach( ) для обработки одного и того же, вы можете рассмотреть возможность использования плагина [Аннотация: не очень понятно.]. очень просты в разработке, для вас доступны тысячи плагинов. jQuery имеет плагины для таблиц, закругленных углов, слайд-шоу, всплывающих подсказок, выбора даты и практически любого приложения, которое вы можете найти. Полный список плагинов в списке ресурсов в конце этой статьи. Самый сложный и широко используемый плагин — это интерфейс, плагин анимации, который обрабатывает эффекты сортировки, перетаскивания, различные сложные специальные эффекты и другое. интересные и сложные эффекты пользовательского интерфейса. Интерфейс для jQuery — то же самое, что Scriptaculous для прототипа. Не менее популярным и полезным плагином является плагин Form, позволяющий просто отправлять форму в фоновом режиме с помощью ajax. такая ситуация: когда вам нужно перехватить событие отправки формы, затем найти все различные поля вывода текста и использовать их для создания вызова ajax. 8. jQuery После этого я просто рассказал о некоторых поверхностных вещах о jQuery. интересно использовать, потому что новые функции и новые методы, которые вы изучаете, кажутся очень естественными и логичными. Как только вы начнете использовать jQuery, вы поймете, что это может упростить вашу работу по разработке Javascript и Ajax: каждый раз, когда вы что-то изучаете, код становится проще. После
изучения jQuery я нашел массу удовольствия от программирования на Javascript, и все скучные вещи хорошо справляются, поэтому мне просто нужно сосредоточиться на основной части. После использования jQuery я с трудом могу вспомнить, когда в последний раз использовал for. цикл, я даже боюсь использовать другие библиотеки Javascript. jQuery полностью изменил мой взгляд на программирование на Javascript.