Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы JavaScript

Урок 14. Библиотека jQuery


Перебор списка из объектов

Допустим, у нас есть список из объектов JavaScript, каждый из которых, кроме последнего, имеет некоторое свойство next, содержащее ссылку на следующий объект. Графически это можно представить так:



Реализуем теперь перебор такого списка кодом JS:

/* Создаём список из 6-и объектов */
var o6 = {name:"object6"};
var o5 = {name:"object5", next:o6};
var o4 = {name:"object4", next:o5};
var o3 = {name:"object3", next:o4};
var o2 = {name:"object2", next:o3};
var o1 = {name:"object1", next:o2};

/* Создаём функцию, в теле которой находится перебирающий
 цикл for */
function tail(o, whatToDo){
	for(; o.next; o=o.next){whatToDo(o);}
	return o;
}

/* Выводим результаты в консоль; в качестве первого параметра
 передаём object1 и далее запускается цепная
 реакция по свойству next */
var results = tail(o1, function(x){
	console.log(x.name);
});

В коде мы использовали цикл for, в котором не инициализировали переменную i как обычно (вместо var i = 0, указали просто ;), а в качестве условия продолжения цикла задали наличие свойства next у текущего объекта.



jQuery

Что такое jQuery? - это ставшая фактическим стандартом библиотека JavaScript, которая фокусируется на взаимодействии JavaScript и HTML. jQuery упрощает решение задач, связанных с модификацией DOM.

Говоря ещё проще jQuery - это файл с расширением .js, содержащий кучу JavaScript-кода, который нужно скачать, закинуть к себе на сервер и затем подключить его в своём HTML-документе как один внешний JavaScript-файл, после чего его можно использовать:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Подключение  jQuery</title>
			<script src="/library/jquery-3.0.0.min.js"></script>
		</head>
		<body>
		
		<p>Файл "jquery-3.0.0.min.js" скачан и скопирован в папку "library"
		(папка может называться как угодно) на сервере. К этому документу он
		подключён в элементе "head"</p>
		
		</body>
	</html>

Обращаться к библиотеке jQuery можно через слово jQuery и метод ready или, что встречается чаще - через знак доллара $:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Обращение к jQuery</title>
			<script src="/library/jquery-3.0.0.min.js"></script>
			
			<script>
				jQuery(document).ready(function(){
					jQuery('h1').text('Изменено сценарием');
				});
				
				$(function(){
					$('p').text('Абзац изменён сценарием');
				});
			</script>
		</head>
		<body>
		
		<h1>Заголовок h1</h1>
		
		<p>Какой-то абзац</p>
		
		</body>
	</html>

Метод text - это метод, который предоставляет jQuery и таких методов огромное множество. Кроме того, всегда появляются новые, поэтому изучать их все представляется проблематично. Здесь я вижу один из недостатков jQuery от чистого кода JavaScript - всё чаще возникает необходимость изучения нового функционала этой библиотеки. В наших уроках мы познакомимся только с некоторыми самыми ходовыми методами.

Однако следует отметить, что в большинстве случаев jQuery позволяет ощутимо сократить код и изящно решать поставленные задачи.

Обращение к свойствам CSS элементов через jQuery

jQuery позволяет изящно решить задачу обращения к свойствам CSS. Всё делается очень просто - на вход подаётся селектор CSS и в фигурных скобках указывается свойство:значение -
$('селектор_CSS').css({'свойство':'значение'});

Рассмотрим пример - изменим цвет текста для всех элементов списка с помощью jQuery:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Обращение к CSS через jQuery</title>
			<script src="/library/jquery-3.0.0.min.js"></script>
		</head>
		<body>
		
		<ul>
			<li>Элемент списка 1</li>
			<li>Элемент списка 2</li>
			<li>Элемент списка 3</li>
			<li>Элемент списка 4</li>
			<li>Элемент списка 5</li>
		</ul>
		
		<script>
			$('li').css( {'color':'blue'} );
		</script>
		
		</body>
	</html>

В итоге получим то, что и планировали:


Сделать то же самое чистым кодом JavaScript гораздо сложнее:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Обращение к CSS через JavaScript</title>
		</head>
		<body>
		
		<ul>
			<li>Элемент списка 1</li>
			<li>Элемент списка 2</li>
			<li>Элемент списка 3</li>
			<li>Элемент списка 4</li>
			<li>Элемент списка 5</li>
		</ul>
		
		<script>
			var lis = document.querySelectorAll('li');
			for (var li in Array.prototype.slice.call(lis)){
				lis[li].style.color = 'blue';
			};
		</script>
		
		</body>
	</html>

Реализация циклов через jQuery

Рассмотрим скрипт, который циклом for создаёт элементы HTML, пусть этими элементами будут три текстовых поля. Обратите внимание, что body в коде пустой, скрипт создаст нужные элементы в нём только после своей работы:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Создание элементов HTML через JS</title>
		</head>
		<body>
		</body>
		
	<script>
		for (var j = 1, input, label, frag = document.createDocumentFragment(); j <= 3; j++){
			input = document.createElement("input");
			label = document.createElement("label");
			label.textContent = "Текстовое поле" + j + ":";
			input.setAttribute("type", "text");
			input.setAttribute("value", "Введите текст");
			input.style.borderRadius = "10px";
			input.style.paddingLeft = "5px";
			frag.appendChild(label);
			frag.appendChild(input);
		}
		
		document.body.appendChild(frag);
	</script>
		
	</html>

Результат будет таким:


А теперь посмотрим, как можно оптимизировать этот код, используя jQuery:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Создание элементов HTML через jQuery</title>
			<script src="/library/jquery-3.0.0.min.js"></script>
		</head>
		<body>
		</body>
		
	<script>
		
		var frag = $();
		
		/*Передаём jQuery массив из 3-х элементов, а затем используем
		метод jQuery each*/
		$([1, 2 ,3]).each(function(i, v){
			frag = frag.add('<label>Текстовое поле' + v + '</label><input type="text" value="Введите текст">');
		});
		
		/*Добавляем созданные элементы в документ HTML*/
		$(document.body).append(frag);
		
		/*Добавляем свойства CSS через jQuery*/
		$('input').css( {'border-radius' : '10px', 'padding-left' : '5px;'} )
	</script>
		
	</html>

Метод jQuery each вызывает указанную функцию (function(i, v){...}) для каждого из элементов массива ([1, 2, 3]), метод add добавляет указанные элементы к фрагменту DOM, а метод append добавляет уже этот фрагмент DOM к общему дереву DOM документа.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля