Содержание

jQuery методы DOM | jQuery справочник

МетодОписание
.addClass()Добавляет один или несколько имен классов для выбранных элементов.
.after()Вставляет указанное содержимое, переданное в параметре метода после каждого выбранного элемента.
.append()Вставляет содержимое, указанное в параметре метода в конец каждого выбранного элемента в наборе совпавших элементов.
.appendTo()Вставляет содержимое в конец каждого целевого элемента в наборе совпавших элементов.
.attr()Получает значение атрибута для первого элемента в наборе совпавших элементов, или устанавливает один или несколько атрибутов для набора выбранных элементов.
.before()Вставляет указанное содержимое, переданное в параметре метода перед каждыми выбранным элементом.
.clone()Создает копию выбранных элементов, включая дочерние узлы, текст и атрибуты.
.css()Задает или возвращает одно или несколько свойств стиля для выбранных элементов.
.detach()Удаляет выбранные элементы из дерева DOM (сохраняет данные и события).
.empty()Удаляет все дочерние узлы и содержимое у выбранных элементов.
.hasClass()Определяет существуют ли искомые элементы с указанным именем класса, или классов.
.height()Получает текущее вычисленное значение высоты для первого элемента в наборе совпавших элементов, или устанавливает высоту каждого соответствующего элемента.
.html()Задает содержимое выбранных элементов, или возвращает значение первого элемента в наборе.
.innerHeight()Получает текущее вычисленное значение внутренней высоты (включая внутренние отступы — padding, но не границы — border) для первого элемента в наборе совпавших элементов, или устанавливает внутреннюю высоту каждого соответствующего элемента.
.innerWidth()Получает текущее вычисленное значение внутренней ширины (включая внутренние отступы — padding, но не границы — border) для первого элемента в наборе совпавших элементов, или устанавливает внутреннюю ширину каждого соответствующего элемента.
.insertAfter()Вставляет указанное содержимое после каждого целевого элемента, переданного в параметре метода.
.insertBefore()Вставляет указанное содержимое перед каждым целевым элементом, переданным в параметре метода.
$.cssHooksОбъект, который позволяет добавлять новые свойства, используемые в CSS, которые изначально не поддерживаются теми, или иными браузерами.
$.cssNumberОбъект, содержащий все свойства CSS, которые могут быть использованы без единиц измерения. Метод .css() использует этот объект с целью проверки возможности добавления единиц измерения
px (пиксели) к значению.
$. escapeSelector()Экранирует любой символ, который имеет особое значение в CSS селекторе. Этот метод используется в случаях, когда имя класса, или id содержит символы, которые имеют особое значение в CSS (например, такие как точка, или точка с запятой).
$.htmlPrefilter()Метод производит изменение и фильтр HTML строк, которые прошли через методы манипуляции с jQuery.
.offset()Задает или возвращает значение координат для выбранных элементов (относительно документа).
.outerHeight()Получает текущее вычисленное значение внешней высоты (включая внутренние отступы — padding, границы — border и при необходимости внешние отступы — margin) для первого элемента в наборе совпавших элементов, или устанавливает внешнюю высоту каждого соответствующего элемента.
.outerWidth()Получает текущее вычисленное значение внешней ширины (включая внутренние отступы — padding, границы — border и при необходимости внешние отступы — margin) для первого элемента в наборе совпавших элементов, или устанавливает внешнюю ширину каждого соответствующего элемента.
.position()Возвращает позицию первого совпадающего элемента (относительно родительского позиционированного элемента).
.prepend()Вставляет содержимое, указанное в параметре метода в начало каждого выбранного элемента в наборе совпавших элементов.
.prependTo()Вставляет содержимое в начало каждого целевого элемента в наборе совпавших элементов.
.prop()Задает, или возвращает значения свойств выбранных элементов.
.remove()Удаляет выбранные элементы из дерева DOM (не сохраняет данные и события).
.removeAttr()Удаляет один или несколько атрибутов у выбранных элементов.
.removeClass()Удаляет один класс или несколько классов у каждого выбранного элемента.
.removeProp()Позволяет удалить у выбранного элемента, или элементов интересующее свойство.
.replaceAll()Позволяет заменить каждый целевой элемент набором соответствующих элементов
. replaceWith()Заменяет выбранные элементы новым содержимым.
.scrollLeft()Возвращает горизонтальную позицию прокрутки первого совпавшего элемента в наборе, или устанавливает горизонтальную позицию прокрутки всем выбранным элементам в наборе.
.scrollTop()Возвращает вертикальную позицию прокрутки первого совпавшего элемента в наборе, или устанавливает вертикальную позицию прокрутки всем выбранным элементам в наборе.
.text()Задает или возвращает текстовое содержимое выбранных элементов.
.toggleClass()Добавляет или удаляет один, или несколько классов каждому выбранному элементу.
.unwrap()Удаляет у выбранных элементов родительский элемент из дерева DOM, при этом вложенные элементы остаются на своем месте.
.val()Получает текущее значение атрибута из первого элемента в наборе совпавших элементов, или устанавливает значение атрибута для каждого соответствующего элемента (применяется к элементам формы).
.width()Получает текущее вычисленное значение ширины для первого элемента в наборе совпавших элементов, или устанавливает ширину каждого соответствующего элемента.
.wrap()Обертывает каждый совпавший элемент, или элементы в наборе, выбранными HTML элементами.
.wrapAll()Обертывает все элементы (элемент) в наборе, выбранным HTML элементом.
.wrapInner()Обертывает содержимое каждого HTML элемента, или элементов выбранными элементами.

Справочник jQuery

