jQuery — это быстрый и лаконичный фреймворк JavaScript, который представляет собой проект с открытым исходным кодом, созданный Джоном Резигом в 2006 году. Он инкапсулирует функциональные коды, обычно используемые в JavaScript, предоставляет простой шаблон проектирования JavaScript и оптимизирует операции с документами HTML, обработку событий, дизайн анимации и взаимодействие Ajax. Целью его разработки является «Пиши меньше, делай больше», которая выступает за написание меньшего количества кода и выполнение большего количества задач.

Если вы хотите узнать больше о jQuery, вы можете посетить следующие ссылки:

jQueryОфициальный сайт

китайская сеть jQuery

Учебник по jQuery

Документация API jQuery

обычно используется

метод импорта

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Общая формула

 公式：$(selector).action()

1.2 Быстрый старт

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a href="#" id="test">点我</a>
<script>
    $('#test').click(function (){
        alert('hello,jquery');
    })
</script>
</body>
</html>

Селектор

Помимо поддержки всех селекторов CSS

событие

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #divMouse{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
mouse: <span id="mouseMove"></span>
<div id="divMouse">
    在这里点击鼠标试试
</div>
<script>
    $(function (){
        $('#divMouse').mousemove(function (e){
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
        })
    });
</script>
</body>
</html>

ДОМ

1.3 Обзор функций

Библиотека jQuery содержит следующие функции

Манипуляции с HTML/DOM

CSS манипуляции

Функции HTML-событий

JavaScript-эффекты и анимация

АЯКС

Утилиты

2. Введение в JQuery

2.1 Функции подготовки документов

Во избежание потенциальных ошибок, вызванных выполнением кода jQuery до загрузки документа, все функции jQuery необходимо записывать в функции готовности документа (document ready). Например, текущая HTML-страница еще не загружена, поэтому определенный тег HTML-элемента может быть еще не запрошен.

2.2 Конфликты имен

jQuery обычно использует знак доллара $ в качестве сокращения, но в HTML-документе, который одновременно использует несколько библиотек функций JavaScript, jQuery может конфликтовать с другими функциями, которые также используют символ $ (например, Prototype), поэтому jQuery использует noConfict () для настройки Другие имена для замены, возможно, конфликтующих выражений символа $. .

2.3 Селектор JQuery

Базовый селектор

Селектор атрибутов

Селектор форм

Селектор иерархии

CSS-селекторы jQuery

базовый селектор

Передовой

селектор атрибутов

Передовой

селектор формы

пример кода

селектор уровня

Селектор CSS

2.4 Фильтр JQuery

Базовый фильтр

Детский фильтр

Фильтр содержимого

Фильтр видимости

Базовый фильтр

: первый 和: последний

:first и :last — это методы, используемые для выбора первого или последнего элемента в наборе элементов.

:четный и нечетный

:even и :odd — это фильтры JQuery, используемые для выбора четных или нечетных индексированных элементов в наборе элементов.

:eq(), :gt() и :It()

:eq(), :gt() и :lt() — это фильтры JQuery, используемые для выбора элементов по определенному индексу или диапазону индексов в наборе элементов.

:нет()

: заголовок

фильтр дочерних элементов

:first-child
Фильтр :first-child используется для фильтрации первого дочернего элемента в каждом родительском элементе на странице.

:last-child
Фильтр :last-child используется для фильтрации последнего дочернего элемента в каждом родительском элементе на странице.

Фильтр :nth-child
:nth-child() используется для фильтрации n-го дочернего элемента в каждом родительском элементе на странице, а порядковый номер начинается с 1.

:only-child
Фильтр :only-child используется для фильтрации всех дочерних элементов, у которых есть один и только один элемент в родительском элементе.

контентный фильтр

:contains()
Фильтр :contains() используется для фильтрации всех элементов, содержащих указанный текстовый контент.

Текст фильтра :contains() чувствителен к регистру.

