Ru jquery: Русская документация по API jQuery

jQuery

jQuery — программная библиотека, упрощающая работу JavaScript с объектной моделью веб-документов.

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

С 2004 года мы успели поработать с очень разными платформами и технологиями. И первые 9 лет мы занимались  разработкой проектов только на PHP. Это дало нам много опыта и хорошее понимание внутреннего устройства многих технологий и платформ.

В 2013 году мы приняли решение обновить наш технологический стек для разработки новых проектов. Цель была достаточно простая — нам нужны были технологии, которые были бы более перспективными с точки зрения возможностей и качества разработки. И эта цель была достигнута благодаря переходу на Ruby on Rails.

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

Узнать больше →

Мы по-прежнему работаем со многими технологиями и платформами, которые больше не используем для создания новых проектов. В основном, это проекты из экосистемы языка программирования PHP.

Тематические технологии:

Cтатьи по теме:

Все технологии фронтенд-разработки: язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript

04.03.2014  |  Статьи  —  фронтенд-разработка  /  CSS  /  HTML  /  JavaScript  /  веб-разработка

Содержание и внешний вид каждой страницы сайта определяется HTML-кодом и содержанием таблицы стилей CSS, а поведение интерфейса — скриптами JavaScript.

Увеличиваем скорость работы сайта при помощи оптимизации JavaScript

10.03.2014  |  Статьи  —  фронтенд-разработка  /  быстродействие  /  JavaScript  /  веб-разработка

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

Чек-лист проверки фронтенда

25.03.2014  |  Статьи  —  фронтенд-разработка  /  CSS  /  HTML  /  JavaScript  /  веб-разработка

По данному списку можно проверить фронтенд сайта или веб-приложения для выявления и последующего исправления ошибок или недочётов.

Ajax-навигация Turboliks & Wiselinks

01.04.2014  |  Статьи  —  фронтенд-разработка  /  быстродействие  /  JavaScript  /  веб-разработка

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

History API и HASH-навигация на Ajax-сайтах

02.04.2014  |  Статьи  —  фронтенд-разработка  /  JavaScript  /  веб-разработка

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

Ленивая загрузка или загрузка по требованию на клиентской части

05.04.2014  |  Статьи  —  фронтенд-разработка  /  быстродействие  /  JavaScript  /  веб-разработка

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

Валидность и семантичность HTML

04.03.2014  |  Статьи  —  фронтенд-разработка  /  HTML  /  веб-разработка

Валидность и семантичность HTML кода определяет качество сайта с точки зрения поисковых систем.

JavaScript, jQuery, and JSON | Coursera

Об этом курсе

Недавно просмотрено: 23 318

In this course, we’ll look at the JavaScript language, and how it supports the Object-Oriented pattern, with a focus on the unique aspect of how JavaScript approaches OO. We’ll explore a brief introduction to the jQuery library, which is widely used to do in-browser manipulation of the Document Object Model (DOM) and event handling. You’ll also learn more about JavaScript Object Notation (JSON), which is commonly used as a syntax to exchange data between code running on the server (i.e. in PHP) and code running in the browser (JavaScript/jQuery).

It is assumed that learners have already taken the Building Web Applications and Building Database Applications in PHP courses in this specialization.

Гибкие сроки

Гибкие сроки

Назначьте сроки сдачи в соответствии со своим графиком.

Сертификат, ссылками на который можно делиться с другими людьми

Сертификат, ссылками на который можно делиться с другими людьми

Получите сертификат по завершении

100% онлайн

100% онлайн

Начните сейчас и учитесь по собственному графику.

Специализация

Курс 4 из 4 в программе

Специализация Web Applications for Everybody

Средний уровень

Средний уровень

Часов на завершение

Прибл. 26 часов на выполнение

Доступные языки

Английский

Субтитры: Арабский, Французский, Португальский (Европа), Итальянский, Вьетнамский, Немецкий, Русский, Английский, Испанский

Будет ли вашей компании выгодно обучить сотрудников востребованным навыкам?

Попробуйте Coursera для бизнеса

Приобретаемые навыки

• Hypertext Preprocessor (PHP)
• Jquery
• JavaScript

Гибкие сроки

Гибкие сроки

Назначьте сроки сдачи в соответствии со своим графиком.

Сертификат, ссылками на который можно делиться с другими людьми

Сертификат, ссылками на который можно делиться с другими людьми

Получите сертификат по завершении

100% онлайн

100% онлайн

Начните сейчас и учитесь по собственному графику.

Специализация

Курс 4 из 4 в программе

Специализация Web Applications for Everybody

Средний уровень

Средний уровень

Часов на завершение

Прибл. 26 часов на выполнение

Доступные языки

Английский