« Назад

jQuery Tutorial
jQuery HOME
jQuery Intro
jQuery Install
jQuery Syntax
jQuery Selectors
jQuery Events

jQuery Effects
jQuery Hide/Show
jQuery Fade
jQuery Slide
jQuery Animate
jQuery stop()
jQuery Callback
jQuery Chaining

jQuery HTML
jQuery Get
jQuery Set
jQuery Add
jQuery Remove
jQuery CSS Classes
jQuery css()
jQuery Dimensions

jQuery Traversing
jQuery Traversing
jQuery Ancestors
jQuery Descendants
jQuery Siblings
jQuery Filtering

Справочник jQuery

w3schools.

com
jQuery Selectors

$(«p»).hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.

$(«#test»).hide()
Demonstrates the jQuery hide() method, hiding the element with.

$(«.test»).hide()
Demonstrates the jQuery hide() method, hiding all elements with.

$(this).hide()
Demonstrates the jQuery hide() method, hiding the current HTML element.

Examples explained

jQuery Events

jQuery click()
Demonstrates the jQuery click() event.

jQuery dblclick()
Demonstrates the jQuery dblclick() event.

jQuery mouseenter()
Demonstrates the jQuery mouseenter() event.

jQuery mouseleave()
Demonstrates the jQuery mouseleave() event.

jQuery mousedown()
Demonstrates the jQuery mousedown() event.

jQuery mouseup()
Demonstrates the jQuery mouseup() event.

jQuery hover()
Demonstrates the jQuery hover() event.

jQuery focus() and blur()
Demonstrates the jQuery focus() and blur() events.

Examples explained

jQuery Hide/Show

jQuery hide()
Demonstrates the jQuery hide() method.

jQuery hide() and show()
Demonstrates jQuery hide() and show() methods.

jQuery toggle()
jQuery toggle() toggles between hide() and show().

jQuery hide()
Another hide demonstration. How to hide parts of text.

Examples explained

jQuery Fade

jQuery fadeIn()
Demonstrates the jQuery fadeIn() method.

jQuery fadeOut()
Demonstrates the jQuery fadeOut() method.

jQuery fadeToggle()
Demonstrates the jQuery fadeToggle() method.

jQuery fadeTo()
Demonstrates the jQuery fadeTo() method.

Examples explained

jQuery Slide

jQuery slideDown()
Demonstrates the jQuery slideDown() method.

jQuery slideUp()
Demonstrates the jQuery slideUp() method.

jQuery slideToggle()
Demonstrates the jQuery slideToggle() method.

Examples explained

jQuery Animate

jQuery animate()
Demonstrates a aimple use of the jQuery animate() method.

jQuery animate() — manipulate multiple CSS properties
Demonstrates that you can manipulate multiple CSS properties with the jQuery animate() method.

jQuery animate() — using relative values
Demonstrates that you can use relative values in the jQuery animate() method.

jQuery animate() — using pre-defined values
Demonstrates that you can use the pre-defined values «hide», «show», «toggle» in the jQuery animate() method.

jQuery animate()
Demonstrates more using the jQuery animate() method (several animate() calls after each other).

jQuery animate()
Demonstrates more using the jQuery animate() method (several animate() calls after each other).

Examples explained

jQuery Stop Animations

jQuery stop() sliding
Demonstrates the jQuery stop() method.

jQuery stop() animation (with parameters)
Demonstrates the jQuery stop() method.

Examples explained

jQuery HTML Get Content and Attributes

jQuery text() and html() — Get content
Get content with the jQuery text() and html() methods.

jQuery val() — Get content
Get the value of a form field with the jQuery val() method.

jQuery attr() — Get attribute value
Get the value of an attribute with the jQuery attr() method.

Examples explained

jQuery HTML Set Content and Attributes

jQuery text(), html(), and val() — Set content
Set content with the jQuery text(), html() and val() methods.

jQuery text() and html() — Set content with a callback function
Set content + using a callback function inside text() and html().

jQuery attr() — Set attribute value
Set attribute value with the jQuery attr() method.

jQuery attr() — Set multiple attribute values
Set multiple attribute values with the jQuery attr() method.

jQuery attr() — Set attribute value with a callback function
Set attribute value + using a callback function inside attr().

Examples explained

jQuery HTML Add Elements/Content

jQuery append()
Insert content at the end of the selected HTML elements.

jQuery prepend()
Insert content at the beginning of the selected HTML elements.

jQuery append() — Insert several new elements
Create new elements with text/HTML, jQuery, and JavaScript/DOM. Then append the new elements to the text.

jQuery after() and before()
Insert content after and before the selected HTML elements.

jQuery after() — Insert several new elements
Create new elements with text/HTML, jQuery, and JavaScript/DOM. Then insert the new elements after the selected element.

Examples explained

jQuery HTML Remove Elements/Content

jQuery remove()
Remove the selected element(s).

jQuery empty()
Remove all child elements of the selected element(s).

jQuery remove() — with a parameter
Filter the elements to be removed

Examples explained

jQuery Get and Set CSS Classes

jQuery addClass()
Add class attributes to different elements.

jQuery addClass() — Multiple classes
Specify multiple classes within the addClass() method.

jQuery removeClass()
Remove a specific class attribute from different elements.

jQuery toggleClass()
Toggle between adding/removing classes from the selected elements.

Examples explained

jQuery css() Method

jQuery css() — return CSS property
Return the value of a specified CSS property from the FIRST matched element.

jQuery css() — set CSS property
Set a specified CSS property for ALL matched elements.

jQuery css() — set CSS properties
Set multiple CSS properties for ALL matched elements.

Examples explained

jQuery Dimensions

jQuery — return width() and height()
Return the width and height of a specified element.

jQuery — return innerWidth() and innerHeight()
Return the inner-width/height of a specified element.

jQuery — return outerWidth() and outerHeight()
Return the outer-width/height of a specified element.

jQuery — return outerWidth(true) and outerHeight(true)

Return the outer-width/height (including margins) of a specified element.

jQuery — return width() and height() of document and window
Return the width and height of the document (the HTML document) and window (the browser viewport).

jQuery — set width() and height()
Sets the width and height of a specified element.

Examples explained

jQuery AJAX load() Method

jQuery load()
Load the content of a file into a <div> element.

jQuery load()
Load the content of a specific element inside a file, into a <div> element.

jQuery load() — with callback
Use of the jQuery load() method with a callback function.

Examples explained

jQuery AJAX get() and post() Methods

jQuery get()
Use the $.get() method to retrieve data from a file on the server.

jQuery post()
Use the $.post() method to send some data along with the request.

Examples explained

« Назад

jQuery AJAX
jQuery AJAX Intro
jQuery Load
jQuery Get/Post

jQuery Misc
jQuery noConflict()

jQuery Examples
jQuery Examples
jQuery Quiz
jQuery Certificate

jQuery References
jQuery Selectors
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing
jQuery AJAX
jQuery Misc
jQuery Properties

Шпаргалка по 10 лучшим jQuery

Популярные чит-листы jQuery

1. Краткое руководство по API jQuery

2. Памятка по jQuery Mega

3. Памятка по OverAPI jQuery

4. Онлайн-памятка по jQuery

5. Памятка по jQuery WSU

6. Памятка по элементам jQuery-Select

7. jQuery 1.7 Visual Cheat Sheet v2

8. Памятка по jQuery 1.3.2.

9. Памятка по jQuery от i3Quest

10. Памятка по значкам jQueryUI

Заключительные слова

Вам нужно разрабатывать веб-страницы с помощью jquery, но у вас мало времени, чтобы разобраться в каждой вещи? Вы чувствуете себя застрявшим и ограниченным во времени? Не волнуйся. Есть простое решение – jQuery Cheat Sheets !!

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

Популярные чит-листы jQuery

Здесь на TemplateToaster сайт строитель, я собрал некоторые из лучших JQuery шпаргалок для вас. Просто просмотрите эту коллекцию и получите выгоду.

1. Краткое руководство по API jQuery

Это одна из наиболее скомпилированных шпаргалок по jQuery. Это справочник для всех версий jQuery, доступных до сих пор. Вы просто выбираете версию jQuery из раскрывающегося списка, на которую хотите сослаться. Также предоставляется возможность поиска для поиска определенного элемента в шпаргалке. Он делит всю коллекцию на 8 разделов. Включая селекторы, атрибуты / CSS, манипуляции, обход, события, эффекты, Ajax, Core. Просто щелкните элемент, и вы увидите его описание с примером кода. Итак, это хороший ресурс для изучения jQuery для начинающих.

2. Памятка по jQuery Mega

Это одна из самых популярных шпаргалок по jQuery. Он суммирует все элементы jQuery для выполнения всех его важных функций. В нем есть разные разделы для группировки соответствующих операций. Основные разделы – Селекторы, Атрибуты CSS, Манипуляция, Перемещение, События, Эффекты, Ajax, Ядро и т.д.

3. Памятка по OverAPI jQuery

Эта шпаргалка по jQuery поддерживается на overapi. Он содержит все основные элементы в разных разделах. Есть дополнительный раздел для утилит. Вы можете увидеть описание и пример кода любого элемента. Все элементы являются интерактивными ссылками. На этом листе также отмечены полезные ссылки на другие шпаргалки по jQuery.

4. Онлайн-памятка по jQuery

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

5. Памятка по jQuery WSU

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

6. Памятка по элементам jQuery-Select

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

7. jQuery 1.7 Visual Cheat Sheet v2

Эта шпаргалка по jQuery разработана Антонио Лупетти. Справочное руководство по jQuery 1.7, в котором элементы также расположены в тех же основных разделах. В нем рассказывается о функциях каждого включенного элемента jQuery. Также доступны версии этой шпаргалки для jQuery 1.6 и 1.5.

8. Памятка по jQuery 1.3.

2.

Это также хорошая шпаргалка по jquery, составленная Мэттом Крузом. Он очищает, как обратные вызовы получают аргументы. Представляет простые методы работы с селекторами. Он доступен в трех форматах: xls, pdf, png. Вы можете скачать его в любой форме по своему усмотрению.

9. Памятка по jQuery от i3Quest

Эта шпаргалка по jQuery включает только список элементов для селекторов. Он состоит из шести разделов – Общие, Атрибуты, Функции, Иерархия, Элементы управления и Состояние элемента. Это короткий, но полезный ресурс для начинающих.

10. Памятка по значкам jQueryUI

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

Заключительные слова

jQuery позволяет делать больше с меньшим количеством кода. Его приложения огромны. Используйте его где угодно: от слайд-эффектов, анимации до создания интерактивных карт Google. Он оптимизирован для SEO в дополнение к кроссбраузерности. Если вы хотите создать привлекательный сайт или веб-приложение, jQuery просто необходим. И шпаргалки jQuery неизбежно помогут вам в написании кода вашего проекта. Поскольку теперь у вас есть огромные ресурсы jQuery, наслаждайтесь более чистой и быстрой веб-разработкой !!

Источник записи: https://blog.templatetoaster.com

Справочник по jQuery 3.5 — API по типам функций

  • <<    JQ Advanced — Ajax Globals
  • API jQuery В алфавитном порядке     >>

Щелкните запись API jQuery 3.5 в таблице ниже, чтобы просмотреть подробную информацию о ней.

Аякс

Функция Help
Глобальные обработчики событий Ajax
0032
. ajaxStart() .ajaxStop() .ajaxSuccess()
.param() .serialize() .serializeArray()
Low-Level Interface
jQuery.ajax() jQuery.ajax Prefilter() jQuery.ajaxSetup()
.
Сокращенные методы
jQuery.get () jquery.getjson () jQuery.getScript ()
21212121292. 2. 29212. 29212. 29212. 2. 2. 2. 29212212121212.LAILSICREST ()

Атрибуты и свойства

Атрибуты
. attr () .HTML () .PROP ()
.Repeat ()
.Repeat ()
. ()
Класс
0022
СС
.css() jQuery.cssHooks jQuery.escapeSelector()
333333333923333333333392333333333333923923
Style Properties
. Хейт () .Inner () .innerWidth () .FOFFENTSET () .FOFFENTSET () .FOFFENTSET () .FOFFENTSET () .FOFFENTSE.0019 . OTER Высота () . СОВЕТ Ширина () . Положение () .scrollftft () 3333333923 .scrollftft () .Scrollftft () .Scrollft () .Scrollft () . .width()

Ядро и внутренние компоненты

Ядро
jQuery() jQuery.holdReady() jQuery.noConflict()
jQuery.ready Exception() jQuery.sub() jQuery.when()
9
Internals
. Context . JQUERY JQUERY. ERROR
.
.0011
Методы элемента DOM
.get() .index() .size() .toArray()

Effects

Базовый
.hide () . Шоу () .toggle ()
Custom
Custom
. Анимат () . Clearqueue () . Дилай ()
.Dequeue ()
.Dequeue ()
. FX.Interval
jQuery.fx.Off . queeue () .stop ()
913.
.fadeIn() .fadeOut() .fadeTo() .fadeToggle()
Sliding
.Slidedown () .Slidetoggle () .Slideup ()

Eventup

1

.

Браузер и загрузка
События браузера
.error() .resize() .scroll()
События загрузки документов
. Загрузку () . Работа () . Нагрузка ()
.
Event Handler.
0021 .live () .OFF () .ON ()
.One () JQUERY.PROXY () 923
.unbind() .undelegate()
2
Форма
.blur() .change() .focus() .focusin()
.focusout() .select() .submit()
Клавиатура
. Keydown () . Keypress () . Keyup ()
9
9
9
7
7
92
. click() .dblclick() .hover ()
. Mousedown () . Mouseenter () . Mouseleave () .
2
2
2
2
92
29. 2. . . . . . . . . . . () .mouseover() .mouseup() .toggle() 18322020202021. ) . . Рад ()
Фильтрация
.EQ () .EVEN () . Filter () . FIRST ()
.last () . MAP ()
. Не () .odd ()
3 .
Вставка DOM, около
.Wrap () .Wrapall () .Wrapinner ()
.
. Append () . Appendto () .Prepend ()
.PREPDTO ()
.PREDTO ()
.
Вставка DOM снаружи
.after() .before() .insertAfter() .insertBefore()
DOM Removal
.detach() .empty() . remove() .unwrap()
DOM Replacement
.replaceAll() .replaceWith()

Объекты

2122129212.SLACKED () 212212.SLACKED (). ()
Объект обратного вызова
jQuery.Callbacks() callbacks.add() callbacks.disable()
callbacks.empty() callbacks.fire() callbacks.fired()
Callbacks.fire с () Callbacks.has () Callbacks.lock ()
1212121212
12121212
Отложенный объект
jQuery. Deferred() deferred.always() отложено.выполнено()
Отдел. .notify With() deferred.pipe()
отложенный. progress() deferred.promise() deferred.reject()
deferred.reject With() deferred.resolve() deferred.resolve With()
deferred.state() deferred.then() .promise()
Методы объекта события
event.isDefaultPrevented() event.isImmediate PropagationStopped()
event.isPropagation Stopped() event. preventDefault()
event.stopImmediate Propagation() event.stopPropagation( )
Свойства объекта события
event.clientX event.clientY Event.current Target
Event.data Event.delegate Event.namespace Event.namespace . событие.связанное цель
событие.результат событие.цель 20029 02021 00023
событие.тип событие.которое

Селекторы

Атрибут
Аттр. Содержит префикс Атр. Содержит Аттр. Содержит Word
Аттр. Заканчивается на Аттр. Равен Аттр. Не равно
Атр. Начинается с Имеет атрибут. Несколько атрибутов
9003 4 Basic Filter 1821111111111111111111111111111111111111111111111111111111711111111171111111111111111111111111111111111111111111111111 ГОДОВЫЙ
Базовый
All Selector Class Element
ID Multiple
:animated :eq() :first :even
:gt() :header : LANG : Последний
: LT () : нет () : ODD
Детский фильтр
:первый потомок :первый тип :последний потомок 1-из типа230022
:nth-child() :nth-last-child() :nth-last-of-type :nth-of-type
:только дочерний :только тип
Фильтр содержимого
:содержит() :пусто :has() 0021 :родительский
Форма
:button :checkbox :checked :disabled
:enabled :file :focus : изображение
: ввод : пароль :radio :reset
:selected :submit :text
Hierarchy
Ребенок Потомок Следующий сосед Следующие братья и сестры
Фильтр видимости
:скрытый :видимый

