Основные понятия jQuery
Цель обучения: Научиться использовать jQuery, освоить общий API jQuery и использовать jQuery для достижения общих результатов.
Зачем изучать jQuery?
[01 – Разрешить div отображать и устанавливать содержимое. html ]
В разработке с использованием javascript есть много недостатков:
1. There are too few ways to find elements. 2. Traversing pseudo-arrays is cumbersome and usually involves nesting a large number of for loops. 3. Compatibility issues. 4. It's also troublesome to achieve simple animation effects. 5. Code redundancy.
Первый опыт работы с jQuery
[02 – Разрешить div отображать и устанавливать содержимое. html]
$(document).ready(function () {
$("#btn1").click(function () {
// Implicit iteration: Stealth traversal. In jQuery, you don't need to write for loops manually, but traversal automatically.
$("div").show(200);
});
$("#btn2").click(function () {
$("div"). text ("I am content");
});
});Преимущества сводятся к следующему:
1. The methods of finding elements are various and flexible. 2. The implicit iteration feature eliminates the need for handwritten for loops. 3. There is no compatibility problem at all. 4. The realization of animation is very simple, and the function is more powerful. 5. The code is simple and rough.
Что такое jQuery?
Официальный сайт Jquery http://jquery .com/
jQuery-это библиотека JS, которая проще в использовании, чем JavaScript.
Библиотеки JS: запишите некоторые часто используемые методы в отдельный файл JS и используйте его непосредственно для ссылки на файл JS. (оживление. js, общий. js)
Мы знаем, что jQuery на самом деле является файлом JS, который инкапсулирует множество методов, облегчающих нашу разработку. На самом деле, jQuery-это расширенная версия common. js, поэтому мы изучаем jQuery, на самом деле, это изучение множества методов, инкапсулированных в JS – файле jQuery.
Функция ввода jQuery
Три шага для использования jQuery:
1. Introducing jQuery files 2. Entry function 3. Functional Realization
О функции ввода jQuery:
// The first way of writing
$(document).ready(function() {
});
// The second way of writing
$(function() {
});Контраст между функцией ввода jQuery и функцией ввода JS
1. JavaScript entry functions are not executed until all resources (including images and files) on the page are loaded. 2. jQuery's entry function only waits for the document tree to load and then starts to execute. It does not wait for the images and files to load.
Различия между объектами jQuery и объектами DOM (выделено)
- Объект DOM: Объект, возвращаемый элементом на странице, является объектом DOM, использующим метод в JavaScript.
- Объект jQuery: объект jQuery должен использовать метод jQuery для получения элементов на странице, возвращаемых объектом, является объектом jQuery.
- Объекты jQuery на самом деле являются наборами-оболочками объектов DOM (наборы-оболочки объектов DOM (псевдо-массивы))
- Методы объектов DOM и объектов jQuery нельзя смешивать.
Объекты DOM преобразуются в объекты jQuery: [ассоциативная память: трата денег]
var $obj = $(domObj);
// Document. ready (function () {}); is a typical DOM object to jQuery objectОбъекты jQuery преобразуются в объекты DOM:
var $li = $("li");
// The first method (recommended)
$li[0]
// The second method
$li.get(0)селектор
Что такое селектор jQuery
Селектор jQuery-это набор методов, предоставляемых jQuery для облегчения получения элементов на странице. Примечание: Селектор jQuery возвращает объект jQuery.
Существует множество селекторов jQuery, в основном совместимых со всеми селекторами от CSS 1 до CSS3, и jQuery также добавляет множество более сложных селекторов. [Просмотр документов jQuery]
Существует много селекторов jQuery, но селекторы могут заменять друг друга, то есть, чтобы получить элемент, у вас будет много способов его получить. Поэтому то, что мы действительно можем использовать в нашей повседневной жизни, – это лишь некоторые из наиболее часто используемых селекторов.
Базовый селектор
Резюме: То же, что и селектор CSS.
Иерархический селектор
Это точно то же самое, что и селектор CSS.