Форум » Ленточный вариант форума
Новые сообщения
31
Форум: Базовое знакомство с jQuery | Тема: Выборки jQuery: два принципа
Автоматические циклы

Задача: выбрать изображения на странице, а затем скрыть их.

Как это происходит, если вы используете объектную модель документа?
Выбрать изображения -> создать цикл -> пройти циклом каждый из выбранных узлов -> произвести какие-то действия с этими узлами.

В библиотеке jQuery есть встроенная функция hide(), которая автоматически создаёт цикл. Например, чтобы скрыть все изображения в блоке с идентификатором slideshow:

Код
$('#slideshow img').hide();


и сколь бы большим не был список получившейся выборки, функция hide() автоматически пройдёт через весь список и скроет каждую картинку.

Изменить / Удалить

32
Форум: Базовое знакомство с jQuery | Тема: Выборки jQuery: два принципа
Делая выборку элементов с помощью объекта jQuery, вы не получите в итоге традиционного списка узлов объектной модели документа, вы получаете выборку, применимую только в jQuery.

Элементы выборки "не понимают" традиционных методов объектной модели.

В отличие от DOM, jQuery использует два необычных принципа: автоматические циклы и связывание функций.

Изменить / Удалить

33
Форум: Базовое знакомство с jQuery | Тема: Фильтры jQuery
Фильтры :first и :last выбирают первый и последний элемент группы.
Например, чтобы выбрать первый абзац на странице:

Код
$('p:first');


чтобы выбрать последний:

Код
$('p:last');


Фильтр :not() выбирает элементы, не соответствующие данному типу селектора, то есть вы сообщаете фильтру :not() имя селектора, который нужно игнорировать. Например, нужно найти все элементы a, кроме тех, у которых есть класс .button

Код
$('a:not(.button)');


или, к примеру, чтобы найти все ссылки, начинающиеся не с http://

Код
$('a:not([href^ = "http://"])');


Фильтр :has() - находит элементы, содержащие другой селектор.
Например, нужно найти все элементы li, внутри которых есть элемент a:

Код
$('li:has(a)');


Фильтр :contains() - находит элементы, содержащие конкретный текст.
Например, найдём все ссылки с текстом "Читать далее"

Код
$('a:contains(Читать далее)');


Фильтр :hidden - находит все скрытые элементы, для которых в CSS-свойствах установлено

Код
display: none;


а также элементы, скрытые с помощью jQuery функции hide(), элементы с нулевой высотой и шириной и скрытые элементы форм.
Элементы, у которых для свойства visibility присвоено значение invisible, данным фильтром не находятся.

Допустим, есть несколько скрытых блоков div. Вы можете их найти с помощью фильтра, а затем сделать видимыми с помощью jQuery:

Код
$('div:hidden').show();


Фильтр :visible, в противоположность фильтру :hidden, находит на странице видимые элементы.

Изменить / Удалить

34
Форум: Базовое знакомство с jQuery | Тема: Фильтры jQuery
С помощью фильтров jQuery вы можете находить элементы с определённым содержимым, текстом, скрытые элементы, а также элементы, не соответствующие данному селектору.

Выборка jQuery - это список элементов, соответствующих указанному селектору.
Каждый элемент выборки имеет индекс, и как и у массивов, индексация начинается с нуля.


Чтобы использовать фильтр, пишем основной селектор, затем двоеточие и название фильтра, например:

Код
$('tr:even')


найдёт все чётные строки в таблице.

Или более обозначенный фильтр: найдём все чётные строки таблицы, имеющей определённый класс, например .stripped

Код
$('.stripped tr:even')


Фильтр :odd выбирает все нечётные элементы выборки. Например:

Код
$('tr:odd')


выбирает все нечётные строки таблицы.

Изменить / Удалить

35
Форум: Базовое знакомство с jQuery | Тема: Выбор элементов страницы: подход jQuery
Селекторы атрибута

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

