jQuery
js библиотека: библиотека, инкапсулированные функции. В нем есть много готовых методов.
jQuery разработан для упрощения быстрой работы с DOM. Он инкапсулирует множество методов, и впоследствии вы можете вызывать эти методы с помощью объекта jQuery.
Изучение jQuery — это обучение вызову инкапсулированных в него функций.,Он оптимизирует манипулирование DOM, обработку событий, дизайн анимации и взаимодействие Ajax. В основном совместим с основными браузерами. Цепное программирование, неявная итерация, поддержка разработки расширений плагинов,легкий、бесплатно、Открытый исходный код.
Его цель: писать меньше и делать больше.
Скачать адрес:https://jquery.com/
Рекомендуется скачать версию 3.X.
Щелкните правой кнопкой мыши сразу после нажатияСохранить страницу как…Вот и все,Наконец, добавьте скачанный файл в проект середина.
<body>
<script>
// $('div').hide();
// 1. После загрузки DOM страницы выполните js-код.
// $(document).ready(function() {
// $('div').hide();
// })
// 2. После загрузки DOM страницы выполните js-код.
$(function() {
$('div').hide();
})
</script>
<div>114514</div>
</body>
$(function() {
......//Вход после завершения загрузки DOM (рекомендуется)
})
$(document).ready(function() {
......//Вход, где завершена загрузка DOM
})
$
`это jQuery Псевдоним,В коде середина` и jQuery и цене ожидания,Это все для удобства$
。
`это Объект верхнего уровня jQuery эквивалентен окну Роднойjsсередина. Элемент упаковывается в объект jQuery через ` и вызывает свойства jQuery. и методы.
<script>
// 1. $ Является псевдонимом для jQuery (псевдоним)
// $(function() {
// alert(11)
// });
//jQuery и $ взаимозаменяемы. Для удобства обычно это $.
jQuery(function() {
// alert(11)
// $('div').hide();hide — метод, инкапсулированный jQuery;
jQuery('div').hide();
});
</script>
Объекты jQuery и объекты DOM
Объект, полученный с использованием собственного js, является объектом DOM, а объект, полученный с помощью метода jQuery, — объектом jQuery.
jQuery инкапсулирует собственные методы DOM. Объекты jQuery могут использовать только методы jQuery, тогда как объекты DOM используют собственные свойства и методы JavaScript.
<script>
//DOM-объект, полученный с помощью Роднойjs
var div = document.querySelector('div');
console.dir(div);
// $('div') — это jQuery объект
$('div');
console.dir($('div'));
</script>
Вывод консоли:
jQuery Объекты можно использовать только jQuery Свойства и методы. Например: Подключите приведенный выше код:
div.style.display='none';
//да РоднойjsМетод, ДОМобъект можно назвать Но: $('div').style.display='none';//Этот код неправильный, jQuery Объекты можно использовать толькоjQuery Метод инкапсуляции. Итак, jQuery Он просто инкапсулирует общие свойства и методы js. DOM использует собственные методы и свойства js, jQuery. Использование jQuery Свойства и методы.
Преобразование jQuery в DOM (два метода, индекс — это номер индекса):
<script>
var div = document.querySelector('div');
$('div')[0].hide()
$('div').get(0).hide()
</script>
DOMпреобразован вjQuery:
//Получаем элемент напрямую
$('дел');
В нативном JS существует множество способов получения элементов, которые очень сложны и имеют противоречивую совместимость. Поэтому jQuery инкапсулировал их для нас, чтобы сделать получение элементов унифицированным и стандартным.
$("селектор") //Записываем селектор прямо внутри CSS Просто используйте селектор, но вам нужно добавить кавычки
Метод получения такой же, как и в родном js:
Как установить стили с помощью jQuery:
$('div').css('свойство', 'ценить')
for instance:(Set the color for all the LI under UL)
$("ul li").css("color", "red");
Неявная итерация: процесс обхода внутренних элементов DOM (хранящихся в форме псевдомассива).
Например: установите для многих LI в UL красные шрифты.
Непосредственно $("ul li").css("color", "red");//Неявная итерация автоматически проходит каждый LI.
for instance:(Get the first LI under UL)
$("ul li:first").css("color", "red");
метод фильтра jQuery
Ключевые моменты, которые следует запомнить:
родитель()//Найди своего биологического отца
Children()//Найти биологического сына
find()//Найти потомков
siblings()//Найти братьев
eq()
jQuery может использовать методы CSS для изменения простых стилей элементов.
>$(this).css(''color'');
>$(this).css(''color'', ''red'');
>$(this).css({
"width": "400px",
height: 400,
"color":"white",
"font-size":"20px"
>});
Эта функция аналогична предыдущей функции classList, которая может управлять стилями классов. Будьте осторожны, не добавляйте точки к параметрам в классе операции.
$(“div”).addClass(''example'');
$(“div”).removeClass(''example'');
$(“div”).toggleClass(''example'');
==Внимание: разница между операцией класса и именем класса== В собственном JS className перезапишет исходное имя класса в элементе. Операции с классами в jQuery работают только с указанным классом и не влияют на исходное имя класса.
Доступно наAPIдокументсередина Запросить конкретное использование:https://jquery.cuishifeng.cn/
jQuery инкапсулирует множество эффектов анимации, например:
1.Дисплей
// (1) скорость: строка («медленная», «нормальная», or «быстро») или значение в миллисекундах, указывающее продолжительность анимации (например, 1000).
//(2)easing:(Optional)Используется для указания эффекта переключения. По умолчанию установлено значение «качание», а доступным параметром является «линейный».
//(3)fn:Функция обратного вызова — функция, которая выполняется после завершения анимации один раз для каждого элемента.
show([speed,[easing],[fn]]);//середина скобки указывают на то, что этот параметр можно опустить и отображать напрямую без анимации
2.Скрыть
// (1) скорость: строка («медленная», «нормальная», or «быстро») или значение в миллисекундах, указывающее продолжительность анимации (например, 1000).
//(2)easing:(Optional) Используется для указания эффекта переключения. По умолчанию установлено значение «качание», а доступным параметром является «линейный».
//(3)fn: функция обратного вызова, функция, выполняемая после завершения анимации, выполняется один раз для каждого элемента
hide([speed,[easing],[fn]]);//середина скобки указывают на то, что этот параметр можно опустить и отображать напрямую без анимации
3. Переключить отображение и скрыть
toggle([скорость,[ослабление],[fn]];
Смысл параметров тот же, что и для отображения и скрытия параметров.
1. снижение
слайдDown([скорость,[ослабление],[fn]];
2. Каминаме
слайдUp([скорость,[ослабление],[fn]];
3. Слайд для переключения
слайдToggle([скорость,[ослабление],[fn]];
==переключение событий==
//(1)over: функция, которая будет запускаться при перемещении мыши к элементу (эквивалент mouseenter)
//(2) out: функция, которая будет запущена, когда мышь выходит за пределы элемента (эквивалент mouseleave)
//(3) Если вы напишете только одну функцию, она будет срабатывать, когда мышь пройдет или уйдет.
hover([over,]out);
for instance:(The drop-down menu of the navigation bar).
Эффект реализации:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 0 auto;
height: 40px;
border-bottom: 1px solid red;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid red;
border-right: 1px solid red;
}
.nav ul li {
border-bottom: 1px solid red;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<ul class="nav">
<li>
<a href="#">Навигация первая</a>
<ul>
<li>
<a href="">личное сообщение</a>
</li>
<li>
<a href="">Комментарий</a>
</li>
<li>
<a href="">@я</a>
</li>
</ul>
</li>
<li>
<a href="#">Навигация 2</a>
<ul>
<li>
<a href="">личное сообщение</a>
</li>
<li>
<a href="">Комментарий</a>
</li>
<li>
<a href="">@я</a>
</li>
</ul>
</li>
<li>
<a href="#">Навигация третья</a>
<ul>
<li>
<a href="">личное сообщение</a>
</li>
<li>
<a href="">Комментарий</a>
</li>
<li>
<a href="">@я</a>
</li>
</ul>
</li>
<li>
<a href="#">Навигация четыре</a>
<ul>
<li>
<a href="">личное сообщение</a>
</li>
<li>
<a href="">Комментарий</a>
</li>
<li>
<a href="">@я</a>
</li>
</ul>
</li>
</ul>
<script>
$(function() {
......
})
</script>
</body>
</html>
Есть много способов написать часть jQuery:
//Мышь проходит и скользит вниз
$(".nav>li").mouseover(function() {
$(this).children("ul").slideDown(200);
});
//Мышь уходит и скользит вверх
$(".nav>li").mouseout(function() {
$(this).children("ul").slideUp(200);
});
//переключение событий hover Это сложный метод письма для перехода и выхода из мыши. Эти две функции соответствуют переходу и выходу.
$(".nav>li").hover(function() {
$(this).children("ul").slideDown(200);
}, function() {
$(this).children("ul").slideUp(200);
});
Упростите запись метода переключения событий: напишите только одну функцию. Эта функция будет срабатывать, когда мышь пройдет и уйдет.
$(".nav>li").hover(function() {
$(this).children("ul").slideToggle();
});
Ошибка в приведенном выше методе записи: быстро пройти и уйти, а анимация навигации ждет окончания одного, прежде чем начнется другой.
Решение: очередь анимации (анимация или эффект будут выполняться после запуска. При многократном запуске несколько анимаций или эффектов будут поставлены в очередь для выполнения).
Решение:хватит стоять в очереди
//(1)Метод stop() используется для остановки анимации или эффекта.
//(2) Примечание: функция stop() записывается перед анимацией или эффектом, что эквивалентно остановке и завершению последней анимации. Выполняйте только последнюю версию.
stop();
Полный код:
$(".nav>li").hover(function() {
// stop Метод должен быть записан в начале анимации, чтобы завершить последнюю анимацию.
$(this).children("ul").stop().slideToggle();
});
Это изменение прозрачности с 0 на 1.
//Параметры соответствуют указанным выше
(1) скорость: строка («медленная», «нормальная» или «быстрая») или значение в миллисекундах, указывающее продолжительность анимации (например: 1000). (2) плавность: (необязательно) используется для указания эффекта переключения. По умолчанию используется «качание», а доступный параметр — «линейный». (3) fn: функция обратного вызова, функция, выполняемая после завершения анимации, выполняемая один раз для каждого элемента.
1.Аканири
FadeIn([скорость,[ослабление],[fn]];
2. исчезнуть
FadeOut([скорость,[ослабление],[fn]];
3. Переключение плавного появления и исчезновения
FadeToggle([скорость,[ослабление],[fn]];
Постепенно настраивается на заданную непрозрачность
//opacity Прозрачность, значение 0~1
fadeTo([[speed],opacity,[easing],[fn]];
//params: атрибуты стиля, которые вы хотите изменить,Поставляется в форме объекта. Имена атрибутов не нуждаются в кавычках.,еслида Составные атрибуты должны быть
Номенклатура корпуса CamelCase границаслева. Все остальные параметры можно опустить.
animate(params,[speed],[easing],[fn];
Внутренние атрибуты элемента — это атрибуты, которые входят в состав самого элемента, например: a
внутри элемента href ,например input
внутри элемента type。
1. Получите
опора('свойство');
2. Настройки
prop('свойство', 'Значение атрибута');
Атрибуты, добавляемые самими пользователями к элементам, называются пользовательскими атрибутами. Например, добавьте index = «1» в div.
1. Получите
атрибут('атрибут'); // похожий Родной getAttribute()
2. Настройки
attr('атрибут', 'Значение атрибута'); // похожий Родной setAttribute()
Данные кэша данных()
Метод data() может получить доступ к данным указанного элемента и не изменяет структуру элемента DOM. По сути, они хранятся в кеше элементов. После обновления страницы все ранее сохраненные данные будут удалены.
1.Сохранить данные
data('name','value'); // Добавить данные к выбранным элементам
//Например:$('span').data('uname','roydon');
2. Получить данные
date('name'); //Получить числовые данные,При получении индекса данных пользовательского атрибута H5,Просто напишите индекс напрямую
В основном для операций с содержимым элемента и значениями формы.
1. Получитесодержимое элемента
html()
2. Настройкисодержимое элемента
html("содержание")
1. Получите
text()
2. Настройки
текст("текстовое содержимое")
1. Получите
val()
2. Настройки
вал("содержание")
Соблюдайте два десятичных знака:toFixed(2);
Неявная итерация jQuery может выполнять одну и ту же операцию только с элементами одного и того же типа.
Траверсные элементы можно сделать, чтобы дать каждому элементу добавить в различных операциях.
Грамматика 1:
//index порядковый номер элемента
//domEle дакаждыйDOMэлементобъект(Нетjqueryобъект);Месток Чтобы использоватьjqueryметод,Это должно бытьdomэлемент Преобразовать вjqueryобъект $(domEle)
$("div").each(function (index, domEle) {
......
});
Например: подсчитайте сумму содержимого трех элементов div.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
<script src="./jquery.min.js"></script>
<script>
$(function () {
var sum = 0;
$('div').each(function (index, domEle) {
console.log(index);
console.log(domEle);
sum += parseInt($(domEle).text());
})
console.log(sum);
})
</script>
</head>
<body>
<div>2</div>
<div>3</div>
<div>5</div>
</body>
</html>
результат:
Грамматика 2:
//$.each()метод Может использоваться для перебора любогообъект。В основном используется для обработки данных,напримермножество,объект
//index порядковый номер элемента;element Просмотр содержимого (элементов)
$.each(object,function (index, element) {
......
});
Например: пройти через объект {имя: "ройдон", возраст: 20}
$(function () {
var user = { name: "roydon", age: 20 };
$.each(user, function (i, ele) {
//i — имя атрибута ele; — значение атрибута. При обходе массива i это нижний индекс; как ценность
console.log(i + " : " + ele);
})
})
результат:
$("<li></li>");
На данный момент он просто создается, а не добавляется к элементу страницы.
1.внутреннийдобавить в(добавить в Отношения между отцом и сыном оригинального элемента Ченга после инцидента
element.append(''content'');//Помещаем содержимое в конец соответствующего элемента, аналогично Родному appendChild。
element.prepend(''content'');//Помещаем содержимое перед соответствующим элементом.
2.внешнийдобавить в(добавить в Более поздние отношения с оригинальным элементом братьев Ченг
element.after(''content'');//Помещаем содержимое за целевой элемент
element.before(''content'');//Помещаем содержимое перед целевым элементом
element.remove();//Удалить соответствующий элемент (сам)
element.empty();//Удалить все дочерние узлы соответствующего набора элементов середина
element.html('');//Очистить содержимое соответствующего элемента или установить содержимое
Например: элементы следующие:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
1.$(“ul”).remove(); результат: ul и li удалены.
2.$("ul").empty(); результат: очистить все ли в ul; аналогично:
Когда параметр пуст, получается значение; когда параметр не пуст, устанавливаются ширина и высота;
Например:
$("div").width();//Получаем ширину div
$ ("Div")
Существует три основные позиции: offset(), Position(), ScrollTop()/scrollLeft().
1.offset() устанавливает или получает смещение элемента
2.position() получает смещение элемента
3.scrollTop()/scrollLeft() устанавливает или получает заголовок и левую часть элемента при его прокрутке.
Событие практически такое же, как и первоначальное.
Например, наведение курсора мыши, наведение курсора мыши, размытие, фокус, изменение, нажатие клавиши, нажатие клавиши, изменение размера, прокрутка (прокрутка страницы) и т. д.
грамматика:
element.событие(function(){})
Например:
$(“div”).click(function(){
//обработка событийпрограмма
})
1.обработка событий on() обязательностьсобытиев сопоставленииэлементначальствообязательностьодно или несколько событийизобработка событийфункция。
//1. events: Один или несколько типов событий, разделенных пробелами, например «щелчок» или «наведение курсора мыши». 。
//2. selector: Селектор дочернего элемента элемента.
//3. fn: функция обратного вызова То есть функция прослушивания привязана к элементу.
element.on(events,[selector],fn);
🔸Когда on() связывает несколько событий:
$(“div”).on({
mouseover: function(){}, //событие1
mouseout: function(){}, //событие2
click: function(){} //событие3
});
//Если mouseoverсобытие и mouseoutсобытие имеют одну и ту же программу ответа, запишите их вместе, разделив пробелами.
//$(“div”).on(“mouseover mouseout”, function() {
// ......
//});
🔸Делегация мероприятия:
// обработка li делегируется родительскому ul,У каждого ли в нем есть щелчок
$('ul').on('click', 'li', function() {
alert('Привет, мир!');
});
Примечание. Делегирование событий теперь в основном записывается в виде ⬆️: Преимущество состоит в том, что при динамическом создании элемент, вы можете динамически и автоматически привязывать его к событию
Например:olвнутридобавить vli и динамически привязать событие
$("ol").on("click", "li", function() {
alert('hello world!');
})
var li = $("<li>Создано позжеизli</li>");
$("ol").append(li);
2.обработка событий off() Событие отмены привязки можно удалить с помощью on() методдобавить визобработка событийпрограмма。
Если вы хотите, чтобы событие запускалось только один раз, вы будете использовать событие отмены привязки. (Вы также можете изменить on() связанного события на one(), чтобы указать, что событие запускается только один раз)
$("p").off(); // Отменить привязку всех p элементов обработки событийпрограмма
$("p").off( "click"); // Нажмите на событие отмены привязки элемента p.
$("ul").off("click", "li"); // Отменить привязку делегата события
3. Автоматически запускать события trigger()
Ожидается, что некоторые события будут запускаться автоматически, например, функция автоматического воспроизведения изображения карусели аналогична нажатию кнопки справа. Вы можете использовать таймер для автоматического запуска события щелчка правой кнопки без необходимости щелчка мышью.
Например, элемент div автоматически запускает событие щелчка:
$(function() {
$("div").on("click", function() {
$(this).css("background","red")
});
// Событие автоматического нажатия триггера
// Способ первый: элемент.событие() // $("div").click(); запустит поведение элемента по умолчанию.
// Способ второй: элемент.trigger("событие") // $("div").trigger("click"); запустит поведение элемента по умолчанию.
// Способ третий: элемент.triggerHandler("событие") Это просто не вызовет поведение элемента по умолчанию.
$("div").triggerHandler("click");
});
Когда событие срабатывает, возникает объект eventevent.
element.on(events,[selector],function(event) {
//Предотвратить поведение по умолчанию: event.preventDefault() или return false;
//Прекратим пузыриться: event.stopPropagation()
})