Содержание

что это за библиотека JavaScript

jQuery — библиотека для языка программирования JavaScript, набор инструментов для веб-разработки. С ее помощью разработчик обращается к разным элементам интернет-страницы и управляет ее содержимым. Так можно изменять страницу в зависимости от настроек и действий пользователя.

Логотип jQuery

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

Библиотека кроссплатформенная и кроссбраузерная. Это значит, что ей можно пользоваться в любых операционных системах, а написанный на ней код поддерживают любые браузеры. Исключение для новых версий составляют старые браузеры вроде Internet Explorer 6, но ими сейчас практически не пользуются.

jQuery имеет лицензию MIT, она бесплатная и открытая. Существуют и другие проекты: jQuery UI и jQuery Mobile. Их можно считать дополнительными расширениями для основной библиотеки, они предназначены для сложных интерфейсов и для мобильной разработки. Название читается как «джейквери».

Для чего нужна jQuery

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

jQuery используется:

  • для быстрой связи JavaScript с HTML-элементами.
  • работы с селекторами CSS.
  • навигации по DOM-дереву: обхода, поиска элементов, их изменения.
  • работы с событиями на странице и реакциями на них.
  • реализации AJAX — подхода, при котором страница фоново обменивается данными с сервером.
  • создания анимации и визуальных эффектов на веб-странице.

Актуальность jQuery в 2022 году

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

Но jQuery была актуальной много лет начиная с момента появления, и на ней написано много проектов, которые поддерживаются до сих пор. Поэтому начинающему веб-разработчику стоит иметь представление о библиотеке. Скорее всего, он рано или поздно столкнется с кодом на jQuery, особенно если будет работать в проектах с долгой историей.

А вот в новых проектах обычно пользуются другими инструментами. Они актуальнее и современнее.

Как работает jQuery

Принцип библиотеки — JavaScript отделяется от HTML-разметки. Сейчас эта идея применяется в веб-разработке повсеместно. Скрипты должны одинаково работать в разных браузерах, и их должно быть легко масштабировать, а при слишком сильной связи с элементами это сложно.

Поэтому jQuery не встраивается в разметку напрямую — вместо этого она ищет нужный элемент по селектору и управляет им после нахождения. Сейчас так можно сделать и в «чистом» JavaScript, но в старых версиях языка это была непростая задача.

Еще одна идея библиотеки — расширяемость. Она состоит из компактного ядра, в котором собраны самые важные для веб-разработки возможности, и дополнительных плагинов. Если разработчику понадобится работать с какой-то специфической задачей, он может скачать плагин для этой задачи. Такое разделение нужно, чтобы не перегружать основное ядро: если оно будет слишком большим, это негативно скажется на скорости загрузки сайта.

Что можно делать с помощью jQuery

Искать элементы. HTML-элементы — это кнопки, блоки текста, ссылки, картинки и остальное содержимое веб-страницы. Их можно искать с помощью селекторов — обращений по типу, классу, имени и другим свойствам. Например, если у элемента есть класс page-header, то селектор по классу page-header найдет его.

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

Это называется возможностью проходить по DOM-дереву — представлению страницы в виде древовидной схемы. jQuery может легко найти любую «ветку» или узел этой схемы.

С jQuery удобно искать «ветки» или узлы схемы

Изменять элементы. Простой поиск элементов сам по себе ничего не дает. Он нужен, чтобы изменять найденные сущности. Например, заменить информацию в блоке или сделать невидимой неактуальную подсказку — это можно сделать с помощью jQuery. Это только примеры, возможных изменений куда больше. Но суть одинакова: страница становится динамичной и меняется в зависимости от обстоятельств.

Реагировать на события. Манипуляции с элементами обычно происходят не просто так, а если случится какое-то событие. Например, нажатие кнопки или переход по ссылке, прокручивание колесика мыши, нахождение на странице 10 секунд и дольше. Событий в языке огромное количество, и jQuery умеет их обрабатывать.

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

Фоново подгружать контент. В jQuery реализована удобная и простая работа с AJAX. Мы уже упоминали его выше. Это технология фоновой загрузки данных: человек просматривает страницу, и по необходимости на ней подгружается нужная информация. При этом страница не перезагружается, данные не пропадают, и пользователю не приходится ждать. Загрузка происходит очень быстро. Пример — автоматическая подгрузка товаров при пролистывании каталога интернет-магазина. Так сайты становятся более «отзывчивыми» и удобными, и jQuery в этом помогает.

