Введение в jQuery. Уроки Почему везде JQuery имеют знаки доллара? Иерархические селекторы в jQuery

jquery уроки (6)

Я работаю над проектом с довольно большим количеством JQuery. В JQuery есть много значков в любом месте, например

$(document).ready(function () { $("input").wl_File({ url: "/Admin/PolicyInventory/UploadDocuments", onFileError: function (error, fileobj) { $.msg("file is not allowed: " + fileobj.name, { header: error.msg + " Error ", live: 10000 }); } }); ...

Мой вопрос: что означает этот знак доллара? Почему он используется повсюду и как его понять и интерпретировать? Это напоминает мне о страшных днях, когда я изучал Схему в университете, и мне приходилось класть скобки везде, не зная, почему я это делаю.

$ sign является псевдонимом для jQuery . Краткая версия jQuery , меньше механизма записи.

Только для примера: (в jQuery это сложнее)

Var yourFunction = function() { alert("a function"); } window.Myf = yourFunction;

Теперь вы можете позвонить yourFunction как:

Myf(); // definitely a short syntax

Знак доллара - это просто псевдоним для JQuery.

JQuery(document).ready(function(){});

$(document).ready(function(){});

Жесткость и производительность

Когда мы работаем над библиотекой или языком программирования, мы должны обратить внимание на некоторые правила записи. Благодаря jQuery они уже реализовали множество опций. Вы можете использовать $ или вы можете использовать jQuery или можете использовать _

(function (_) { _("#wow").click() })(jQuery);

Или, может быть, вы можете делать фантастические изменения, javascript-идентификаторы являются unicode, поэтому вы можете использовать Ω

(function (Ω) { Ω("#wow").click() })(jQuery);

Но основная идея этого, нажимая один раз на клавиатуру, лучше, чем набирать jQuery

С другой стороны у нас есть производительность... Я просто случайно открыл свой проект и искал $ , я использовал 54 $ в одном файле javascript.

jQuery - 6 байт.

Разница огромная 54 * 5 = 220 байт.

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

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 .

Использование jQuery

jQuery используется для соединения с элементами 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 позволяют добавлять анимацию и образом управлять элементами на странице.

Keypress() — устанавливает обработчик ввода символа с клавиатуры, либо, запускает это событие.

Метод имеет три варианта использования.

Keypress(handler)

eventData — объект содержащий данные, для передачи в обработчик. Должны быть представлены в формате {fName1:value1, fName2:value2, …};
handler — функция, которая будет установлена в качестве обработчика.

Keypress ()

Вызывает событие keypress , у выбранных элементов страницы.

Примечание: поскольку событие keypress не покрывается какой-либо официальной спецификацией, фактическое поведение, возникающее при его использовании, может различаться в разных браузерах, версиях браузеров и платформах.

В первых двух вариантах, этот метод является сокращенной версией.on("keypress", handler) , а в третьем — .

Событие keypress отправляется элементу, когда пользователь нажимает клавишу на клавиатуре. Это похоже на событие , за исключением того, что модификаторы и непечатаемые клавиши, такие как Shift , Esc и Delete , запускают события смены ключа, но не события keypress . Другие различия между этими двумя событиями могут возникать в зависимости от платформы и браузера.

Событие keypress может быть прикреплено к любому элементу, но сработает только на тех элементах, которые имеют фокус. Список элементов, которые могут получить фокус, варьируются в зависимости от браузера, поэтому надежнее всего будет привязать это событие к элементам формы, так как они всегда могут получить фокус.

Для примера рассмотрим html:

Обработчик события может быть привязан к полю ввода:

$("#target").keypress(function() { alert("Вызвано событие.keypress()"); });

$ ("#target" ) . keypress (function () {

alert ("Вызвано событие.keypress()" ) ;

} ) ;

При нажатии клавиши в поле ввода мы увидим сообщение «Вызвано событие.keypress()».

Чтобы инициировать событие вручную, примените.keypress() без аргумента:

$("#other").click(function() { $("#target").keypress(); });

$ ("#other" ) . click (function () {

$ ("#target" ) . keypress () ;

} ) ;

При клике мышью в область с id="other" будет вызвано событие и мы также увидим сообщение.

Если необходимо установить обработчик нажатия клавиши в любом месте страницы (например, для реализации глобальных сочетаний клавиш), то лучше всего прикрепить это поведение к объекту документа. Событие нажатия клавиши «всплывает» по DOM, если не будет явно остановлено.

Код нажатой клавиши

В примере выше для того, чтобы узнать какая именно клавиша клавиатуры была нажата, мы можем посмотреть значение переменной eventObject.which , которая содержит код нажатой клавиши. В то время как браузеры используют разные свойства для хранения этой информации, jQuery нормализует свойство.which чтобы вы могли надежно использовать его для извлечения кода символа.

Обратите внимание, что методы keydown и keyup определяют нажатую клавишу, а keypress указывает, какой символ был введен. Таким образом,при вводе латинской «a» переменная eventObject.which внутри обработчиков события keydown или keyup будет содержать значение 65, а внутри обработчика keypress — 97. В верхнем регистре «А» сообщается как 65 по всем событиям. Из-за этого различия, обработка специальных нажатий клавиш, таких как клавиши со стрелками, keydown или keyup — лучший выбор.

Дополнительные замечания

Поскольку метод.keypress() является сокращенной версией.on("keypress", handler) , он может быть удален с помощью.off("keypress").

Селекторы jQuery используются для выбора необходимого элемента на странице.

Команды jQuery

Код jQuery как и код JavaScript состоит из последовательно идущих команд . Команды являются основной структурной единицей jQuery.

Стандартный синтаксис jQuery команд :

$(селектор).метод();

Знак $ сообщает, что символы идущие после него являются jQuery кодом;

Селектор позволяет выбрать элемент на странице;

Метод задает действие, которое необходимо совершить над выбранным элементом. Методы в jQuery разделяются на следующие группы:

Методы для манипулирования DOM;
Методы для оформления элементов;
Методы для создания AJAX запросов;
Методы для создания эффектов;
Методы для привязки обработчиков событий.

Символ $

jQuery можно комбинировать с обычным JavaScript.

Если строка начинается с $ - это jQuery, если $ вначале строки отсутствует - это строка JavaScript кода.

Function start() { //Скроем абзац с id="hid" с помощью jQuery $("p#hid").hide(); //Изменим содержимое абзаца с id="change" document.getElementById("change").innerHTML="Данное содержимое было изменено с помощью JavaScript."; }

Некоторые JavaScript библиотеки тоже используют $ для обозначения своего кода. Для того, чтобы избежать конфликта имен между ними в jQuery предусмотрена команда noConflict() . С помощью команды noConflict() Вы можете заменить знак $ на любой другой.

Синтаксис:

Var произвольное_имя=jQuery.noConflict();

//Изменим стандартный символ $ на nsign var nsign=jQuery.noConflict(); //Изменим цвет абзаца используя nsign вместо $ nsign(document).ready(function(){ nsign("p").css("color","green"); });

Быстрый просмотр

Селекторы jQuery

С помощью селекторов Вы можете выбирать элементы на странице для применения к ним определенных действий.

Ниже располагается таблица с различными примерами использования селекторов для выбора желаемых элементов:

Пример Результат

$("p")	Будут выбраны все элементы p, которые находятся на странице.
$(".par")	Будут выбраны все элементы на странице с class="par".
$("#par")	Будет выбран первый элемент на странице с id="par".
	Позволяет выбрать текущий HTML элемент. Щелкните на $(this) слева, чтобы посмотреть пример использования данного селектора в онлайн редакторе.
$("p.par")	Будут выбраны все элементы p на странице с class="par".
$("p#par")	Будут выбраны все элементы p на странице с id="par".
$(".par,.header,#heat")	Будут выбраны все элементы на странице со значениями атрибутов class="par", class="header" и id="heat".
$("")	Будут выбраны все элементы на странице, имеющие атрибут src.
$("")	Будут выбраны все элементы со значениям атрибута src="значение".
$("")	Будут выбраны все элементы со значениями атрибута src заканчивающимися на.gif.
$("div#wrap .par1")	Будут выбраны все элементы с class=par1, которые находятся внутри элементов div с id=wrap.
$(":input")	Будут выбраны все input элементы на странице.
$(":тип")	Будут выбраны все input элементы с . Например:button выберет все элементы, :text выберет все элементы и т.д.

$(document).ready(function(){ //Установим размер шрифта всех абзацев равным 20 пикселям $("p").css("fontSize","20px"); //Изменим на зеленый цвет шрифта элемента с id=el2 $("#el2").css("color","green"); //Изменим на красный цвет шрифта элемента с class=el3 $(".el3").css("color","red"); //Сделаем жирным шрифт элементов с id=el2 и class=el3 $("#el2,.el3").css("fontWeight","bold"); //Изменим на синий цвет текста кнопки $(":input").css("color","blue"); //Установим размер шрифта всех элементов имеющих атрибут href равным 20 пикселям $("").css("fontSize","20px"); //Изменим на зеленый цвет ссылки на www..сайт/"]").css("color","green"); });

Быстрый просмотр

Полный список селекторов jQuery Вы можете найти в нашем .

Предотвращение преждевременного выполнения кода

Из учебника по JavaScript Вы наверно помните, что выполнение кода до полной загрузки документа часто приводит к ошибкам.

Дело в том, что скрипт может обратится к еще не загруженному содержимому, а это всегда приводит к ошибкам или неожиданным результатам.

Для того, чтобы избежать этого мы часто помещали код в функцию, которая начинала выполнение только после полной загрузки документа.

Предотвращение преждевременного выполнения кода в JavaScript:

function start() { Код который будет выполнен после полной загрузки документа }

В jQuery можно избавиться от преждевременного выполнения кода следующими способами:

Предотвращение преждевременного выполнения кода в jQuery:

//Первый способ: $(document).ready(function(){ Код который будет выполнен после полной загрузки документа }); //Второй способ: $().ready(function(){ Код который будет выполнен после полной загрузки документа }); //Третий способ: $(function(){ Код который будет выполнен после полной загрузки документа });

Существует еще один альтернативный способ также помогающий избежать преждевременное выполнение JavaScript и jQuery кода и позволяющий также ускорить загрузку страниц (благодарим за напоминание о нем пользователя Ghringo Americano ).

Необходимо помещать код в самый конец тела документа (т.е. перед ) в данном случае интерпретатор JavaScript встроенный в браузер начнет разбирать код только после загрузки документа. В предыдущем же способе загрузка скриптов происходит одновременно с загрузкой документа, а выполняется этот код после загрузки документа.

Содержимое тела документа

Содержимое тела документа Код который будет выполнен после полной загрузки документа

Цепочки команд в jQuery

Для того, чтобы сократить размер кода Вы можете соединять команды jQuery в цепочки.

Команды в цепочке будут выполняться поочередно слева направо.

//Код без сокращения $("p").css("color","green"); $("p").css("font-size","30px"); //Сокращенный код $("p").css("color","green").css("font-size","30px");

Сделайте сами

Задание 1 измените цвет и размер шрифта, перечисленных ниже элементов, для того, чтобы выделить буквы кодового слова.

Измените цвет и размер шрифта:

Элемента с id=meadow;
Элемента с class=rainbow;
Элемента с id=future находящегося внутри элемента с id=fut; (данный элемент необходимо выделить цветом отличным от красного);
Элемента имеющего атрибут set;
Элемента с атрибутом last=code.

Обратите внимание: для изменения цвета текста элемента используйте метод: css("color","новый_цвет_текста"), для изменения размера шрифта используйте метод: css("font-size","размер_шрифта_px").

Я использую функцию автозаполнения jQuery на моем норвежском сайте. При вводе норвежских символов æ, ø и å функция автозаполнения предлагает слова с соответствующим символом, но не слова, начинающиеся с соответствующего символа. Похоже, мне нужно, чтобы символ кодировал норвежских символов посреди слов, но не символы, начинающиеся с него.

Я использую PHP-скрипт с моей собственной функцией для кодирования норвежских символов в UTF-8 и создания списка автозаполнения.

Это действительно расстраивает!

$q = strtolower($_REQUEST["q"]); if (!$q) return; function rewrite($string){ $to = array("%E6","%F8","%E5","%F6","%EB","%E4","%C6","%D8","%C5","%C4","%D6","%CB", "%FC", "+", " "); $from = array("æ", "ø", "å", "ä", "ö", "ë", "æ", "ø", "å", "ä", "ö", "ë", "-", "-"); $string = str_replace($from, $to, $string); return $string; }

$items – массив, содержащий подсказки-слова.

Foreach ($items as $key=>$value) { if (strpos(strtolower(rewrite($key)), $q) !== false) { echo utf8_encode($key)."\n"; } }

$(document).ready(function(){ $("#autocomplete").autocomplete("/search_words. ", { position: "after", selectFirst: false, minChars: 3, width: 240, cacheLength: 100, delay: 0 }) });

Ошибка (я думаю):

Strtolower() не будет Strtolower() строчные символы.
Таким образом, вы не конвертируете специальные символы в функцию повторной записи (Ä Æ Ø Å и т. Д.),

если я правильно понял код, запрос для Øygarden (обратите внимание на капитал Ø) оставил бы первый символ в его исходной форме Ø , но вы запрашиваете форму urlencode () d, которая должна быть %C3%98

Вы должны использовать mb_convert_case() определяющий UTF-8 как кодировку.

Дайте мне знать, разрешит ли это это.

Ваш код может быть заменен на 100% с использованием стандартных функций PHP, которые могут обрабатывать все символы Unicode вместо тех, которые вы указали, тем самым менее подвержены ошибкам. Я думаю, что функциональность вашей пользовательской функции rewrite() может быть заменена на

urldecode ()
iconv ()

вы получили бы правильные кодированные UTF-8 данные, которые вам больше не нужны utf8_encode() . Можно было бы получить более чистый подход таким образом, который работает для всех персонажей. Также может случиться так, что он уже сортирует любую ошибку (если ошибка в вашем коде).

Я использую аналогичную конфигурацию, но с датскими персонажами (æ, ø и å), и у меня нет проблем с любыми символами. Вы уверены, что кодируете все символы правильно?

Мой ответ содержит | список значений. Все значения кодируются в кодировке UTF-8 (так они хранятся в базе данных), и я задал тип содержимого text / plain; charset = utf-8, используя функцию заголовка php. Последний бит для этого не нужен.

Фрэнк

Спасибо за все ответы и помощь. Я, конечно, узнал некоторые новые вещи о PHP и кодировании 🙂

Но решение, которое сработало для меня, было следующим:

Я узнал, что функция автозаполнения jQuery фактически кодирует UTF-8 и строчный специальный символ перед отправкой его в функцию PHP. Поэтому, когда я выписываю массивы предлагаемого контента, я использовал функцию rewrite() для кодирования специальных символов. Поэтому в моей функции сравнения мне нужно было только опустить все.

Теперь он отлично работает!

У меня была схожая проблема. решение в моем случае было функцией urldecode () php, чтобы преобразовать строку обратно в исходную, а затем отправить запрос в db.