Селектор атрибута добавляется после имени элемента, чей атрибут вы проверяете. Например:

Код
$('img[alt]')


найдёт все элементы img, имеющие атрибут alt.

Рассмотрим различные селекторы атрибута:

[attribute] - выбирает элементы, имеющие указанные в HTML-коде атрибуты.
Например:

Код
$('a[href]')


найдёт все элементы a, имеющие набор атрибутов href.

[attribute ="value"] - выбирает элементы с определённым атрибутом и конкретным значением.
Например:

Код
$('input[type = "text"]')


найдёт все текстовые поля в форме

[attribute^ ="value"] - находит все элементы, у которых атрибут начинается с определённого значения, например:

Код
$('a[href^ = "http://"]')


или еще пример:

Код
$('a[href^ = "mailto:"]')


[attribute$ ="value"] - находит все элементы, у которых атрибут заканчивается определённым значением, например:

Код
$('a[href$ = ".pdf"]')


выберет все ссылки на pdf-файлы.

[attribute* ="value"] - выберет все элементы с атрибутом, в любом месте которого содержится определённое значение.
Например, можно найти любые ссылки, ведущие на сайт yandex.ru:

Код
$('a[href* = "yandex.ru"]')


найдёт все ссылки вида: http://yandex.ru, http://www.yandex.ru, www.yandex.ru/news.html и т.д.

Изменить / Удалить

36
Форум: Базовое знакомство с jQuery | Тема: Выбор элементов страницы: подход jQuery
Специальные селекторы

Селекторы потомков - позволяют указывать на элемент, который находится внутри другого элемента

Как работает? Например, у вас есть неупорядоченный список с идентификатором 'menu' на странице:

Код
<ul id = "menu">
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>


Вам нужно выбрать все элементы 'a' только этого списка.
Команда:

Код
$('a')


в данном случае не годится, поскольку выберет абсолютно все элементы 'a' страницы. А поможет нам в этом как раз селектор вложенности:

Код
$('#menu a')


Дочерние селекторы - указывают на элемент, являющийся прямым потомком другого элемента.

Например, в коде страницы:

Код
<body class = "home">
<h1 id="header">Заголовок</h1>
<р>Какой-нибудь <strong>вaжный</strong> текст</р>
</body>
</html>


элементы h1 и p являются дочерними элементами по отношению к элементу body, а вот элемент strong нет.

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

Код
$('body > p')


Cоседние родственные селекторы - позволяют выбрать элемент, идущий сразу после другого элемента
Например, в коде страницы есть заголовок и сразу после него блок:

Код
<h1>Заголовок статьи</h1>
<div>Здесь какой-то текст</div>


чтобы создать родственный селектор, добавляем знак '+' между селекторами:

Код
$('h1 + div')


будет выбран селектор справа(div), но только если в коде он идёт после селектора, указанного слева(h1).

Изменить / Удалить

37
Форум: Базовое знакомство с jQuery | Тема: Выбор элементов страницы: подход jQuery
С помощью jQuery можно выбирать один или более элементов с помощью специальной команды объект jQuery.
Основной синтаксис такой:

Код
$('селектор')


Селекторы идентификаторов

Можно выбрать любой элемент страницы, имеющий идентификатор, используя jQuery и CSS-селектор идентификатора.

К примеру, нужно выбрать элемент с id = 'banner':

Код
$('#banner')


или, допустим, есть такой HTML-код:

Код
<p id = "message">Специальное сообщение</p>


выбираем элемент по его идентификатору и, к примеру, сохраняем его в переменную:

Код
var messagePara = $('#message');


Селекторы элементов

Полный список селекторов, поддерживаемых библиотекой jQuery можно посмотреть здесь.

Например, чтобы выбрать все элементы 'a' на странице:

Код
var linkList = $('a');


Селекторы классов

Например, чтобы выбрать все элементы с определённым именем класса, например, все элементы с классом 'button':