Создавать эффекты и анимацию. В годы появления jQuery в «чистом» языке не было возможности с легкостью создавать нужные эффекты. Иногда для анимации использовали тяжеловесный Flash, который медленно грузился. jQuery сделала визуализацию и анимацию легче. С ней можно «научить» элемент правильно реагировать на определенные события: изменять внешний вид или проигрывать какую-нибудь анимацию. Эффекты в ней призваны показать пользователю, что происходит на экране.

Преимущества jQuery

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

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

Компактность. В сжатом виде jQuery весит 30 Кб, это не так много. А код на ней компактный и короткий, поэтому быстро пишется.

Распространенность. На jQuery написано огромное количество проектов разных лет. Это в том числе CMS, системы для быстрого создания сайтов — на них работает большинство веб-ресурсов.

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

Благодаря этому подходу jQuery небольшая, легкая и быстрая.

Недостатки jQuery

Большое количество legacy-кода. Большинство проектов на jQuery сейчас — это старый код. Его сложнее поддерживать, есть много решений, которые уже не используются, считаются неоптимальными или неактуальными. Документация по такому коду может быть хуже, чем по современному, а писавшие его программисты обычно уже не помнят, что в нем происходило.

Избыточность. Когда библиотека только появилась, JavaScript умел меньше, чем сейчас. jQuery помогала выполнять действия, с которыми не мог справиться нативный язык. Но с тех пор JavaScript сильно изменился, стал более функциональным и гибким. Поэтому сейчас многие возможности jQuery избыточны — то же самое можно выполнить с помощью нативного языка или других фреймворков вроде React или Vue.

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

Снижение производительности. Страницы, написанные с jQuery, могут дольше грузиться, а сам код — работать несколько медленнее, чем при использовании нативных возможностей языка. Это не всегда критично, но это стоит учитывать в ситуациях, когда без jQuery можно легко обойтись.

Как начать работать с jQuery

Библиотеку можно скачать с официального сайта, с помощью CDN или из репозитория на GitHub. Она существует в двух версиях: полная и облегченная (slim). В полной версии есть поддержка AJAX и некоторые дополнительные эффекты. Это нужно не для всех сайтов, поэтому для многих проектов достаточно облегченной версии.

Каждая из версий есть в двух вариантах. Один из них — для разработки: там приведен полный код библиотеки, понятный для чтения человеком. Второй — для продакшна: это так называемый минимизированный файл с припиской min в названии. В нем убраны пробелы, переносы строк, комментарии и табуляция, а имена переменных сокращены и сжаты. Функциональность у кода та же самая, но читать его очень сложно. Он нужен не для чтения, а для выкладывания проекта. Минимизированный файл меньше весит и быстрее грузится, поэтому используется для выпущенных в продакшн версий.

Библиотеку можно скачать через браузер, а можно установить с помощью пакетных менеджеров npm или yarn. Она выглядит как файл с расширением .js: его разработчик помещает в папку проекта и просто подключает к своему коду.

После этого можно пользоваться всеми возможностями jQuery.

Knockout — делаем проще программирование с Javascript

| Вторник, 19 февраля, 2013

Метки: Javascript, Knockout

Knockout – это Javascript библиотека, реализующая шаблон Model-View-View Model (MVVM), которая помогает создавать сложные, интерактивные интерфейсы со связанной моделью данных.

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

Основные характеристики библиотеки
  • Четкое отслеживание зависимостей – автоматическое обновление нужных элементов интерфейса при любом изменении значений переменных в модели.
  • Декларативное связывание – простой и понятный способ связывания элементов интерфейса и моделью данных. Создавать сложные динамические интерфейсы можно произвольно связывая представление с моделью. Модель может иметь несколько уровней вложенности.
  • Простая расширяемость – возможность реализации собственных способов связывания элементов интерфейса c моделью и повторное использование этих реализаций.
Дополнительные возможности
  • Библиотека написана на чистом Javascript, то есть работает с любым сервером или любой клиентской технологией.
  • Может быть добавлена в уже созданное веб приложение без каких либо архитектурных изменений.
  • Библиотека по размеру очень компактна, примерно 13 килобайт после применения gzip сжатия.
  • Работает на всех популярных браузерах (IE 6+, Firefox 2+, Chrome, Safari и другие)
  • Полный набор спецификаций. Библиотека разработана в BDD стиле (behavior-driven development), а это значит, что проверка правильного функционирования на новых браузерах и платформах проходит быстро и просто.

Разработчики, которые знакомы с Ruby on Rails, ASP.NET MVC или другими MV*-технологиями, могут представлять себе паттерн MVVM как MVC в реальном времени c декларативным синтаксисом. И считать библиотеку Knockout основным инструментом создания интерфейса для редактирования данных JSON.

Быстрому освоению библиотеки Knockout помогают интерактивные руководства на офици альном сайте knockoutjs.com. После получения базовых понятий можно ознакомится с примерами на том же сайте, и затем применять библиотеку в своих проектах.

Knockout конкурент для jQuery, Prototype и т.п. или помощник?

Библиотека jQuery отличная замена неуклюжему и плохо совместимому DOM API. Она хорошо справляется с манипулированием элементов и обработкой событий на веб-странице. Но Knockout решает другие задачи.

Как только интерфейс страницы становится нетривиальным и его поведение достаточно сложным, поддержка и дальнейшая разработка с jQuery становится довольно трудным и тяжелым занятием. Например, вы отображаете список элементов с указанием количества этих элементов и хотите, чтобы кнопка «Добавить» была доступна только, когда элементов в списке меньше пяти. jQuery не может работать с моделью данных, поэтому чтобы получить количество элементов в списке нужно посчитать количество элементов TR в таблице или количество DIV с определенным классом CSS . Или количество уже выведено в каком нибудь элементе SPAN, и нужно обновить его значение после добавления нового элемента. Необходимо также не забыть заблокировать кнопку «Добавить» как только количество TR стало пять.

И дополнительно вас попросили добавить кнопку «Удалить», и нужно найти место для нее и определить необходимое поведение.

Как Knockout решит данную задачу?

Это будет намного проще. Представим элементы как Javascript массив. И используем связывание foreach для преобразования массива в таблицу или набор элементов DIV. Как только массив изменится, сразу же произойдут изменения на веб-странице. Не нужно думать, о том, как вставить новый элемент TR или DIV и куда его вставить. Интерфейс синхронизируется с моделью. Дополнительно, можно вывести количество элементов и связать с моделью:

Количество элементов: <span data-bind="text: myItems().count"></span>

И это все! Не нужно писать код обновления элементов интерфейса, они обновятся сами, как только изменится массив MyItems. Похожим образом блокируем и разблокируем кнопку «Добавить»:

<button data-bind="enable: myItems().count < 5">Add</button>

Для реализации кнопки «Удалить», делаем изменения в модели и добавляем ее на страницу.

Итак, Knockout не конкурирует с jQuery и с подобными библиотеками. Он добавляет более удобный высокоуровневый способ связывания модели и интерфейса. В то же время Knockout может использовать jQuery, например для анимаций, Ajax-запросов и других полезных вещей.

Никто еще не оставил здесь комментарий.

Популярные метки
  • ASP.NET MVC (17)
  • Windows Azure (15)
  • Javascript (12)
  • AngularJS (8)
  • ASP.NET Web API (8)
  • инвестирование (8)
  • Работа (6)
  • SimpleMembership (5)
  • Angular (4)
  • акции (4)
  • Visual Studio (3)
  • Razor (3)
  • TypeScript (3)
  • SEO (3)
  • Version Control (3)
  • Knockout (3)
  • Безопасность (2)
  • jQuery (2)
  • Entity Framework (2)
  • Git (2)
Все метки В контакте
Читают сейчас
  • Windows Azure: Использование облачных хранилищ необлачными приложениями
  • Защищаем публикации сайта от копирования
  • Высокопроизводительные приложения с параллельными вычислениями в Windows Azure
  • Что такое SignalR?
  • Начало работы с ASP.
    NET 5 и Visual Studio 2013 RC

элементов суммы jQuery? — Сообщество Power Platform

Полезные ресурсы

Объявления

Объявление | Суперпользователи — 2023 Сезон 1

Суперпользователи — 2023 Сезон 1 Мы рады начать программу Power Users Super User Program на 2023 год — сезон 1.  Суперпользователи Power Platform проделали потрясающую работу, чтобы сообщества Power Platform были полезными, точными и отзывчивыми. Мы хотели бы послать этим замечательным людям большое СПАСИБО за их усилия. Суперпользователь, сезон 1 | Взносы 1 июля 2022 г. — 31 декабря 2022 г. Суперпользователь, сезон 2 | Взносы 1 января 2023 г. — 30 июня 2023 г. Интересно, что такое суперпользователь? Суперпользователи — особенно активные участники сообщества, которые стремятся помочь другим с их вопросами сообщества. В году бывает 2 сезона суперпользователей, и мы отслеживаем сообщество на наличие новых потенциальных суперпользователей в конце каждого сезона.

Суперпользователи узнаются в сообществе как по имени и значку рядом с их именем пользователя, так и по сезонному значку в их профиле. Мощные приложения Мощная автоматизация Мощные виртуальные агенты Страницы силы Псторк1* Псторк1* Псторк1* ОливерРодригес BCBuizer Экспискорновус* Экспискорновус* рагаванраджан Ахмед Салих Грандженкинс renatoromao Мира_Гали* Мира_Гали* Сандип_Малик* Сандип_Малик* SudeepGhatakNZ* SudeepGhatakNZ* СтретчФредрик* СтретчФредрик* 365-Помощь* 365-Помощь* ча_ча экарим2020 тимл Хардеш25 iAm_ManCat Аннаджхавери СебС успокаивающий Лоренс М абм РобРаш Анкеш_49 WiZey бендлин Ногейра1306 Кайф_Сиддик victorcp РобЭллиотт дпоггеманн срдувал SBax Фернандес Роверандом Швибах Аксер КрейгСтюарт Могучий рейнджер МайклЭннис подкишки Давид_МА Эрик Ренье Эдгонсалес змансури ГеоргиосГ Крис Пясецкий руле AmDev фчопо фиппс0218 tom_riha теапурва таколота Акаш27 мамло БКЛС776 Шувам-рпа рампракаш Скотт Ширер Раск Кристиан Абата чаннон Коэн5 а33ик Хартхольм АаронНокс окекс Матрен Давид_МА Alex_10 Джефф_Торп мощностьактивировать Рамоле Диана Биркельбах Дэвид Зун AJ_Z ПриянкаГитик БрайанС СталинПоннусамы ХамидБи УНТ Anonymous_Hippo Анхов Кейт Атертон алаабитар Толу_Виктор КРидер Сперри1625 IPC_ahaas Зуург rubin_boer   cwebb365   Dorrinda   G1124   Gabibalaban   Manan-Malhotra   jcfDaniel   WarrenBelz   Waegemma   drrickryp   GuidoPreite   metsshan Если в конце имени пользователя стоит *, это означает, что он является мульти-суперпользователем более чем в одном сообществе.
Обратите внимание, что это не окончательный список, так как мы ожидаем принятия нескольких заявок. После их получения список будет обновлен.

Оцените новый опыт работы с сообществами Power Platform!

Мы рады поделиться с вами впечатлениями от Power Platform Communities Front Door! Передняя дверь объединяет содержимое всех сообществ Power Platform в единое место, где члены нашего сообщества, клиенты и энтузиасты low-code и no-code могут учиться, делиться и взаимодействовать с коллегами, сторонниками, менеджерами программ сообщества и членами нашей команды по продукту. На передней дверце сообществ Power Platform теперь доступно множество функций и новых возможностей, чтобы сделать контент более доступным для всех пользователей сообщества мощных продуктов, в том числе ФорумыГруппы пользователейСобытияОбзоры сообществаСообщество по номерамСсылки на все сообщества Пользователи могут просматривать самые популярные обсуждения во всех сообществах Power Platform и легко переходить к последним или популярным сообщениям для дальнейшего взаимодействия. Кроме того, они также могут фильтровать отдельные продукты. Пользователи могут фильтровать и просматривать события групп пользователей из всех продуктов Power Platform с тем же функционалом, что и существующие группы пользователей сообщества, а также с дополнительными возможностями фильтрации. Теперь пользователи могут просматривать группы пользователей на целевой странице Power Platform Front Door с возможностью просмотра всех продуктов Power Platform. Откройте для себя переднюю дверь сообществ Power Platform уже сегодня. Посетите входную дверь сообщества Power Platform, чтобы легко перейти к различным сообществам продуктов, просмотреть сводку групп пользователей, событий и форумов.

Конференция Microsoft Power Platform | Регистрация открыта | 3-5 октября 2023

Мы очень рады видеть вас на конференции Microsoft Power Platform в Лас-Вегасе 3-5 октября 2023 года! Но сначала давайте вспомним некоторые забавные моменты и лучшее сообщество в области технологий с MPPC 2022 в Орландо, Флорида. Приглашенные докладчики, такие как Чарльз Ламанна, Хизер Кук, Джули Штраус, Нирав Шах, Райан Каннингем, Сангья Сингх, Стивен Сицилиано, Хьюго Бернье и многие другие. Зарегистрируйтесь сегодня: https://www.powerplatformconf.com/

Добро пожаловать! Поздравляем с присоединением к сообществу Power Pages!

Добро пожаловать в сообщество Power Pages! Теперь вы являетесь частью активной группы коллег и отраслевых экспертов, которые здесь, чтобы общаться, делиться знаниями и даже немного развлекаться. Теперь, когда вы являетесь участником, вы можете пользоваться следующими ресурсами: Форумы сообщества Power Pages Форумы также являются отличным местом для общения с другими участниками сообщества Power Pages. Посетите раздел Новости и объявления , чтобы узнать об основных моментах сообщества, узнать о последних новостях сообщества и узнать о команде сообщества. Делитесь своими отзывами, зарабатывайте специальные значки профиля, участвуйте в испытаниях, чтобы выиграть призы, и т.  д. Блог сообщества Члены нашего сообщества усвоили несколько отличных советов и получили четкое представление о будущем бизнес-анализа. Зайдите в блог сообщества, чтобы прочитать последние сообщения со всего мира. Дайте нам знать, если вы хотите стать автором и внести свой собственный вклад — приветствуются все желающие. И это еще не все, у нас есть галереи с дополнительной информацией, такой как связи с сообществом, видеоролики с практическими рекомендациями, вебинары, видеогалерея и многое другое, чтобы мотивировать, обучать и вдохновлять вас. Еще раз, добро пожаловать в семью сообщества Power Pages, мы очень рады, что вы присоединились к нам! Независимо от того, являетесь ли вы новичком в мире данных или опытным ветераном, наша цель — сформировать сообщество, к которому вы будете обращаться за поддержкой, общением, обучением, вдохновением и поддержкой, пока мы вместе наслаждаемся этим приключением! Дайте нам знать на форуме сообщества отзывов , если у вас есть какие-либо вопросы или комментарии о вашем опыте работы с сообществом, а пока – отправляйтесь на форумы Получить справку по Power Pages и погрузиться прямо в них! Чтобы узнать больше о сообществе и своей учетной записи, обязательно посетите нашу Зону поддержки сообщества. Мы с нетерпением ждем встречи с вами в сообществе Power Pages! Команда сообщества Power Pages

Лучшие авторы решений

Пользователь Считать
3
1

Просмотреть все

Самые популярные авторы

Пользователь Считать
2
2
1
1
1

Просмотреть все

Пользователей онлайн (3557)

Эквивалент селекторов jQuery в чистом Javascript

Собственный Javascript имеет большое значение в веб-анимации

В обычных повседневных задачах вы можете обойтись без jQuery. Но веб-анимации — они очень ориентированы на производительность. Разработчик, который делает анимацию гладкой, проделал действительно тяжелую работу. Чем сложнее становится анимация, тем больше ей требуется кода, ориентированного на производительность. Встроенный Javascript определенно повышает производительность анимации.

В вашем приложении вы можете писать AJAX, проверки форм и все такое в jQuery. А вот часть кода, связанная с анимацией — рекомендуется использовать чистый Javascript.

В этом посте обсуждаются селекторы — как можно выбирать элементы на чистом Javascript.

Функции, основанные на селекторах CSS
  • document.querySelectorAll : этот метод возвращает все элементы в документе, соответствующие указанному селектору CSS. Возвращается массив, подобный коллекции, и каждый элемент в нем является элементом HTML DOM (div, кнопка, диапазон и т. д.). Поскольку это массив, вы можете перебрать его, используя цикл for.
  • document.querySelector : этот метод возвращает первый элемент, соответствующий указанному селектору CSS. Он возвращает только один элемент HTML.

Как и jQuery, эти функции принимают селектор в качестве параметра и возвращают соответствующие элементы. Разница в том, что эти функции ожидают допустимые селекторы CSS, тогда как jQuery имеет некоторые дополнительные настраиваемые селекторы, также (например, :selected не является допустимым селектором CSS, но работает с jQuery).

Просмотрите справочник по селекторам CSS, чтобы понять разницу между селекторами jQuery и селекторами CSS. Они почти одинаковы.

  • Выбор по идентификатору :

     
     
     // jQuery
$("#элемент")
 
     // Чистый JS: выбор по идентификатору вернет только один элемент
// Поэтому мы используем document.querySelector (вместо document.querySelectorAll)
document.querySelector("#элемент")

  • Выбор по классу :

     
    Раунд 1
     
     // jQuery
$(".круглый")
 
     // Чистый JS: выбор по классу может вернуть много элементов
// Поэтому мы используем document. querySelectorAll (вместо document.querySelector)
document.querySelectorAll(".round")
// document.querySelectorAll(".round")[0] относится к первому элементу
// document.querySelectorAll(".round")[1] ссылается на второй элемент
// и так далее

  • Выбор по комбинации идентификатора и класса :

     <дел>

    Внутренний
    

 // jQuery
$("#элемент .внутренний")
 
 // Чистый JS
document.querySelectorAll("#элемент .inner")
// Перебираем совпавшие элементы по свойству «длина» возвращаемой коллекции элементов
for(var i=0; i
  •   Выбор по атрибутам данных  :
     
    Раунд 1
    

    Раунд 2
    
 
     // jQuery
$(".round[индекс_данных='1']")
 
     // Чистый JS
document.querySelectorAll(".round[data-index='1']")
 
  •   Выбор по отключенному атрибуту  :
     <тип ввода = "текст" отключен />
<тип ввода = "текст" />
 
     // jQuery
$(". текстовое поле:отключено")
 
     // Чистый JS
document.querySelectorAll(".textbox:disabled")
 
  •   Выбор по выбранному атрибуту  :
     <выберите автозаполнение = "выкл">



 
     // jQuery
$("#опция выпадающего списка:выбрано")
 
     // Чистый JS [CSS предоставляет селектор :checked, аналогичный :selected в jQuery]
document.querySelectorAll("#выпадающий вариант: отмечен")
 
    •  Функции на основе идентификатора, класса и тэга 
    •  document.getElementById : этот метод возвращает элемент, соответствующий атрибуту id. Возвращается только один элемент.
       <дел> 
       // jQuery
$("#элемент")
 
       // Чистый JS
document.getElementById("элемент")
 
    •  document.getElementsByClassName : этот метод возвращает коллекцию всех элементов документа, соответствующих имени класса.
       
      Раунд 1
       
       // jQuery
$(". круглый")
 
       // Чистый JS
document.getElementsByClassName ("круглый")
// document.getElementsByClassName("round")[0] относится к первому элементу
// document.getElementsByClassName("round")[1] ссылается на второй элемент
// и так далее
 
    •  document.getElementsByTagName : этот метод возвращает коллекцию всех элементов документа, соответствующих имени тега.
       
      Абзац
       
       // jQuery
$("р")
 
       // Чистый JS
document.getElementsByTagName("p")
 
     Обратите внимание, что в этих функциях # и . не используются.
     Примечание по производительности 
     У вас может возникнуть соблазн использовать функции селектора запросов вместо использования функции по идентификатору, имени тега и классу. Однако функции, использующие идентификатор, тэг и класс, работают намного быстрее, чем функции querySelector. Это понятно, потому что браузерам должно быть проще искать напрямую, чем ходить по моде. Говорят, что getElementById работает как минимум в 10-30 раз быстрее, чем querySelector.
    No related posts.