Субтитры: Арабский, Французский, Португальский (Европа), Итальянский, Вьетнамский, Немецкий, Русский, Английский, Испанский

Будет ли вашей компании выгодно обучить сотрудников востребованным навыкам?

Попробуйте Coursera для бизнеса

Преподаватели

Charles Russell Severance

Clinical Professor

School of Information

3 704 749 учащихся

48 курсов

от партнера

Мичиганский университет

The mission of the University of Michigan is to serve the people of Michigan and the world through preeminence in creating, communicating, preserving and applying knowledge, art, and academic values, and in developing leaders and citizens who will challenge the present and enrich the future.

Рецензии

4.6

Filled StarFilled StarFilled StarFilled StarHalf Filled Star

Рецензии: 162

• 5 stars

  78,52 %

• 4 stars

  13,84 %

• 3 stars

  2,32 %

• 2 stars

  1,94 %

• 1 star

  3,36 %

Лучшие отзывы о курсе JAVASCRIPT, JQUERY, AND JSON

Filled StarFilled StarFilled StarFilled StarStar

от партнера Mh28 июня 2020 г.

Very difficult one, must complete the previous courses in the specialization to make the most of this

Filled StarFilled StarFilled StarFilled StarFilled Star

от партнера AF15 сент. 2020 г.

An awesome course to learn JS, JQuery, and JSON!! I learned a lot and found it very useful for me!!

Filled StarFilled StarFilled StarFilled StarFilled Star

от партнера GK31 дек. 2020 г.

I am very glad taking this opportunity and find something useful well explained in this course.

Filled StarFilled StarFilled StarFilled StarFilled Star

от партнера CC1 июня 2021 г.

Wonderful course. I really learnt how to request json from jquery and display on the web page. but the assignment mainly focused on quering data from various tables like many to many and all.

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

Специализация Web Applications for Everybody: общие сведения

This Specialization is an introduction to building web applications for anybody who already has a basic understanding of responsive web design with JavaScript, HTML, and CSS. Web Applications for Everybody is your introduction to web application development. You will develop web and database applications in PHP, using SQL for database creation, as well as functionality in JavaScript, jQuery, and JSON.

Over the course of this Specialization, you will create several web apps to add to your developer portfolio. This Specialization (and its prerequisites) will prepare you, even if you have little to no experience in programming or technology, for entry level web developer jobs in PHP. You’ll demonstrate basic concepts, like database design, while working on assignments that require the development of increasing challenging web apps. From installing a text editor to understanding how a web browser interacts with a web server to handling events with JQuery, you’ll gain a complete introductory overview of web application development.

Часто задаваемые вопросы

Остались вопросы? Посетите Центр поддержки учащихся.

Обучайте сотрудников и добивайтесь отличных результатов в бизнесе

Откройте для себя Coursera для бизнеса

Использовать асинхронное ожидание с jQuery и ajax

Если вы используете его, возможно, вы не используете запрос ajax с jQuery. Es algo que está en todas partes, en miles y miles de proyectos.

Нет, он venido a criticar jQuery, де hecho, me parece una librería super útil, que ahorra tiempo y a la que por alguna razón le he cogido cariño.

async/await имеет новую характеристику. Fue añadida en la especificación ES2017 hase 4 años más o menos y ahora está disponible de forma nativa en la mayoría de los navegadores modernos. Нет необходимости в использовании фактического кода JavaScript.

Si quieres soportar navegadores más antiguos (o el viejo IE), tendrás que usar un transpilador como Babel para que funcione en navegadores antiguos.

En la época de ajax 🧓

Antes teníamos este tipo de funciones para consumir datos mediante Ajax

 
 Функция myajax () {
 
 $. ', 
 
 данные: { 
 
 материал: 'здесь', 
 
 }, 
 
 успех: функция (данные) { 
 
 // las locas resuestas de las peticiones anidadas van aquí 
 
 var response = data 
 
}, 
 
 Ошибка: функция (JQXHR, TextStatus, ErrsThrown) {
 
 // Vacio Casi Siempre 😆 
 
}, 
 
 // Vacio Casi Siempre. }) 
 
 возврат ответа 
 
 } 
 

Синхронный код vs кодовый код:

• Синхронный номер :

  Estás en una cola para conseguir una entrada de Cine. Нет puedes conseguirla hasta Que todos los que están delante de ti la consigan, y lo mismo ocurre con las personas que hacen cola detrás de ti.

• Асинкроно :

  Estás en un restaurante con manyas otras personas. Pides tu comida. Otras personas también pueden pedir su comida, no tienen que esperar a que tu comida esté cocinada y servida para poder pedir. En la cocina, los trabajadores del restaurante están continuamente cocinando, sirviendo y tomando pedidos. La gente tendra su comida servida tan pronto como esté cocinada.

Можно ли использовать async/await с jQuery? 🤹

Передний код, пример async/await с ajax podría ser:

 
 async function myAjax(param) { 
 
 const result = await $.ajax, 9000ur 900({ 
 
 const result = await $.ajax, 9000ur 900 
 
 тип: 'POST', 
 
 данные: param, 
 
 }) 
 
 результат возврата 
 
 } 
 

Y es en el return donde devolvemos el resultsado de la petición sies no hubiera error. Para capturar los errores podemos hacer lo siguiente:

 
 Async Function MyAjax (PARAM) {
 
 Результат LET 
 
 TRY {
 
 Результат = await $ .ajax ({
 
 URL: Ajaxurl, 
 
 Тип: 'post', 
 
 Данные: Param, 
 
 }) 
 
 возвращаемый результат 
 
 } catch (ошибка) { 
 
 console.error(ошибка) 
 
 } 
 
 } 
 

ok fácil ¿no? ¿Cómo consumimos está función maravillosa? 😎 Así:

 
 // En otra parte del código, dentro de una función asíncrona 
 
 const data = await myAjax() 
 

Другая серия операций использования:

 
 myAjax().then((data) => { 
 
 console.info('Response:', data) 
 
 }) 
 

Las promesas no son una mala opción, y pueden parecer más limpias o ser más fácil trabajar con ellas, depende del contexto.

Espero que te haya gustado este artículo. ❤️

Манипулятор атрибутов элементов в jQuery

Jusqu’à присутствует, мы манипулируем элементами HTML и читаем содержимое в jQuery. Nous allons également pouvoir manipuler leurs attributs et notamment ajouter ou supprimer un attribut.

 

Восстановление значения атрибута или определение атрибута

При использовании метода attr() для восстановления значения атрибута, добавление значения атрибута или модификатор существования .

Pour récupérer la valeur d’un attribut, nous allons utiliser attr() en lui passant le nom de l’attribut dont on souhaite récupérer la valeur en arguments. Cette méthode va alors agir comme un getter et retourner la valeur de l’attribut du Premier élément de la notre sélection unique.

Pour mettre à jour la valeur d’un attribut ou pour définir un nouvel attribute, nous allons passer l’attribut en question en first arguments de

attr() et sa (nouvelle) valeur associée en второй аргумент. Si l’attribut existsait déjà, sa valeur sera mise à jour. Si il n’existait pas, il sera ajouté à chaque élément de notre sélection.

См. Pen
Cours jQuery 2.6.1 от Пьера (@pierregiraud)
на CodePen.

 

Метод prop() и свойства DOM

Метод prop() va nous permettre de récupérer de valeur d’une propriété du premier élément de notre sélection ou d’ajouter une propriété ou de modifier la valeur d’une proprieté dejà existsante pour chaque ‘un election .

Pour que vous compreniez l’interet de cette method, il convient de bien définir la différence entre un attribut et une proprieté en HTML.

Un attribute sert à Fournir des Informationsupplémentaires par rapport à un élément et à son comportement. Un attribut est toujours défini dans notre fichier HTML de départ.

Информационный документ HTML, который является платным в системе навигации, является последним средством создания DOM, который представляет собой нотр-физический интерфейс отправления. На этом этапе, в Javascript, нотр-фишер HTML va être vu sous la forme de noeuds ou «узел» qui sont des objets. Les атрибуты sont alors представляют sous form de propriétés de nos noeuds éléments.

На основе двух представлений, которые сосуществуют: нотр-фишьер HTML с элементами и атрибутами коте, и le DOM с этими элементами и свойствами. Ces deux представляет собой существующие временные мемы.

Идея состоит из модификатора, который можно использовать в DOM, и модификатора Donc для различных объектов и значений свойств celui-ci sans forcement modifier la valeur des attributs de notre fichier HTML.

Prenons l’example de deux case à cocher pour bien comprendre:

См. Pen
Cours jQuery 2.6.2 от Пьера (@pierregiraud)
на CodePen.

Выбрано определение W3C, атрибут проверено est un attribute booleen, ce qui signifie qu’il n’a que deux etats associés возможных: истина (корпус коше) и ложь (декоше).

Этот атрибут упоминается в данном HTML-коде, и это означает, что значение имеет значение, соответствующее значению (и мему, который относится к значению значения), в соответствии со значением разрешения в DOM с определением à

true . Cela означает, что que la valeur de la Propriété associée va être true .

При наличии двух различных значений для атрибута проверено определено в соответствии с HTML и свойствами проверил партнеров.

Imaginons maintenant qu’un Visiteur décoche les case à cocher.

Значение атрибутов проверено не изменено. En revanche, la valeur des propriétés проверено associée va être modifiee : celle-ci va devenir false .

Cela est dû au fait qu’une case à cocher est un élément «dynamique» c’est-à-dire un élément avec lequel l’utilisateur va pouvoir interagir.

Pour tous ces éléments dynamiques, vous pouvez donc considérer que la valeur de l’attribut HTML va être celle définie initialement dans le fichier HTML tandis que la valeur de la propriété associée va pouvoir être modifiee dynamiquement.

La Propriété prop() va donc aller récupérer dans le DOM la dernière valeur connue de cette proprieté.

Bien souvent, en jQuery, nous voudrons récupérer la dernière valeur connue d’une proprieté plutôt que la valeur de l’attribut HTML car cela a beaucoup plus d’intérêt au sens où ça nous permet de réagir dynamiquement par rapportantau contenument де ла страница.

Notez bien une nouvelle fois qu’il ne va y avoir de différence entre la valeur de l’attribut et celle de la propriété que pour некоторым элементам HTML. En effet, dans la plupart des cas, les valeurs des propriétés vont être toujours égales aux valeurs des attributs . De plus, в определенных случаях, les valeurs des attributs vont être liées или «сопоставленные» aux valeurs des propriétés, ce qui signifie que si on change la valeur d’une proprieté, la valeur de l’attribut sera également mise à jour.

 

Добавление атрибута или собственность

Добавление атрибута, если вы используете метод

removeAttr() в качестве аргумента имени атрибута, который используется для подтверждения.

Фасон мема, использующий removeProp() для добавления свойства выбора элементов.

См. Pen
Cours jQuery 2.6.3 от Пьера (@pierregiraud)
на CodePen.

 

Recupérer ou mettre à jour la valeur courante d’Elements

La méthode val() va nous permettre de récupérer ou mettre à jour la valeur courante d’elements. Этот метод является основным, использующим элементы формулы.

В уведомлении об использовании средства для восстановления стоимости (ле «содержание») d’un champ de texte input ou textarea ou encore la valeur liée à une case cochée ou à une option d’une liste

выберите выбор.

Notez que dans le cas où plusieurs options ont été choisies (ce qui estвозможный si on passe un attribut несколько на элемент выберите попарно), val() ренверра и таблица с различными значениями.

Depuis la version 3 de jQuery, si aucune option n’est sélectionnée, val() null était retournée).

Il va être particulièrement intéressant d’utiliser la method val() dans le cadre de la gestion d’evénements. Nous etudierons la gestion d’evénements en jQuery dans la prochaine party, mais en voici déjà un aperçu:

См. Pen
Cours jQuery 2.6.4 от Пьера (@pierregiraud)

на CodePen.

Ici, concrètement, les méthodes jQuery keyup() et change() nous permettent de gérer les événements de même nom.

Dès qu’un utilisateur relâche une touche («keyup»), la valeur du champ #prenom va être récupérée et affichée.

De meme, dès qu’un change de valeur est détectée pour notre élément select , on récupère le tableau renvoyé par val() и использовать функцию JavaScript join() для добавления различных элементов таблицы.

 

Методы постоянной спецификации манипулятора для атрибутов класса

Finalement, jQuery встретился с другим расположением серии методов, которые позволяют использовать спецификацию манипулятора для атрибутов класса .

Метод hasClass() va nous permettre de déterminer si au moins l’un des éléments d’une sélection possède un some attribute

класс ou pas. On va devoir passer le nom de la classe qu'on recherche en arguments de cette méthode. Elle renverra true si la classe est trouvée false dans le cas contraire.

Метод addClass() nous permet d’ajouter ou plusieurs class à une sélection d’elements. На прохожих классов à ajouter en аргумент.

Метод removeClass() , или, наоборот, имеет один и тот же параметр, добавляющий все классы к выбранному элементу. Si on use cette méthode sans arguments, toutes les class des éléments de la sélection seront supprimées. Si on précise une ou plusieurs class en arguments, alors seules ces classs seront supprimées.

Завершение, метод toggleClass() va nous permettre d’ajouter une ou plusieurs class à chaque élément d’une selectionsi ces éléments ne possèdent pass ces classs ou au contraire de supprimer ces classs si les s oss les possements. «Toggle» означает «basculer» или «alterner» на французском языке.

См. Pen
Cours jQuery 2.6.5 от Пьера (@pierregiraud)
на CodePen.

Пример использования метода jQuery click() qui nous permet de gérer l’evénement de même nom.

Lors du clic sur le premier bouton, si notre troisième parane ne possède pas de classe bleu , on en ajoute une et on change la couleur des textes des éléments possédant cette classe.

Lors du clic sur le deuxième bouton, on ajoute les class cacher et afficher au div si il n'en possède pas ou on les supprime si il les possède.