Код
$('.button')

Изменить / Удалить

38
Форум: Базовое знакомство с jQuery | Тема: Работа с содержимым страниц с помощью JavaScript
Способы выбора элементов DOM на странице с помощью JavaScript

Метод выбора элемента по его идентификатору

Код
document.getElementById();


данный метод позволяет выбрать элемент на странице, которого есть назначенный идентификатор. Например, есть блок с идентификатором banner:

Код
<div id = 'banner'>
/* здесь содержимое блока */
</div>


тогда выбрать этот блок можно так:

Код
document.getElementById('banner');


Метод выбора конкретных элементов по названию тега

например, чтобы выбрать все элементы привязки(ссылки) на странице:

Код
document.getElementsByTagName('a');


Метод выбора элементов на основе CSS селекторов

например, чтобы выбрать все элементы на странице с классом 'active':

Код
document.getElementsByClassName('active');


чтобы выбрать все элементы span с классом 'author':

Код
document.querySelectorAll('span.author');

Изменить / Удалить

39
Форум: Базовое знакомство с jQuery | Тема: Работа с содержимым страниц с помощью JavaScript
Объектная модель документа (DOM)

Представление веб-страницы, при котором браузер запоминает все HTML-элементы, их атрибуты и порядок, в котором они появляются на странице, называется объектной моделью документа (сокращенно DOM, Document Object Model)

Что даёт DOM? Он даёт для JavaScript информацию для взаимодействия с элементами на веб-странице, позволяет обмениваться информацией с веб-страницей и изменять её HTML-код.

Объектная модель документа считает все элементы(теги) на странице, атрибуты и текст отдельными единицами - узлами.

Изменить / Удалить

40
Форум: Базовое знакомство с jQuery | Тема: Работа с содержимым страниц с помощью JavaScript
Язык JavaScript можно использовать для манипулирования веб-страницей, добавления нового контента, изменения HTML-кода страницы и применения CSS-стилей к элементам страницы.

Но, чтобы вы ни делали из вышеперечисленного, вы всегда выполняете следующие действия: выбор элемента на странице и выполнение действий с этим элементом.

Какие действия можно произвести с выбранным элементом?

- изменить свойства элемента

- добавить новое содержимое

- удалить элемент

- получить информацию об элементе

- добавить или удалить атрибут класса

Изменить / Удалить

41
Форум: Базовое знакомство с jQuery | Тема: Что такое jQuery и как с ним работать
Рекомендации по работе с jQuery

1. Библиотека jQuery в коде страницы должна располагаться выше JavaScript-кода, который её использует

2. Помещайте свой JavaScript-код после всех таблиц стилей CSS, в идеале непосредственно перед закрывающим тегом head

3. Добавляйте комментарии в коде после сочетания символов }); например:

Код
$(document).ready(function() {
/* программный код */
}); // здесь окончание ready

Изменить / Удалить

42
Форум: Базовое знакомство с jQuery | Тема: Что такое jQuery и как с ним работать
Функция $(document).ready()

$(document).ready() - это встроенная функция библиотеки jQuery, которая ждёт, когда полностью загрузится HTML-код страницы, прежде чем запустить JavaScript-сценарий, поскольку множество JavaScript кода предполагает манипулирование с содержимым веб-страницы, а пока браузер это содержимое не загрузит, то и работать с содержимым через JavaScript сценарий не получится.


Функцию:

Код
$(document).ready(function() {
/* программный код */
});


можно записывать короче:

Код
$(function() {
/* программный код */
});


Альтернативной функции (document).ready() является расположение вашего скрипта в конце кода страницы, перед закрывающим тегом body.

Код
<script src='здесь путь к файлу jquery'></script>
<script>
/* здесь ваш код */
</script>

Изменить / Удалить

43
Форум: Базовое знакомство с jQuery | Тема: Что такое jQuery и как с ним работать
Как подключить jQuery, чтобы начать с ней работать.

Библиотека jQuery представляет собой внешний файл с расширением js.
Где его взять и как подключить? Самые последние версии можно найти на этих ресурсах:

jQuery CDN

Google CDN

Microsoft CDN

CDNJS CDN

jsDelivr CDN

CDN(Content Distribution Network) - это сеть доставки и дистрибуции контента. Файлы библиотеки jQuery расположены на CDN-серверах, которые предоставляют их любому желающему


Другим вариантом является скачать файл библиотеки на свой компьютер и использовать локально, либо добавить его на свой сайт.

Для подключения jQuery на странице сайта, нужно всего лишь прописать в шапке странице теги script в которых будет прописан путь до файла библиотеки. Например, если вы берёте подключаемый файл библиотеки с сайта jQuery, так:

Код
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>


или, если вы подключаете jQuery с серверов Google, то таким образом:

Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


если же вы скачали файл библиотеки и разместили его на своём сайте, то просто укажите путь к нему:

Код
<script src="здесь размещаете путь к файлу библиотеки"></script>


Цифры в названии файла обозначают версию библиотеки jQuery, чем больше цифры, тем более новой считается версия. Для веб-сайтов лучше использовать минимизированные версии файлов библиотеки (обозначаются с префиксом min.js), они имеют меньший вес. Размер несжатых файлов библиотеки гораздо больше и используется для разработчиков и изучения кода библиотеки.

Теперь, когда вы подключили на странице сайта библиотеку jQuery, вы можете далее прописывать свои программы JavaScript, которые будут использовать библиотеку, например:

Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  /* Здесь код программы */
});
</script>

Изменить / Удалить

44
Форум: Базовое знакомство с jQuery | Тема: Что такое jQuery и как с ним работать
jQuery - это библиотека JavaScript, коллекция кодов, позволяющих решать многие типовые задачи программирования. В данной библиотеке содержится множество готовых функций, которые облегчают выполнение распространённых действий.




Официальный сайт - jQuery.com

Очевидные плюсы jQuery:

- малый вес файла библиотеки

- для работы с этой библиотекой достаточно знать CSS

- популярна и надёжна

- абсолютно бесплатна

- имеет большое сообщество разработчиков

- множество плагинов

Помимо jQuery, существует множество других библиотек JavaScript, например Yahoo User Interface Library, Dojo Toolkit, Mootools, Ember.js, AngularJS, Backbone.js, Underscore.js, Raphael

Изменить / Удалить

45
Форум: Функции | Тема: Многомерные массивы - разбираем на примере
А теперь доработаем немного нашу программу. Нужно предусмотреть такой вариант, что участник викторины захочет ввести ответ не цифрами, а буквами.
Например, на вопрос: "Сколько лап у собаки?" участник вводит ответ не "4", а "четыре". Как среагирует программа? А вот как:

Цитата
Это не правильный ответ! Правильный ответ 4


Такие дела...Ответ то верный. И как быть? Воспользуемся нашим решением, описанным ранее здесь. Перепишем программу таким образом:

Код
<script>
var правильныхОтветов = 0;
var вопросыВикторины = [
['Сколько лап у собаки?', '4'],
['Сколько рогов у коровы?', '2'],
['Сколько хвостов у тигра?', '1']
];
function задатьВопрос(параметр) {
  do {
    var ответ = prompt(параметр[0], ' ');
    ответ = parseInt(ответ, 10);
  } while (isNaN(ответ));
  
if(ответ == параметр[1]) {
   alert('Это верный ответ!');
   правильныхОтветов++;
} else {
   alert('Это не правильный ответ! Правильный ответ ' + параметр[1]);
}
}
for(var i = 0; i < вопросыВикторины.length; i++) {
  задатьВопрос(вопросыВикторины[i]);
}
</script>


Вот теперь наша викторина полностью закончена. Тестируем!

Изменить / Удалить

Поиск: