jQuery01-Начало работы-селектор

Цель: первый урок jQuery по началу работы и селекторам.

Фокус: Селектор

просить:

3W1H：

What：jQueryчто такое？

Why：Почему мы должны учитьсяjQuery？

Where：При каких обстоятельствах он используется?jQuery？

How：Как использовать？

отвечать:

What：jQueryдаJavaScriptбиблиотека классов,Инкапсулировано многоjsкод。похожийjava中библиотека классов一样里面一индивидуальный类中有很多别人写好的功能。Более 90% компаний используют jQuery. Сосредоточьтесь на этом предложении, вам нужно его проверить.

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

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

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

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

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

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

Where：中大型网站развивать,Основы некоторых интерфейсных фреймворков,Такие как EasyUI

How：Мы начинаем использовать его сегодня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 напишите пару тегов скрипта.

1. Сравнение кода

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

JS-версия:

jQuery:

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

1. jQueryселектор：использовать Приходить Выбранный элемент

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

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

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

1.4 Выбор формы

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

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

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

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

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

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

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

Объединение: селектор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Этикетканастраивать样式,Мы можем напрямую использовать теги элементов,Сначала напиши п.,А затем добавьтеspan：$("p,span").css("color","pink"); Приходите, давайте посмотрим на эффективность. все п и span Находится ли это внутри div Или это повлияет на все, что находится за пределами div. Такой способ записи называется множественными селекторами. Союз.

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

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

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

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

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

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

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

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

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

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

>:ребенокселектор

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

<div id="one">

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

<p>我да第一индивидуальныйdivв <span>первый п Этикетка</span></p>

<span>我да第一индивидуальныйdivв 第一индивидуальныйspanЭтикетка</span>

</div>

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

настраивать两индивидуальныйspan：$("#one span").css("color","pink");

настраиватьpвspan：$("#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? Почему Верно Вот что делает +

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

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

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

<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");Эффект очевиден,Затрагиваются все теги span на том же уровне, что и тег ip в div.,Другие родственные теги не будут затронуты.

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

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

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

<ul>

<li>11111</li>

<li>22222</li>

<li>33333</li>

<li>44444</li>

<li>55555</li>

</ul>

First Первый, давайте угадаем Каков будет эффект от этого кода, который я сейчас пишу:

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

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

Теперь снова Приходить Взгляните这индивидуальный:$("ul li:last").css("color","pink");一индивидуальныйда第一индивидуальный,Один — последний.

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

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

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

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

тогда мы接着Приходить看这индивидуальный odd Вышеупомянутая строка имеет нечетный номер, поэтому это очевидно. Но каждый должен обратить внимание на значение этих двух слов. Нечетное означает нечетное число. даже означает четное число

$("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);

})

在这里建议一下小伙伴们后面测试不要использоватьalertИграл。нас以后统一использовать：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();表示选в选项的valueценить

падать:

Давайте посмотрим на наш последний падать. Обратите внимание на раскрывающийся список, одиночный выбор. и多选直接就да找到选в选项就行,Но в раскрывающемся теге выбора все еще есть теги.,Мы хотим получить значение параметра option в select,Так что на этом месте нужно написать Уведомление.

var address = $("option:selected").val();получатьoptionЭтикетка的value属性ценить

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

var address = $("option:selected").html();optionЭтикетка可以直接这样получать到Этикетка内的网页文本。