Оглавление

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

Сравнение кода js и jQuery

Селектор jQuery: используется для выбора элементов

основной метод

Сравнение кода js и jQuery

Селектор jQuery: используется для выбора элементов

основной метод

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

Что такое jQuery: jQuery — это библиотека классов JavaScript, которая инкапсулирует большой объем js-кода. Подобно библиотеке классов в Java, в одном классе содержится множество функций, написанных другими. Более 90% компаний используют jQuery.

Официальный сайт: http://jquery.com/

Зачем изучать jQuery: он может упростить разработку JavaScript. jQuery включает в себя: селекторы, стили CSS, обработку событий HTML, анимацию JS, богатые плагины и т. д., а также обладает высокой совместимостью с браузерами.

Откройте домашнюю страницу официального сайта jQuery: пишите меньше, делайте больше Пишите меньше, делайте больше

Зачем использовать jQuery? Это очень просто, всего одно предложение, потому что его используют многие люди. Сначала мы можем взглянуть на более популярную интерфейсную платформу https://www.bootcdn.cn/.

Узнайте о Bootstrap, который сейчас используется многими предприятиями. Существуют также интерфейсные платформы, такие как React, jQuery, Angular.js и Vue.js, которые используются многими предприятиями.

Vue.js в настоящее время является наиболее часто используемой интерфейсной платформой для мобильных устройств и WeChat.

Когда использовать jQuery: Разработка средних и крупных веб-сайтов, основа некоторых интерфейсных фреймворков, таких как EasyUI.

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

Подготовка:

1. Загрузите библиотеку jQuery:
   • • Войдите на официальный сайт jQuery http://jquery.com/.
     • Нажмите, чтобы скачать

Есть три версии:

1. Download the compressed, production jQuery 3.3.1Серийная версия
2. Download the uncompressed, development jQuery 3.3.1Версия для разработки
3. Download the map file for jQuery 3.3.1

Рекомендуется скачать версию для разработки.

2. Используйте HBuilder для создания проекта.

3. Скопируйте библиотеку jQuery в папку js проекта.

4. Представьте файлы библиотеки jQuery:

Примечание. Не записывайте содержимое в тег скрипта. При написании кода jQuery напишите пару тегов скрипта.

Сравнение кода js и jQuery

Случай 1. Нажмите кнопку, чтобы получить значение в текстовом поле (JS или jQuery), как показано ниже.

JS-версия:

jQuery:

Сначала познакомьтесь с библиотекой jQuery

Селектор jQuery: используется для выбора элементов

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

​ ​ 1.2 Селектор уровня

1.3 Выбор фильтра

​ ​ 1.4 Выбор формы

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

Базовые селекторы включают в себя:

Селектор идентификатора #:#имя идентификатора тега

Селектор класса .:.Имя тега

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

основной метод

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

Selectioner также можно использовать в сочетании с несколькими вместе, которые можно разделить на параллельное и пересечение.

Объединение: селектор1, селектор2, разделенные запятыми.

Пересечение: селектор1 селектор2, разделенный пробелами

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

Случай 2. Используйте базовые селекторы для изменения цвета фона и цвета шрифта элементов (div, p, span).

Давайте сначала напишем два элемента div для сравнения: один добавляет атрибут id, а другой — атрибут класса.

<h2>2、базовый селектор</h2>

<div id="one">

Я первая коробка

</div>

<div class="two">

я вторая коробка

</div>

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

$("#one") Найдите элемент div с идентификатором один, а затем измените цвет фона. Если приглашение не появляется, давайте посмотрим, как сделать его подсказкой. Нажмите на библиотеку синтаксических подсказок, да. Выберите jquery.2. Теперь все в порядке. По крайней мере, у меня есть несколько советов. Итак, какое слово атрибута CSS обозначает цвет фона? Ребята, вы помните? фон правильный. Затем мы можем напрямую изменить значение атрибута, и все будет в порядке. Это очень просто:

$("#one").css("background","green");

Теперь мы изменили цвет фона div с идентификатором один на зеленый. Что мне написать, если я хочу сейчас изменить его на красный?

Хорошо, тогда давайте попробуем реализовать это с помощью селектора классов: Аналогично нам все равно нужно сначала найти div, но на этот раз мы находим его не по идентификатору, а по классу. Как это написать?

Только что в селекторе идентификатора использовался #, теперь мы используем селектор класса. Что это должно быть? Да, используй это

(".два"). Затем меняем цвет фона на желтый:(".two").css("background","желтый"); Как насчет? Это так просто!

Давайте сначала прокомментируем, а затем можем ли мы напрямую установить красный цвет фона для двух элементов управления? Давайте посмотрим. Как это написать? Точно так же мы просто использовали селектор идентификатора и селектор класса Просто найдите div и установите цвет фона. Теперь мы хотим установить цвет фона для всех элементов div. Итак, можем ли мы установить его непосредственно на основе тега div «Приходить». Затем мы Приходя используем селектор элементов Приходитьпопробуй это,Найти первымdiv：(«div») Найдите все элементы div и установите цвет фона:("div").css("background","red");

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