:empty
Фильтр :empty используется для выбора элементов, не содержащих дочерних узлов (дочерние элементы и текст).

:parent
Фильтр :parent используется для выбора элементов, содержащих дочерние узлы (дочерние элементы и текст), и его синтаксическая структура выглядит следующим образом:

:has Фильтр
:has() используется для выбора элементов, содержащих указанный селектор.

фильтр видимости

:hidden
Фильтр :hidden используется для фильтрации всех скрытых элементов.

:visible
Фильтр :visible используется для фильтрации всех видимых элементов.

3. События JQuery и специальные эффекты

3.1 Событие JQuery

События документа/окна

события клавиатуры

событие мыши

событие формы

События документа/окна

события клавиатуры

событие мыши

событие формы

Селектор этого события может быть только элементом формы в начале, и в настоящее время он применим к любому элементу HTML. Элемент может потерять фокус, щелкнув мышью место, отличное от элемента, или нажав клавишу Tab на клавиатуре.

Привязка и отвязка событий jQuery

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

привязка событий jQuery

событие jQuery отклонить

Временные события jQuery

Мониторинг событий HTML-элементов также можно привязывать или отвязывать определенными методами.В версиях после jQuery1.7 рекомендуется использовать методы on() и off() для замены всех предыдущих методов привязки и отвязки событий.

Когда элемент должен прослушивать несколько событий, вы можете использовать метод on() для регистрации элементов, которые добавляются динамически позже (не существует при инициализации страницы), а его прослушиватели событий должны быть зарегистрированы на

3.2 спецэффекты

jQuery скрыть и показать

jQuery появляется и исчезает

jquery-салфетки

jQuery-анимация

Цепочка методов jQuery

jQuery остановить анимацию

jQuery скрыть и показать

jQuery может управлять скрытием и отображением элементов, в том числе продолжительностью пользовательских изменяющихся эффектов. Метод hide() используется для скрытия указанного элемента, а метод show() используется для отображения указанного элемента.

Метод jQuery toggle() используется для переключения скрытия и отображения элементов.Этот метод можно использовать отдельно вместо методов hide() и show()
для отображения скрытых элементов или скрытия отображаемых элементов.

jQuery появляется и исчезает

jquery-салфетки

jQuery слайд вниз ()

JQuery SlideUp ()

JQuery SlideToggle ()

jQuery-анимация

Изменение основных свойств элемента

изменить положение элемента

очередь анимации

остановить анимацию

изменить положение элемента

3.3 ссылка на метод jQuery

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

4. JQuery DOM

jQuery получить и установить

jQuery добавить

jQuery удалить

Атрибут класса jQuery

размер jQuery

jQuery получить и установить

текст()

HTML()

атрибут()

CSS()

опора()

jQuery добавить

добавить() или предварительно добавить()

после() 和до（）

jQuery удалить

jQuery удалить ()

jQuery пустой ()

jQuery удалить атрибут()

jQuery удалить ()

jQuery пустой ()

jQuery удалить атрибут()

Атрибут класса jQuery

добавить класс（）

удалитькласс（）

немного

переключить класс（）

размер jQuery

Пять, обход JQuery

5.1 Генеалогическое древо HTNL

Все элементы на одной и той же HTML-странице могут образовывать древовидную структуру в соответствии с иерархическими отношениями, которая называется генеалогическим древом (Family Tree).
Наиболее распространенные методы обхода в совокупности называются обходом дерева (Tree Traversal).

5.2 Обход потомков jQuery

Обычно используются следующие методы:

children(): найти прямые дочерние элементы элемента

find(): найти всех потомков элемента, пока не будет найден последний слой элементов.

дети():

находить():

5.3 Обход одноуровневых элементов jQuery

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

5.4 Обход предка jQuery

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

Основы грамматики JQuery

1. Первое знакомство с JQuery

1.1 Введение в JQuery