Проект

Общее

Профиль

JQUERY » История » Версия 3

Александр Александров, 25.04.2019 15:43

1 1 Александр Александров
h1. JQUERY
2
3
h2. Вопросы
4
5
# Что такое jQuery?
6
# Какие преимущества jQuery?
7
# Чем отличаются JavaScript от jQuery?
8
# jQuery это библиотека для написания сценариев на стороне клиента или на стороне сервера?
9
# Является ли jQuery стандартом W3C?
10
# Как начать работать с jQuery?
11
# Что является отправной точкой начала выполнения кода в JQuery?
12
# Что означает знак доллара ($) в JQuery?
13
# Можем ли мы иметь несколько функций document.ready() на одной и той же странице?
14
# Можем ли мы использовать наш собственный символ вместо знака $ в JQuery?
15 2 Александр Александров
# Можно ли на стороне клиента использовать другие библиотеки, такие как MooTools, Prototype вместе с JQuery?
16
# Что такое jQuery.noConflict?
17 1 Александр Александров
# Какая разница между window.onload, document.ready() и $(function(){...});?
18
# Какая разница между jquery.js и jquery.min.js ?
19
# Что такое селектор в JQuery, какие типы селекторов вы знаете?
20
# Какие селекторы в JQuery самые быстрые?
21
# Как выбрать все элементы с id = idname
22
# Как выбрать все элементы div с id = idname
23
# Как выбрать все элементы с class = classname
24
# Как выбрать все элементы div с class = classname
25
# Как выбрать все span элементы в элементах div
26
# Как выбрать все div и span элементы
27
# Как выбрать предыдущий элемент от найденного
28
# Как выбрать следующий элемент от найденного
29
# Как выбрать все span элементы в элементах div, где span является прямым потомком div’a
30
# Как выбрать все span после первого элемента div?
31
# Как выбрать первый li в ul?
32 2 Александр Александров
# Как выбрать DIVы у которых нет класса CLS?
33 1 Александр Александров
# Как выбрать элементы с активной анимацией?
34
# Как выбрать div-ы которые содержат класс firstclass и класс secondclass?
35
# Как выбрать все div-ы с атрибутом title = test?
36
# Как выбрать все отмеченные чекбоксы?
37
# Как выбрать все input с type = radio?
38
# Как выбрать видимый div с именем red, который содержит тег span?
39
# Что выберет этот фільтр $("a[rel~= 'external ']"); ?
40
# Что выберет этот фільтр $("div[name=apple]:visible:has(p)"); ?
41
# Найти все элементы div с классом one, а также все элементы p с классом two, затем добавить им всем класс three и визуально плавно спустить вниз?
42
# Сделать так, чтобы при нажатии на элемент <а> алертом выводилось "Hello world!".
43
# Что быстрее document.getElementByID('txtName') или $('#txtName')?
44
# Какая разница между $(this) и 'this' в jQuery?
45
# Как проверить, что элемент пустой?
46
# Как проверить существует ли элемент в JQuery?
47
# Для чего используется функция jQuery ".each()"?
48
# Какая разница между $('div') и $('<div/>') в jQuery?
49
# Какая разница между parent(), parents(), closest() в jQuery?
50
# Какая разница между get() и eq() методами в jQuery?
51
# Как добавить анимацию в jQuery?
52
# Как отключить JQuery анимацию?
53
# Как остановить текущую запущенную анимацию в JQuery?
54
# В чем разница между методами .empty () .remove () и .detach () в JQuery?
55
# Какая разница между .bind() .live() .delegate() и .on()?
56
# Как создать клон объекта в JQuery?
57
# В чем разница между prop и attr?
58
# Что такое event.preventDefault?
59
# В чем разница между event.PreventDefault и event.stopPropagation?
60
# Как проверить есть переменная числом, используя JQuery 1.7+?
61
# Как проверить тип данных переменной в JQuery?
62
# Как привязать обработчик события к выбранному элементу, которое должно быть выполнено только один раз?
63
# Можно ли удерживать или задержать выполнение document.ready на некоторое время?
64
# Что такое цепочка методов в jQuery?
65
# Можем ли мы использовать JQuery, чтобы сделать AJAX запрос?
66
# Какими методами можно сделать AJAX запрос в JQuery?
67
# Что такое отсроченные(Deferred) объекты в jQuery?
68
# Что делает метод finish()?
69
# Можно ли не указывать протокол в URL когда jQuery ссылается на CDNs?
70
# Что такое jQuery плагины и какие преимущества их использования?
71 3 Александр Александров
# Что такое jQuery UI?
72 1 Александр Александров
73
h2. Ответы
74
75
h3. Что такое jQuery?
76
77 2 Александр Александров
jQuery - это быстрая, легковесная и многофункциональная JavaScript-библиотека (некоторые называют ее фреймворком), фокусирующаяся на взаимодействии JavaScript, HTML и CSS, с ее помощью легко сделать анимацию, добавить взаимодействие Ajax, манипулировать содержимим страницы, изменить стиль и обеспечить крутой UI-эффект. Это одна из самых популярных библиотек на стороне клиента. Она обеспечивает кроссбраузерную поддержку приложений (работает в Internet Explorer 6.0+, Mozilla Firefox 2+, Safari 3.0+, Opera 9.0+ и Chrome). Автор библиотеки Джон Резиг (John Resig) впервые представил свое творение в январе 2006.
78
79 1 Александр Александров
h3. Какие преимущества jQuery?
80
81 2 Александр Александров
Вот только некоторые преимущества jQuery:
82
83
* Существенно уменьшается количество кода (необходимого для работы скрипта) по сравнению с JavaScript, что в свою очередь означает меньше временных затрат и более читабельный код.
84
* Намного проще понять код (в отличии от JavaScript).
85
* Множество различных эфектов
86
* Использование Ajax становится намного проще.
87
* Кросс-браузерная совместимость
88
* Огромное количество плагинов, с помощью которых можно сделать практически все что угодно.
89
* Простота использования
90
* Очень удобная документация и активное комьюнити, готовое всегда оказать помощь при необходимости.
91
92 1 Александр Александров
h3. Чем отличаются JavaScript от jQuery?
93
94 2 Александр Александров
Javascript - это язык программирования, с помощью которого веб-страницам придается интерактивность. jQuery это библиотека, написанная на javascript.
95
96 1 Александр Александров
h3. jQuery это библиотека для написания сценариев на стороне клиента или на стороне сервера?
97
98 2 Александр Александров
На стороне клиента.
99
100 1 Александр Александров
h3. Является ли jQuery стандартом W3C?
101
102 2 Александр Александров
Нет jQuery не является стандартом W3C.
103
104 1 Александр Александров
h3. Как начать работать с jQuery?
105
106 2 Александр Александров
Первым делом Вам необходимо посетить главную страницу официального сайта jQuery и скачать наиболее свежую версию данного фреймворка. После необходимо закачать этот файл к себе, и в шапке документа прописать ссылку на этот файл.
107
108
<pre><code class="javascript">
109
<script type="text/javascript" scr="/jquery.js"></script>
110
</code></pre>
111
112
В качестве альтернативы, можно воспользоваться помощью Гугла и поставить ссылку на их сервер, где находятся всегда свежие версии любых фреймворков.
113
114 1 Александр Александров
h3. Что является отправной точкой начала выполнения кода в JQuery?
115
116 2 Александр Александров
Для выполнения нашего скрипта в jQuery, нам необходимо поместить весь наш скрипт в функцию. Эта функция будет выполнена при полной готовности DOM. Отправной точкой является функция $(document).ready(). Пример:
117
118
<pre><code class="javascript">
119
$(document).ready(function(){
120
    // Code here
121
});
122
</code></pre>
123
124
Объясню что этот код означает.
125
126
$() - это селектор, он позволяет выбрать нужный Вам HTML тег для дальнейшей манипуляции.
127
128
Мы выбираем элемент "document" - это основной элемент документа в браузере. ready() - это событие, оно срабатывает, в нашем случае, когда выбранный элемент "document" будет готов. Далее мы создаем функцию и вызываем в ней любой JavaScript/JQuery код.
129
130 1 Александр Александров
h3. Что означает знак доллара ($) в JQuery?
131
132 2 Александр Александров
$() - это селектор, он позволяет выбрать нужный Вам HTML тег для дальнейшей манипуляции. Также ($) ето псевдоним для JQuery. Простой пример:
133
134
<pre><code class="javascript">
135
$(document).ready(function(){
136
});
137
</code></pre>
138
139
здесь знак $ можно заменить ключевое слово "JQuery".
140
141
<pre><code class="javascript">
142
jQuery(document).ready(function(){
143
});
144
</code></pre>
145
146 1 Александр Александров
h3. Можем ли мы иметь несколько функций document.ready() на одной и той же странице?
147
148 2 Александр Александров
Да. Мы можем иметь любое количество функций document.ready() на одной и той же странице.
149
150 1 Александр Александров
h3. Можем ли мы использовать наш собственный символ вместо знака $ в JQuery?
151
152 2 Александр Александров
Да. Это вполне возможно, с использованием jQuery.noConflict().
153 1 Александр Александров
154 2 Александр Александров
h3. Можно ли на стороне клиента использовать другие библиотеки, такие как MooTools, Prototype вместе с JQuery?
155 1 Александр Александров
156 2 Александр Александров
Да.
157 1 Александр Александров
158 2 Александр Александров
h3. Что такое jQuery.noConflict?
159 1 Александр Александров
160 2 Александр Александров
Этот метод отключает использование $ в качестве переменной jQuery.jQuery.noConflict( [ removeAll ] ) removeAll - ето логическое значение, указывающее, нужно ли освобождать все имена переменных, занятые jQuery. По умолчанию false.
161
162
Многие другие javascript библиотеки, так же как и jQuery используют $ как имя переменной или функции. Однако, в случае jQuery, $ является синонимом (алиасом) идентификатора jQuery. Поэтому, при освобождении имени $ с помощью jQuery.noConflict() мы не теряем функциональности библиотеки jQuery, посколько можем использовать вместо него jQuery.
163
Мы можем отдать контроль над переменной $ другой библиотеке с помощью метода $.noConflict():
164
165
{{dmsf_image(349)}}
166
167
Эту технику удобно применить, если использовать сразу несколько библиотек:
168
169
{{dmsf_image(350)}}
170
171
создаём алиас на jQuery:
172
173
{{dmsf_image(351)}}
174
175 1 Александр Александров
h3. Какая разница между window.onload, document.ready() и $(function(){...});?
176
177 2 Александр Александров
onload - это событиев DOM, срабатывает после загрузки всего содержимого, включая и изображения, и прочее.
178
179
$(document).ready - возникает в момент готовности дерева DOM, то есть не ожидаетзагрузки изображений.
180
$(function(){...}); - это тоже самое, что $(document).ready(function () { ... });
181
182 1 Александр Александров
h3. Какая разница между jquery.js и jquery.min.js ?
183
184 2 Александр Александров
jquery.js (без приставки min в названии) - этот файл используется для разработки веб-сайтов и скриптов. Он представляет собой несжатый и легко читаемый Javascript код.
185
jquery.min.js (добавлена приставка min в название файла) - отличие этого файла от предыдущего в том, что этот файл является более компактным, т.к. в нем удалены:
186
187
* отступы
188
* переносы строк
189
* укорачиваются имена переменных.
190
191
Преимущества, объем очень значительно уменьшается. Что касается функциональности обоих файлов, то она одинакова. Функции одни и те же.
192
193 1 Александр Александров
h3. Что такое селектор в JQuery, какие типы селекторов вы знаете?
194
195 2 Александр Александров
Для работы с элементами на странице, сначала нам нужно их найти. Для того, чтобы найти HTML элемент в JQuery мы используем селекторы. Есть много типов селектор, основные из них селекторы:
196
197
* #ID - Соответствует единственному элементу с заданным атрибутом ID. element - Соответствует всем элементам с заданным именем.
198
* .class - Соответствует всем элементам данного класса.
199
* .class.class - Соответствует всем элементам данных классов.
200
* * - Соответствует всему.
201
* selector1, selector2, selectorN - Выводит результат в зависимости от комбинации указанных селекторов.
202
203 1 Александр Александров
h3. Какие селекторы в JQuery самые быстрые?
204
205 2 Александр Александров
Самыми быстрыми селекторами в JQuery являются ID и element селекторы.
206
207 1 Александр Александров
h3. Как выбрать все элементы с id = idname
208
209 2 Александр Александров
<pre>
210
$( '#idname ');
211
</pre>
212
213 1 Александр Александров
h3. Как выбрать все элементы div с id = idname
214
215 2 Александр Александров
<pre>
216
$( 'div#idname ');
217
</pre>
218
219 1 Александр Александров
h3. Как выбрать все элементы с class = classname
220
221 2 Александр Александров
<pre>
222
$( '.classname ');
223
</pre>
224
225 1 Александр Александров
h3. Как выбрать все элементы div с class = classname
226
227 2 Александр Александров
<pre>
228
$( 'div.classname ');
229
</pre>
230
231 1 Александр Александров
h3. Как выбрать все span элементы в элементах div
232
233 2 Александр Александров
<pre>
234
$( 'div span ');
235
</pre>
236
237
или так:
238
239
<pre>
240
$( 'div ').find('span ');
241
</pre>
242
243 1 Александр Александров
h3. Как выбрать все div и span элементы
244
245 2 Александр Александров
<pre>
246
$( 'div, span ');
247
</pre>
248
249 1 Александр Александров
h3. Как выбрать предыдущий элемент от найденного
250
251 2 Александр Александров
<pre>
252
$( '#banner ').prev();
253
</pre>
254
255 1 Александр Александров
h3. Как выбрать следующий элемент от найденного
256
257 2 Александр Александров
<pre>
258
$( '#banner ').next();
259
</pre>
260
261 1 Александр Александров
h3. Как выбрать все span элементы в элементах div, где span является прямым потомком div’a
262
263 2 Александр Александров
<pre>
264
$( 'div > span ');
265
</pre>
266
267 1 Александр Александров
h3. Как выбрать все span после первого элемента div?
268
269 2 Александр Александров
<pre>
270
$( 'div ~ span ');
271
</pre>
272
273 1 Александр Александров
h3. Как выбрать первый li в ul?
274
275 2 Александр Александров
<pre>
276
$( 'ul li:first-child ');
277
</pre>
278
279
h3. Как выбрать DIVы у которых нет класса CLS?
280
281
<pre>
282
$( 'div:not(.cls) ');
283
</pre>
284
285 1 Александр Александров
h3. Как выбрать элементы с активной анимацией?
286
287 2 Александр Александров
<pre>
288
$( 'div:animated ');
289
</pre>
290
291 1 Александр Александров
h3. Как выбрать div-ы которые содержат класс firstclass и класс secondclass?
292
293 2 Александр Александров
<pre>
294
$( 'div.firstclass ').filter('.secondclass ');
295
</pre>
296
297 1 Александр Александров
h3. Как выбрать все div-ы с атрибутом title = test?
298
299 2 Александр Александров
<pre>
300
$( "div[title= 'test '] ");
301
</pre>
302
303 1 Александр Александров
h3. Как выбрать все отмеченные чекбоксы?
304
305 2 Александр Александров
<pre>
306
$( 'input:checked ');
307
</pre>
308
309 1 Александр Александров
h3. Как выбрать все input с type = radio?
310
311 2 Александр Александров
$( 'input:radio ');
312
313 1 Александр Александров
h3. Как выбрать видимый div с именем red, который содержит тег span?
314
315 2 Александр Александров
<pre>
316
$( "div[name=red]:visible:has(span) ");
317
</pre>
318 1 Александр Александров
319 2 Александр Александров
h3. Что выберет этот фильтр $("a[rel~= 'external ']"); ?
320 1 Александр Александров
321 2 Александр Александров
Все <а> с атрибутом rel содержащим external в списке значений разделенных пробелом.
322
323
h3. Что выберет этот фильтр $("div[name=apple]:visible:has(p)"); ?
324
325
Выберет видимый div с именем apple, который содержит тег p.
326
327 1 Александр Александров
h3. Найти все элементы div с классом one, а также все элементы p с классом two, затем добавить им всем класс three и визуально плавно спустить вниз?
328
329 2 Александр Александров
<pre>
330
$("div.one").add("p.two").addClass("three").slideDown("slow");
331
</pre>
332
333 1 Александр Александров
h3. Сделать так, чтобы при нажатии на элемент <а> алертом выводилось "Hello world!".
334
335 2 Александр Александров
<pre><code class="javascript">
336
jQuery(function($) {
337
    $("a").click(function() {
338
        alert("Hello world!");
339
    });
340
});
341
</code></pre>
342
343
344 1 Александр Александров
h3. Что быстрее document.getElementByID('txtName') или $('#txtName')?
345
346 2 Александр Александров
JavaScript запрос всегда быстрее, так как для выбора txtName метод JQuery "$('#txtName')" делает вызов document.getElementById ('txtName').
347
348 1 Александр Александров
h3. Какая разница между $(this) и 'this' в jQuery?
349 2 Александр Александров
350
$(this), когда Вы собираетесь работать с объектом jQuery. Если же Вы хотите обратиться напрямую к объекту DOM, тогда Вам нужен именно this.
351
352
Стоит учитывать, что jQuery всегда возвращает массив, даже в том случае, если найден всего один элемент (тогда он будет первым, а точнее - нулевым элементом массива). Поэтому справедливым будет выражение $(this)[0] == this. Здесь важно понимать, что обращение к элементу jQuery по индексу в квадратных скобках вернёт не объект типа jQuery, а соответствующий ему объект DOM. Если же вы хотите из массива jQuery получить первый объект в виде jQuery-сущности, используйте для этого функцию eq().
353
354
<pre><code class="javascript">
355
$("#mydiv")[0] == document.getElementById("mydiv")
356
</code></pre>
357 1 Александр Александров
358
h3. Как проверить, что элемент пустой?
359
360 3 Александр Александров
Есть 2 способа, чтобы проверить пустой элемент или нет. Первый мы можем проверить это с помощью селектора ":empty".
361
362
{{dmsf_image(352)}}
363
364
И второй способ используя метод "$.trim()".
365
366
{{dmsf_image(353)}}
367
368 1 Александр Александров
h3. Как проверить существует ли элемент в JQuery?
369
370 3 Александр Александров
Используя свойство JQuery length, мы можем убедиться существует элемент или нет.
371
372
{{dmsf_image(354)}}
373
374 1 Александр Александров
h3. Для чего используется функция jQuery ".each()"?
375
376 3 Александр Александров
Функция .each() применяется непосредственно на коллекции jQuery. Она выполняет итерацию по каждому соответствующему элементу в коллекции и выполняет обратный вызов на этом объекте. Это означает, что каждый раз, когда выполняется указанная функция (а выполняется она один раз для каждого совпавшего элемента) ключевое слово 'this' указывает на конкретный элемент DOM. Помните, что слово 'this' НЕ указывает на объект jQuery. Кроме того, запущенная функция передает единственный аргумент, который показывает позицию элемента в составе набора совпавших элементов (integer, отсчет с 0).
377
378 1 Александр Александров
h3. Какая разница между $('div') и $('<div/>') в jQuery?
379
380 3 Александр Александров
$('<div/>') - создает новый элемент DIV, однако не добавляет его в DOM дерево.
381
$('div') - выбирает все div элементы, присутствующие на странице.
382
383 1 Александр Александров
h3. Какая разница между parent(), parents(), closest() в jQuery?
384
385 3 Александр Александров
.parent([selector]) - находит родителя строго на один уровень вверх. Пример: 
386
387
<pre>
388
$(this).parent()
389
</pre>
390
391
Для того чтобы получить родителя от родителя нужно применять цепочку вызовов (произвольной глубины): 
392
393
<pre>
394
$(this).parent().parent()....
395
</pre>
396
397
.parents([selector]) - возвращает список всех родительских узлов, и, может содержать селектор, для уточнения набора родителей. Пример: 
398
399
<pre>
400
$(this).parents("li.test")
401
</pre>
402
403
.closest(selector, [context]) - возвращает первый ближайший родительский узел или же текущий узел - которые удовлетворяют условию в селекторе (селектор обязательный). Может принимать контекст для уточнения поиска (набор узлов заранее выбранных).
404
405
Основные отличия его от .parents():
406
407
* может вернуть и текущий узел;
408
* обязательный селектор;
409
* возвращает только первый элемент который попал под условие, поиск ведется тоже вверх по дереву.
410
411
Пример: $(this).closest("li.test") или $(this).closest("li.test", itemsList)
412
413 1 Александр Александров
h3. Какая разница между get() и eq() методами в jQuery?
414
415 3 Александр Александров
Отметим различия методов get(i) и eq(i). Первый возвращает непосредственно DOMобъект элемента, идущего под номером i в наборе (кстати, нумерация начинается с 0). К такому элементу вы не сможете применить методы jQuery, зато сможете применить стандартные javascript методы. Метод eq(i) наоборот, возвращает i-й элемент в таком виде, что к нему можно применять методы jQuery. Вообще, для того, чтобы к элементам можно было применять методы библиотеки jQuery, они должны находиться в так называемом объекте jQuery, именно его возвращает функция $().
416
417 1 Александр Александров
h3. Как добавить анимацию в jQuery?
418
419 3 Александр Александров
Ключевым методом, на которой базируются все остальные, является метод animate(), с помощью которого можно задавать плавное изменение различных CSS-свойств: .animate(properties, [duration], [easing], [callback])
420
421
properties - список CSS-свойств, участвующих в анимации и их конечных значений. Задаются объектом, в формате {ключ:значение}, например:{opacity: 50, width: 100, height: 200}.
422
duration - продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд).
423
easing - изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). Задается строковым значением: "linear" и "swing" (для равномерной анимации и анимации с ускорением). Другие варианты можно найти в плагинах.
424
callback - функция, которая будет вызвана после завершения анимации. 
425
426
Пример. Пусть у нас есть элемент div с каким-нибудь текстом. Мы хотим плавно скрыть этот элемент, заменить текст, и плавно сделать элемент видимым:
427
428
{{dmsf_image(355)}}
429
430
значения "hide", "show" означают исчезновение и появление элемента, за счет параметра, к которому они применены.
431
432 1 Александр Александров
h3. Как отключить JQuery анимацию?
433
434 3 Александр Александров
Чтобы отменить выполнения всех анимаций используют "jQuery.fx.off". Установив это свойство в true, вы отключите все анимации, которые можно выполнять с помощью jQuery. Для того, что бы анимации заработали вновь, необходимо установить это свойство обратно в false. Простой пример:
435
436
{{dmsf_image(356)}}
437
438 1 Александр Александров
h3. Как остановить текущую запущенную анимацию в JQuery?
439
440 3 Александр Александров
Используя метод ".stop()". Он останавливает выполнение текущей анимации.
441
442 1 Александр Александров
h3. В чем разница между методами .empty () .remove () и .detach () в JQuery?
443
444 3 Александр Александров
.empty() - очищает содержание выбранных элементов, т.е. удаляет все узлы-потомки (включая тексты) из выбранных элементов, все обработчики событий и внутренние кэш-данные.
445
.remove() - удаляет все выбранные элементы из DOM (указанный элемент и всех его потомков)
446
.detach() - удаляет все выбранные элементы из DOM (указанный элемент и всех его потомков), но метод .detach() сохраняет данные jQuery, ассоциированные с удаляемым элементом и поэтому они могут быть восстановлены.
447
448 1 Александр Александров
h3. Какая разница между .bind() .live() .delegate() и .on()?
449
450 3 Александр Александров
.bind() - навешивает обработчик непосредственно на элемент (когда тот есть в DOMе). При удалении элемента так-же удаляется.
451
.live() - навешивает обработчик на document, используется делегирование (всплытие событий). Позволяет создать обработчик до того, как элемент появится в DOM-е. При удалении элумента обработчик не удаляется, а просто перестает срабатывать. Если в DOM снова вставить элемент, подходящий под селектор, обработчик снова отработает.
452
.delegate() - точно так-же, как и live, использует делегирование, только явно указывается узел, на который навешивается обработчик. (удобно для разработки модулей, или как их еще называют, виджетов).
453
.on() - объединяет возможности как bind, так и delegate (зависит от формы использования). Единый метод введен для того, чтобы не возникали вопросы какой метод использовать.
454
455 1 Александр Александров
h3. Как создать клон объекта в JQuery?
456
457 3 Александр Александров
Для клонирования в JQuery есть метод .clone() - создает полную копию выбранных элементов.
458
459
.clone( [withDataAndEvents] ) где withDataAndEvents - логическое значение, указывающее нужно ли копировать данные и обработчики событий у выбранных элементов. По умолчанию false. Пример:
460
461
{{dmsf_image(357)}}
462
463 1 Александр Александров
h3. В чем разница между prop и attr?
464
465 3 Александр Александров
.prop() - возвращает/изменяет значение свойств выбранных элементов.
466
.attr() - получает/устанавливает значение атрибутов выбранных элементов. Метод .prop() появился в версии 1.6, многие ошибочно используют метод .attr() для
467
доступа к свойствам элементов и модификации их значений. Дело в том, что с версии 1.6 .attr() работает непосредственно с атрибутом элемента и в некоторых случаях результат не совсем ожидаемый.
468
469
Например, если мы хотим узнать состояние чекбокса, то .attr() может выдать его значение по умолчанию (которое видно в исходниках HTML страницы). В этом случае нам нужно использовать метод .prop() - он вернет текущее значение свойства элемента.
470
471 1 Александр Александров
h3. Что такое event.preventDefault?
472
473 3 Александр Александров
В jQuery есть один интересный метод preventDefault(), который позволяет предотвратить возникновение "действия по умолчанию" для конкретного события. Например, если в разметке есть гиперссылка, но мы хотим использовать эту ссылку как кнопку button - т.е. без перехода по URL, заданному в атрибуте href, то используется как раз preventDefault(). После этого, всё, что необходимо сделать, - это добавить вызов preventDefault() в обработчик события клика мышью.
474
475 1 Александр Александров
h3. В чем разница между event.PreventDefault и event.stopPropagation?
476
477 3 Александр Александров
.event.preventDefault() - если будет вызван данный метод, то действие события по умолчанию не будет выполнено. К примеру, клик по ссылке не отправит пользователя по новому URL. Для определения, был ли вызван данный метод, можем воспользоваться функцией event.isDefaultPrevented().
478
479
.event.stopPropagation() - станавливает "всплытие" вызова события к родительским элементам. Данный метод работает для собственных событий, вызванных методом trigger(). Заметьте, что данный метод не будет применён к другим обработчикам событий.
480
481 1 Александр Александров
h3. Как проверить есть переменная числом, используя JQuery 1.7+?
482
483 3 Александр Александров
С помощью функции "IsNumeric()", которая была введена с JQuery 1.7.
484
485 1 Александр Александров
h3. Как проверить тип данных переменной в JQuery?
486
487 3 Александр Александров
С помощью $.type() - определяет класс заданного элемента (речь идет о внутренних классах javascript: string, boolean и т.д.). Функция имеет один вариант использования: 
488
489
$.type(Object) где Object - элемент, класс которого требуется определить.
490
491 1 Александр Александров
h3. Как привязать обработчик события к выбранному элементу, которое должно быть выполнено только один раз?
492
493 3 Александр Александров
Метод one() назначает обработчик одному или более событиям для каждого совпавшего элемента, который выполняется единожды. Обработчик запускается лишь раз для каждого элемента. Обработчик события принимает объект event, который можно использовать для предотвращения поведения по умолчанию. Пример:
494
495
{{dmsf_image(358)}}
496
497 1 Александр Александров
h3. Можно ли удерживать или задержать выполнение document.ready на некоторое время?
498
499 3 Александр Александров
Да это возможно. Начиная с версии 1.6 в jQuery появился новый метод ".holdReady()". Метод позволяет приостановить выполнение обработчиков события ready. jQuery.holdReady(hold) - где hold в случае true приостанавливает выполнение обработчиков события ready, в случае false - возобновляет.
500
501 1 Александр Александров
h3. Что такое цепочка методов в jQuery?
502
503 3 Александр Александров
Цепочкой методов называют последовательный вызов нескольких методов jQuery. Для удобочитаемости, цепочки часто пишут с переносами:
504
505
Например код:
506
507
{{dmsf_image(359)}}
508
509
с использованием цепочки методов данный код будет выглядеть так:
510
511
{{dmsf_image(360)}}
512
513 1 Александр Александров
h3. Можем ли мы использовать JQuery, чтобы сделать AJAX запрос?
514
515 3 Александр Александров
Да. JQuery может быть использована для создания Ajax запроса.
516
517 1 Александр Александров
h3. Какими методами можно сделать AJAX запрос в JQuery?
518
519 3 Александр Александров
Сделать AJAX запрос можно с помощью следующих методов:
520
521
* load() - загрузка HTML кода в необходимый нам DOM элемент на странице.
522
* $.getJSON() - загружает данные в формате JSON (удобней и быстрее нежели XML).
523
* $.getScript() - данная функция загружает и выполняет локальный JavaScript.
524
* $.get() - загружает страницу, используя для передачи данных GET запрос.
525
* $.post() - данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер посредством POST’а.
526
* $.ajax() - это самый основной метод, а все последующие методы лишь обертки для метода jQuery.ajax.
527
528 1 Александр Александров
h3. Что такое отсроченные(Deferred) объекты в jQuery?
529
530 3 Александр Александров
В версии jQuery 1.5 было внесено много изменений, однако, основные изменения коснулись внедрения объекта Deferred(), они помогают в обработке асинхронных функции, такие как Ajax.
531
Благодаря отложенным объектам, можно определять множество функций обратного вызова для какого-то результата, и любой из этих вызовов может быть использован после выполнения какой-либо задачи. Это может использоваться как в асинхронных, так и в обычных целях.
532
533 1 Александр Александров
h3. Что делает метод finish()?
534
535 3 Александр Александров
Метод finish() останавливает текущую анимацию, удаляет все очереди анимации и завершает все анимации для соответствующих элементов.
536
537 1 Александр Александров
h3. Можно ли не указывать протокол в URL когда jQuery ссылается на CDNs?
538
539 3 Александр Александров
ДА. КОД НИЖЕ ПОЛНОСТЬЮ РАБОЧИЙ.
540
541
{{dmsf_image(361)}}
542
543 1 Александр Александров
h3. Что такое jQuery плагины и какие преимущества их использования?
544 3 Александр Александров
545
jQuery плагин это часть кода, написанного в стандартном JavaScript файле. Эти файлы предоставляют полезные функции, которые могут быть использованы вместе с методами библиотеки jQuery. JQuery плагинины очень полезны, это части кода, которые уже кем-то написаны и могут быть использованы повторно, что позволяет экономить время разработки.
546
547
h3. Что такое jQuery UI?
548
549
jQuery UI - это библиотека виджетов и плагинов, основанная на JavaScript библиотеке jQuery, которую можно использовать для создания интерактивных веб-приложений.
Go to top