- Пишите меньше, делайте больше (используйте меньше кода, чтобы выполнять больше работы)
- Используйте селекторы CSS для поиска элементов (проще и удобнее)
- Используйте методы jQuery для управления элементами (решите проблемы совместимости браузера, примените ко всем элементам и примените несколько методов)
- Загрузите версию для разработки и сжатую версию jQuery
- Загрузить jQuery из CDN
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
window.jQuery ||
document.write('<script src="js/jquery-3.3.1.min.js"></script>')
</script>
Селектор
- / element / #id / .class / selector1, selector2
- предок потомок / родитель> потомок / предыдущий + следующий / предыдущие братья и сестры
- Фильтр
- Основные фильтры:: not (селектор) /: first /: last /: even /: odd /: eq (index) /: gt (index) /: lt (index) /: animated /: focus
- Фильтр содержимого:: содержит ('...') /: пустой /: родительский /: имеет (селектор)
- Фильтр видимости:: скрытый /: видимый
- Фильтр дочерних узлов:: nth-child (expr) /: first-child /: last-child /: only-child
- Фильтр атрибутов: [атрибут] / [атрибут = 'значение'] / [атрибут! = 'Значение'] / [атрибут ^ = 'значение'] / [атрибут $ = 'значение'] / [атрибут | = 'значение'] / [атрибут ~ = 'значение']
- Форма:: input /: text /: password /: radio /: checkbox /: submit /: image /: reset /: button /: file /: selected /: enabled /: disabled /: checked
- Манипуляции с контентом
- Получить / изменить содержимое: html()/ text()/ replaceWith()/remove()
- Получить / установить элемент: before()/ after()/ prepend()/ append()/ remove()/ clone()/ unwrap()/ detach()/ empty()/add()
- Получить / изменить атрибуты: attr()/ removeAttr()/ addClass()/ removeClass()/css()
- Получить / установить значение формы:val()
- Найти операцию
- Метод поиска: find()/ parent()/ children()/ siblings()/ next()/ nextAll()/ prev()/prevAll()
- Фильтр: filter()/ not()/ has()/ is()/contains()
- Индекс:eq()
- Размер и положение
- В зависимости от размера: height()/ width()/ innerHeight()/ innerWidth()/ outerWidth()/outerHeight()
- Связано с местоположением: offset()/ position()/ scrollLeft()/scrollTop()
- Спецэффекты и анимация
- Базовая анимация: show()/ hide()/toggle()
- Исчезли: fadeIn()/ fadeOut()/ fadeTo()/fadeToggle()
- Эффект скольжения: slideDown()/ slideUp()/slideToggle()
- Пользовательский: delay()/ stop()/animate()
- мероприятие
- Загрузка документа: ready()/load()
- Взаимодействие с пользователем: on()/off()
<script>
$(document).ready(function() {
});
</script>
<script>
$(function() {
});
</script>
- jQuery Validation
- jQuery Treeview
- jQuery Autocomplete
- jQuery UI
Ситуация с введением сначала других библиотек, а затем jQuery.
<script src="other.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
jQuery(function() {
jQuery('div').hide();
});
</script>
Ситуация, когда сначала вводится jQuery, а затем вводятся другие библиотеки.
<script src="jquery.js"></script>
<script src="other.js"></script>
<script>
jQuery(function() {
jQuery('div').hide();
});
</script>