Такой же,первая находкаdiv：("div"), а затем задайте стиль, но теперь вам нужно задать несколько, поэтому вам нужно заменить предыдущую запятую на двоеточие, а затем после запятой написать второй атрибут:

Подстановочный знак: * Далее давайте посмотрим * Какова польза от этого. Давай, давайте просто напишем приведенный выше код еще раз и изменим селектор на *, чтобы увидеть эффект:

$("*").css({"background":"pink","color":"blue"});, о боже, все розовое. Как и следовало ожидать, * означает все, что означает установку атрибутов для всех элементов.

Множественные селекторы (объединение): селектор1, селектор2:

Далее, давайте посмотрим, что нам следует делать, если мы хотим изменить шрифт всех тегов p и тегов span на веб-странице на розовый? Сначала мы устанавливаем стили для всех тегов p и тегов span. Мы можем использовать теги элементов напрямую, сначала написать p, а затем добавить span: $("p,span").css("color" ,"pink"); , давайте посмотрим на эффективность. Затрагиваются все p и промежутки, как внутри div, так и за его пределами. Такой способ записи называется объединением нескольких селекторов.

Множественные селекторы (пересечение): селектор1 селектор2

Тогда если есть объединение, должно быть и пересечение. Давайте напишем, что такое пересечение.

$("#one p").css("color","pink"); Как вы думаете, после написания этого кода шрифт нескольких предложений поменяет цвет? Давайте посмотрим на эффективность. Только одно предложение изменило цвет. Это предложение представляет собой тег p в элементе div с идентификатором один. Так что подумайте, что означает такой способ написания пробелов?

Укажите метку внутри метки, справа.

Итак, теперь давайте сыграем что-нибудь захватывающее,Теперь я в первомdivвнутриpДобавьте что-нибудь в абзац<p>я первыйdivв <span>первый п Этикетка</span></p>。Сейчас,Я хочу просто измениться   первый п  Давайте посмотрим на цвета этих слов. Как нам их написать? Ранее мы писали $("#one p").css("color","pink"); установите тег p в div. Теперь вы хотите установить p в div. спан, как это написать? Почему Да, нужно еще одно место Затем добавьте интервал, и все в порядке:

$("#one p span").css("color","pink");

Как насчет сегодняшнего занятия? Это не сложно. Вы можете найти теги и запомнить грамматический формат. Это нормально.

Ядро jQuery — это запросы

Селектор уровня:

Давайте взглянем на онлайн-API, найдем селектор и посмотрим на иерархический селектор. Их четыре, о первом мы только что говорили. Как это называется? Пересечение или объединение?

>:дочерний селектор

Во-первых, давайте посмотрим на знак «больше» и объяснение в документе: это селектор, используемый для сопоставления элементов, и это дочерний элемент первого селектора. Пожалуйста, обратите внимание на то, что вы объясняете? Дочерние элементы первого селектора? Итак, давайте догадаемся, что означает знак «больше»? Как его использовать? Объяснение документации очень очевидно: нужно найти указанный дочерний элемент в первом селекторе. Итак, давайте сначала посмотрим:

<div id="one">

Я первая коробка

<p>я первыйdivв <span>первый п Этикетка</span></p>

<span>я первыйdivв ПервыйиндивидуальныйspanЭтикетка</span>

</div>

В этом коде несколько интервалов. Что если я захочу установить цвет этих двух тегов интервалов? Как написать, чтобы в теге p устанавливался только диапазон?

Установите два диапазона: $("#one span").css("color","pink");

Установить интервал в p: $("#one p>span").css("color","pink");

Сначала найдите тег p в теге div, а затем найдите диапазон вложенного тега в теге p.

+: селектор родственного уровня, первый на том же уровне

Далее давайте посмотрим, что означает этот +? Смысл очень простой: тот же уровень, уровень брата, так что же такое тот же уровень? Давайте сначала посмотрим на код:

<div id="one">

Я первая коробка

<p>я первыйdivв <span>первый п Этикетка</span></p>

<span>я первыйdivв ПервыйиндивидуальныйspanЭтикетка</span>

</div>

Давайте попробуем этот код в качестве примера:

$("#one p + span").css("color","pink");

Давайте посмотрим на эффект. Всего в div есть два промежутка. Какой пролет сейчас затронут? Он находится внутри p или на том же уровне, что и тег p? О, кстати, вот что делает +

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

~: Все селекторы на одном уровне

Выше мы говорили о первом селекторе одного уровня, попробуем увидеть несколько селекторов одного уровня. Давайте сначала посмотрим на код:

<div id="one">

Я первая коробка

<p>я первыйdivв <span>первый п Этикетка</span></p>

<span>я первыйdivв ПервыйиндивидуальныйspanЭтикетка</span>

<span>я первыйdivв Нет.2индивидуальныйspanЭтикетка</span>

<span>я первыйdivв Нет.3индивидуальныйspanЭтикетка</span>

<p>я первыйdivв Нет.二индивидуальныйpЭтикетка</p>

</div>

Давайте попробуем это непосредственно, чтобы увидеть эффект:

$("#one p~span").css("color","pink"); Эффект очевиден. Затрагиваются все теги диапазона в div, находящиеся на том же уровне, что и тег p, а также другие теги. тот же уровень влияния не будет затронут.

Выбор фильтра:

Получить первый элемент: first

Давайте сначала напишем ul

<ul>

        <li>11111</li>

        <li>22222</li>

        <li>33333</li>

        <li>44444</li>

        <li>55555</li>

        </ul>

Во-первых, давайте угадаем, что будет делать код, который я сейчас пишу:

$("ul li:first").css("color","pink");

Последний элемент: последний

Теперь посмотрите на это еще раз: $("ul li:last").css("color","pink"); Один — первый, а другой — последний. Как насчет этого? Просто!

Получить нечетные элементы: четные

Давайте сначала разберемся, что вообще означает? нечетное число? Нет-нет, это значит четное число. Это место волшебное, почему? Поскольку первое число в зарубежных странах равно 0, второе — 1, а третье — 2, то здесь нечетное число представляет собой четное число, а четное число представляет собой нечетное число. Как вы чувствуете возбуждение или головокружение? Давайте посмотрим непосредственно на эффективность:

$("ul li:even").css("color","pink");Затронуты первая, третья и пятая строки

Получить четные элементы: нечетные

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

$("ul li:even").css("color","pink");

Получите ряд элементов:

:gt больше, чем

Теперь давайте попробуем изменить цвет фона всех лий, которые больше первой строки:

$("ul li:gt(0)").css("background","pink"); Обратите внимание, что это место отличается от других и фактически имеет параметр. Этот параметр указывает нижний индекс какой строки и исключает его. строка, указанная индексом, то этот эффект явно больше, чем строка с индексом 0

:меньше чем

Давайте попробуем еще раз. Тот, что только что, больше, исключая строку параметров. Теперь давайте посмотрим на это еще раз: $("ul li:lt(4)").css("background","pink"); та же строка параметра, начиная с 0, исключая строку, представленную параметром

Диапазон: со второй по четвертую строку.

Теперь давайте немного захватывающе, идите к концу, за исключением первой строки, и последней строки, все остальные выбраны. Давайте попробуем сейчас, когда мы будем больше 0, а затем найдем тот, кто меньше 4. Можно ли записать код так:

("ul li:gt(0):lt(4)").css("background","pink"); Давайте посмотрим на эффект. Эй, последняя строка тоже выделена, почему бы и нет? Давайте проанализируем.То, что мы сначала находим, больше 0, то есть включаются все следующие, а затем выбираем другие. Здесь, если мы хотим выбрать те, которые находятся в диапазоне, нам нужно сначала определить самую большую позицию. , а затем выберите остальные. Итак, написанное выше неверно. Сначала мы должны определить самый большой:

Выбор формы:

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

<form method="post">

пол:<input type="radio" name="sex" id="" value="Мужской" checked="checked" />мужской

<input type="radio" name="sex" id="" значение = «женский» />женский <br>

Хобби:<input type="checkbox" name="hobby" id="" value="eat" />Пообедать

<input type="checkbox" name="hobby" id="" value="sleep" />спать

<input type="checkbox" name="hobby" id="" value="playDD" />Дудо<br>

адрес:

<select>

<option value ="1">город Чанша</option>

<option value ="2">Наньян город</option>

<option value ="3">Ухань город</option>

</select>

<br>

<input type="button" name="" id="ok" значение = «Отправить» />

</form>

Радиокнопки:

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

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

//Добавляем событие клика для кнопки отправки

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

//Получаем значение выбранного переключателя в виде: Radio означает переключатель, :checked означает выбранный //

var sex = $(":radio:checked").val();

alert(sex);

})

Я хотел бы предложить вам не использовать бомбу-сигнализатор в будущих испытаниях. В будущем мы будем использовать: confole.info(sex), затем нажмите F12 на странице, чтобы выбрать консоль и просмотреть результаты вывода;

Кнопки множественного выбора:

Кнопки множественного выбора и переключатели в основном одинаковы. Давайте попробуем сравнить их с приведенными выше.

var len = $(":checkbox:checked").length; 

Console.info(len);

Сначала проверьте, сможете ли вы получить количество выбранных вариантов.

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

var len = $(":checkbox:checked").each(function(){

var hobby = $(this).val();

console.info(hobby);

});

Напишите анонимную функцию непосредственно в каждом для обхода выбранных параметров, $(this).val() представляет значение выбранного параметра;

падать:

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

var адрес = $("option:selected").val(); Получить значение атрибута value тега параметра.

А что, если вы хотите получить города Чанша и Ухань вместо того, чтобы получить ценность? Можно ли его получить?

var адрес = $("option:selected").html(); Тег опции может напрямую получить текст веб-страницы в теге.