Обход

Обход дерева
. Килочки () .closest () . Find ()
.NEXT () 923
. nextUntil()
.offsetparent() .parent() .parents()
.parentsUntil() .prev() .prevAll()
.prevUntil() .siblings()
Другой обход
.Add () . Аддбэк () . И себя ()
.Contents ()
.0022 .end()

Коммунальные услуги

Общий
jquery. contains () jQuery.each () JQUERY.EXTEND ()
292.9002.9002.9002.9002.9002.9002.9002.9002.9002.9002.9002.9002.9002.9002.9002.9002.9002.9002.9002.9002.9002.9002.9002.9002. . grep() jQuery.inArray()
jQuery.make Array() jQuery.map() jQuery.merge()
jQuery.noop() jQuery.now() jQuery.parse HTML()
jQuery.parse JSON () jQuery.parsexml () jQuery.trim ()
JQUERY.Type () JQUERY.TYPE () JQUERY.TYPE.0023 jQuery.unique Sort()
Свойства глобального объекта
jQuery. boxModel jQuery.browser jQuery.support
Copy Methods
.clone()
Методы данных
.data () jQuery.data () jQuery.dequeue ()
JQUERY.HASDATA () 2021 921. )
jQuery.removeData()
Методы типов
jQuery.isArray() jQuery.isEmpty Object() jQuery.isFunction()
jQuery. is Numeric() jQuery.isPlain Object() jQuery.isWindow()
jQuery .isXMLDoc()
  • <<    JQ Advanced — Ajax Globals
  • API jQuery В алфавитном порядке     >>

утверждений | Документация Cypress

Cypress объединяет популярное утверждение Chai библиотека, а также полезные расширения для Синон и jQuery, предоставляя вам десятки мощные утверждения бесплатно.

Chai

https://github.com/chaijs/chai

Утверждения BDD

Эти цепочки доступны для утверждений BDD ( ожидать / следует ). Псевдонимы перечисленные могут использоваться взаимозаменяемо с их оригинальным цепным устройством. Вы можете увидеть полный список доступных утверждений BDD Chai здесь.

) окончание 3 ) 90( начало , окончание 3 ) 90(,,, есть.lengthOf(3) 9Тест/)
Chainer Пример
не expect(name). to.not.equal('Jane')
deep expect(obj).to.deep.equal({ name: 'Джейн' })
вложенный expect({a: {b: y']}}).to.have.nested.property('a.b[1]')
expect({a: {b: ['x', 'y']}}).to.nested. include({'a.b[1]': 'y'})
заказано ожидать([1, 2]).to.have.ordered.members([1, 2]).но. not.have.ordered.members([2, 1])
любой ожидать(приб.).иметь.любые.ключи('возраст')
все ожидать(приб.).иметь.все.ключи('имя', 'возраст')
A ( Тип )
псевдонимов: AN 		Ожидайте ('Test'). TO.Be.a ('String')
2020202 Псевдонимы: содержат, включает, содержит expect([1,2,3]).to.include(2)
OK Ожидайте (не определен). Ко. .to.be.false
NULL Ожидайте (null). Ко. ожидать (myVar).to.exist
Пусто Ожидайте ([]). Равное ( Значение )
псевдонимов: , равные, уравнение 		Ожидайте (42). TO.EQUAL (42)
Deep.equal (
202020202020202020202020202020202020202020202020202.
. имя: 'Джейн' }).to.deep.equal({ имя: 'Джейн' })
EQL ( Значение )
Псевдозы: EQLS 		Ожидайте ({name: 'Jane'}). БОЛЬШЕГО ( Значение )
псевдонимов: GT, выше 		Ожидайте (10). ожидать(10).быть.по крайней мере(10)
МЕНЬЕР ( Значение )
Псевдозы: LT, ниже 		Ожидайте (5). Псевдонимы: lte expect('test').to.have.have.lengthof.most(4)
в пределах( начало ,
7).to.be.in(5,10)
instanceOf( Constructor )
псевдонимов: ExtanceOF 		Ожидайте ([1, 2, 3]). TO.Be.InstanceOF (Array)
( Название
( Название
( название
(. ) expect(obj).to.have.property('name')
deep.property( name , [value] ) expect(deep.Obj). deep.property('тесты[1]', 'e2e')
ownProperty( Имя )
Псевдозы: HASHOWNPROPERTY, СОБСТВЕННЫЙ. Псевдонимы: haveOwnPropertyDescriptor 		expect({a: 1}). to.have.ownPropertyDescriptor('a')
lengthOf( value ) 90'2013
Строка ( Строка ) Ожидайте («Тестирование»). , [...] )
Псевдонимы: key 		expect({пройдено: 1, не пройдено: 2 }).to.have.keys('pass', 'fail')
throw( конструктор )
Псевдонимы: throws, Throw 		expect(fn).to.throw(Error)
Ответ. .to.respondTo('bar')
удовлетворяют( метод )
Псевдонимы: удовлетворяет 		ожидаемый > 0 ((num)удовлетворяет > 0 ((num) удовлетворяет > 0). })
закрыть( Ожидается , Delta )
псевдонимов: приблизительно 		Ожидайте (1,5). [1, 2, 3]).to.include.members([3, 2])
oneOf( значений ) expect(2).to.be.oneOf([1,2 ,3])
изменение( функция )
Псевдонимы: изменений 		Ожидайте (FN). TO.CHANGE (OBJ, 'VAL')
Увеличение ( Функция )
Псевдоним: . obj, 'val')
Уменьшение ( Функция )
Псевывания: Снижение 		Ожидайте (Fn). геттеры также доступны для утверждений BDD. Они на самом деле не делают что угодно, но они позволяют вам писать четкие английские предложения.

Chainable getters
to , be , been , is , that , which , and , has , have , with , at , of , тот же

Утверждения TDD

Эти утверждения доступны для утверждений TDD ( assert ). Вы можете увидеть полный список доступных утверждений Chai здесь.

assert.not(s ,4Equal, notEqual equal') id: '1' }, { id: '2' }) 0 0 ошибка') {assertnum:
Утверждение Пример
.ISOK ( Object , [Сообщение] ) 11.ISOK (Message] )1111.ISOK. .isNotOk( object , [message] ) assert.isNotOk(false, 'this will pass')
.equal( actual , expected , [message] ) assert.equal(3, 3, 'vals equal')
.notEqual( фактическое , ожидаемое , [сообщение] )
.strictEqual( actual , expected , [message] ) assert.strictEqual(true, true, 'bools strict eq')
.notStrictEqual( фактический , ожидаемый , [message] ) assert. notStrictEqual(5, '5', 'not strict eq')
.deepEqual( actual , expected , [message] ) assert.deepEqual({id: '1'}, {id: '1'})
.notDeepEqual( фактическое , ожидаемое , [сообщение] ) 9010
.isAbove( valueToCheck , Valuetobeabove , [сообщение] ) Assert.isabove (6, 1, '6 больше 1')
. ) ASSERT.ISATLEG (5, 2, '5 GT или EQ до 2')
. (3, 6, '3 строгий лт 6')
. Значение , [Сообщение] ) ASSERT.ISTRUE (TRUE, «Этот VAL TRUE ')
. 'тесты неинтересны', 'оценка неверна')
.ISSFALSE ( Значение , [Сообщение] ) ASSERT. ISSALSE (FALSE, 'VAL IS FALSE')
.ISNOTFALSE ( 40023
.ISNOTFALSE (
. assert.isNotFalse('тесты забавные', 'значение не ложно')
.isNull( значение , [сообщение] )
.isNotNull( value , [message] ) assert.isNotNull('hello', 'is not null')
.isNaN( value , [message] ) assert. isNaN(NaN, 'NaN is NaN')
.isNotNaN( value , [message] ) assert.isNotNaN(5, '5 is not NaN')
. существует( значение , [сообщение] ) assert.exists(5, '5 не является нулевым или неопределенным')
. Notexists ( Значение , [Сообщение] ) ASSERT. NOTEXIST ] ) ASSERT.ISUNDEFINED (Undefined, «val не определен»)
. определено')
.ISFUNCTION ( Значение , [Сообщение] ) ASSERT.ISFUNCTION (x => x * x, 'val - это func')
. ] ) assert.isNotFunction(5, 'val not funct')
.isObject( значение , [сообщение] ) } val is object')
.isNotObject( значение , [Сообщение] ) ASSERT.ISNOTOBject (3, 'val not object')
.Isarray ( Значение , [Сообщение] )202021, [Сообщение] )202021 unit', 'e2e'], 'val is array')
.isNotArray( значение , [сообщение] ) assert.isNotArray('e2e', 'val not2 array')
. isString( значение , [сообщение] ) assert.isString('e2e', 'val is string')
.isNotString( value , [message] ) not string.isNotString(2)
. assert.isNotNumber('e2e', 'val not number')
. СИФФИНИТ ( Значение , [Сообщение] ) ASSERT.ISFINITE ('e2e', 'Val Is Finite')
. ] ) assert.isBoolean(true, 'val is bool')
.isNotBoolean( value , [message] ) assert.isNotBoolean('true', 'val not bool')
.typeOf( Значение , Имя , [Сообщение] ) ASSERT.TYPEOF ('e2e', 'String', 'val is string')
.Nottypeof (. , [сообщение] ) assert.notTypeOf('e2e', 'число', 'значение не число')

Chai-jQuery

https://gitshub/chai. com/chaij -jquery

Эти цепочки доступны при утверждении об объекте DOM.

Обычно вы будете использовать эти цепочки после использования таких команд DOM, как: cy.get() , cy.contains() , etc.

ожидать($input
    ) 1 .not.to.be.checked
Chainers Assertion
attr( name , [value] ) expect( $el).to.have.attr('foo', 'bar')
prop( name , [value] ) expect($el).to.have.prop( 'отключено', ложь)
css( имя , [значение] ) ожидать($el).to.have.css('цвет фона', 'rgb(0, 0, 0)')
данные( имя , [значение] ) ожидать($el).to.have.data('foo', 'bar')
класс( 9002 9 1994 className) 9002 9 1994 className ожидать($el).to.have.class('foo')
id( id ) ожидать($el). to.have.id('foo')
HTML ( HTML ) Ожидайте ($ EL). Ко. ).to.have.text('Я люблю тестировать')
value( value ) expect($el).to.have.value('[email protected]')
видимый ожидать($el).быть.видимым
скрытый ожидать($el).быть.скрытым
выбрано ожидать($option).не.быть выбранным
focus[ed] expect($input).not.to.be.focus
expect($input).to.have.focus
включено ожидать($input).будет включено
Отключен Ожидайте ($ вход). Ко. НЕПРАВИЛЬНО) .NOT.TO.Exist
MATCH ( Селектор ) Ожидайте ($ Emplyel). Ко. ожидать($el).to.contain('текст')
потомков( селектор ) ожидать($el).to.иметь.потомков('div')

Sinon-Chai

https://git/menichub/ondo.com chai

Эти цепочки используются в утверждениях с cy.stub() и cy.spy() .

9002.

22
Свойство/метод Sinon.JS Утверждение
Звонил Ожидал(шпион).to.be.звонил
CallCount Ожидайте (SPY). Ко. (шпион).вызывается дважды
вызывается трижды ожидается (шпион).будет.вызвана трижды
вызывается до
по имени Ожидается (SPY1). Ко. ).to.always.be.callOn(context)
.вызвано(контекст)
CalledWith expect(spy). to.be.call(...args)
alwaysCalledWith args)
callOnceWith expect(spy).to.be.callOnceWith(...args)
callWithExactly(Withtoacts.to expects).... args)
alwaysCalledWithExactly ожидать(шпионить).чтобы.всегда.вызыватьWithExactly(...args)
вызыватьOnceWithExactly ожидать(шпионить).чтобы.вызыватьOnceWithExactly(...args) callWithMatch expect(spy).to.be.callWithMatch(...args)
alwaysCalledWithMatch expect(spy).to.always.be.callWithMatch0 0...args
возвращено ожидать(шпион).чтобы.вернулось(returnVal)
Всегда повторно Ожидайте (шпион). Ко. alwaysThrew expect(spy).to.have.always.thrown(errorObjOrErrorTypeStringOrNothing)

Добавление новых утверждений

. Cypress будет «просто работать» с новыми утверждениями, добавленными к чай . Вы можете:

  • Написать свои собственные утверждения chai как задокументировано здесь.
  • npm установите любую существующую библиотеку chai и импортируйте ее в свой тестовый файл или файл поддержки.

Общие утверждения

Вот список общих утверждений элементов. Обратите внимание, как мы используем эти утверждения (перечислено выше) с .should() . Вы также можете захотеть читайте о том, как Cypress повторяет попытки утверждения.

Длина 

 // повторяем, пока не найдем 3 совпадения 
cy.get('li.selected').should('have.length', 3)

Class 

 // повторять попытку, пока этот ввод не отключит класс
cy.get('form').find('input').should('not.have.class', 'disabled')

Value 

 // повторите попытку, пока эта текстовая область не будет иметь правильное значение
cy. Привет/)

Видимость 

 // повторяем до тех пор, пока элемент с
// data-testid "form-submit" виден
cy.get('[data-testid="form-submit"]').should('be.visible')
// повторяем до тех пор, пока элемент списка с
// текст "написать тесты" виден
cy.contains('[data-testid="todo"] li', 'написать тесты').should('be.visible')

Примечание: если имеется несколько элементов, утверждения будут видны и not.be.visible действовать иначе:

 // повторять попытку, пока НЕКОТОРЫЕ элементы не станут видимыми
cy.get('li').should('be.visible')
// повторяем до тех пор, пока ВСЕ элементы не станут невидимыми
cy.get('li.hidden').should('not.be.visible')

Посмотреть короткое видео "Несколько элементов и утверждение must('be.visible')" который показывает, как правильно проверять видимость элементов.

Существование 

 // повторять попытку до тех пор, пока счетчик загрузки не перестанет существовать
cy. get('[data-testid="loading"]').should('not.exist')

Состояние 

 // повторяем попытку, пока наше радио не будет проверено
cy.get(':radio').should('be.checked')

CSS 

 // повторять попытку до тех пор, пока элемент не будет соответствовать css
cy.get('[data-testid="completed"]').should(
  'есть.css',
  'текстовое оформление',
  'Линия, проходящая через'
)
 
 // повторите попытку, пока аккордеон css имеет
// свойство "display: none"
cy.get('[data-testid="accordion"]').should('not.have.css', 'display', 'none')

Отключенное свойство 

 
 
 cy.get('[data-testid="example-input"]')
  .should('быть.отключено')
  // включим этот элемент из теста
  .invoke('реквизит', 'отключено', ложь)
cy.get('[data-testid="example-input"]')
  // мы можем использовать утверждение "enabled"
  .должен('быть.включен')
  // или отменить утверждение "disabled"
  .and('не.быть. отключенным')

Отрицательные утверждения

Существуют положительные и отрицательные утверждения. Примеры положительных утверждений:

 cy.get('[data-testid="todo-item"]')
  .должен('иметь.длина', 2)
  .and('иметь.класс', 'завершено')

Отрицательные утверждения имеют перед утверждением цепочку "не". Примеры отрицательных утверждений:

 cy.contains('первое задание').should('not.have.class', 'completed')
cy.get('[data-testid="loading"]').should('not.be.visible')
⚠️ Ложное прохождение тестов

Отрицательные утверждения могут пройти по причинам, которых вы не ожидали. скажем, мы хотите проверить, что приложение Todo list добавляет новый элемент Todo после ввода Todo и нажатие ввода.

Положительные утверждения

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

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

 cy.get('[data-testid="todos"]').should('have.length', 2)
cy.get('[data-testid="new-todo"]').type('Написать тесты{введите}')
// использование положительного утверждения для проверки
// точное количество элементов
cy.get('[data-testid="todos"]').should('have.length', 3)

Отрицательные утверждения

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

  • Приложение удаляет весь список элементов Todo вместо вставки третьего Сделать
  • Приложение удаляет задачу вместо добавления новой задачи
  • Приложение добавляет пустую задачу
  • Бесконечное множество возможных ошибок приложения
 cy.get('[data-testid="todos"]').should('have.length', 2)
cy.get('[data-testid="new-todo"]').type('Написать тесты{введите}')
// используем отрицательное утверждение для проверки
// не количество элементов
cy. get('[data-testid="todos"]').should('not.have.length', 2)

Рекомендация

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

 // сначала пункт помечен как выполненный
cy.contains('[data-testid="todos"]', 'Написать тесты')
  .should('иметь.класс', 'завершено')
  .find('[data-testid="toggle"]')
  .клик()
// класс CSS был удален
cy.contains('[data-testid="todos"]', 'Написать тесты').should(
  'не.иметь.класс',
  'завершенный'
)

Должен обратный вызов

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

 
Введение

 
 cy.get('div').should(($div) => {
  ожидать($div).to.have.length(1)
  константное имя_класса = $div[0].имя_класса
  // className будет строкой вроде "main-abc123 heading-xyz987"
  ожидать (имя_класса).to.match(/heading-/)
})

Несколько утверждений

К одной команде можно прикрепить несколько утверждений.

 <а
  data-testid="утверждения-ссылка"
 
  href="https://on.cypress.io"
  цель = "_ пусто"
>
  Кипарис Документы

 
 cy.get('[data-testid="утверждения-ссылка"]')
  .should('иметь.класс', 'активный')
  .and('иметь.attr', 'href')
  .и('включить', 'кипарис.ио')

Обратите внимание, что все связанные утверждения будут использовать одну и ту же ссылку на оригинал предмет. Например, если вы хотите протестировать элемент загрузки, который появляется первым а затем исчезает, следующее НЕ БУДЕТ РАБОТАТЬ, потому что тот же элемент не может быть видимым и невидимым одновременно:

 // ⛔️ НЕ РАБОТАЕТ
cy. get('[data-testid="loading"]').should('be.visible').and('not.be.visible')

Вместо этого вы должны разделить утверждения и повторно запросить элемент:

 // ✅ ПРАВИЛЬНЫЙ СПОСОБ
cy.get('[data-testid="loading"]').should('be.visible')
cy.get('[data-testid="loading"]').should('not.be.visible')

См. также

  • Руководство: Знакомство с Cypress
  • кипарис-пример-кухонная раковина Утверждения
  • Cypress должен перезвонить сообщение в блоге

Селекторы jQuery

« Предыдущая

Следующая глава »

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

Селектор Пример Выбирает
* $("*") Все элементы
# идентификатор $("#фамилия") Элемент с
. класс $(".intro") Все элементы с
. класс, . класс $(".intro,.demo") Все элементы класса "вступление" или "демо"
элемент $("р") Все элементы

эл1 , эл2 , эл3 $("ч2,дел,р") Все элементы

,

и

     
:первый $("п:первый") Первый элемент

:последний $("п:последний") Последний элемент

:четный $("тр:чет") Все четные элементы
: нечетный $("тр:нечет") Все нечетные элементы
     
:первый ребенок $("p:первый-потомок") Все элементы

, которые являются первыми дочерними элементами своего родителя

: первый в своем роде $("p:первый в типе") Все элементы

, которые являются первым элементом

своего родителя

:последний ребенок $("p:последний ребенок") Все элементы

, которые являются последними дочерними элементами своего родителя

:последний тип $("p:последний тип") Все элементы

, которые являются последним элементом

своего родителя

:n-й ребенок ( n ) $("p:n-й ребенок(2)") Все элементы

, которые являются вторыми дочерними элементами своего родителя

:n-последний-потомок( n ) $("p:n-последний-потомок(2)") Все элементы

, которые являются вторыми дочерними элементами своего родителя, считая от последний ребенок

:n-го типа ( n ) $("p:n-го типа(2)") Все элементы

, которые являются вторым элементом

своего родителя

:n-последний тип( n ) $("p:n-последний тип(2)") Все элементы

, которые являются вторым элементом

своего родителя, считая от последний ребенок

: единственный ребенок $("p:только ребенок") Все элементы

, которые являются единственными дочерними элементами своего родителя

:только тип $("p:только тип") Все элементы

, которые являются единственными дочерними элементами своего типа для своего родителя

     
родитель > ребенок $("дел > р") Все элементы

, которые являются прямыми потомками элемента

родитель-потомок $("дел п") Все элементы

, являющиеся потомками элемента

элемент + следующий $("дел + р") Элемент

, который находится рядом с каждым элементом

элемент ~ братья и сестры $("дел ~ р") Все элементы

, являющиеся одноуровневыми элементами

     
:eq( индекс ) $("ul li:eq(3)") Четвертый элемент в списке (индекс начинается с 0)
:gt( нет ) $("ul li:gt(3)") Элементы списка с индексом больше 3
:lt( нет ) $("ul li:lt(3)") Элементы списка с индексом меньше 3
:нет( селектор ) $("вход:не(:пусто)") Все непустые элементы ввода
     
:заголовок $(":заголовок") Все элементы заголовка

,

.

..
:анимация $(":анимация") Все анимированные элементы
:фокус $(":фокус") Элемент, который в данный момент имеет фокус
:содержит( текст ) $(":содержит('Привет')") Все элементы, содержащие текст «Привет»
:есть( селектор ) $("дел:имеет(р)") Все элементы
, содержащие элемент

:пусто $(":пусто") Все пустые элементы
:родительский $(":родительский") Все элементы, являющиеся родительскими для другого элемента
:скрытый $("p:скрыто") Все скрытые элементы

:видимый $("таблица:видимая") Все видимые таблицы
: корень $(":корень") Корневой элемент документа
:язык( язык ) $("p:язык(де)") Все элементы

со значением атрибута lang, начинающимся с "de"

     
[ атрибут ] $("[ссылка]") Все элементы с атрибутом href
[ атрибут = значение ] $("[href='default.

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *