index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JQ</title>
</head>
<body>
<p class="www">1</p>
<p class="www">1</p>
<p>3</p>
<span title="Hello world!" id="test">Here goes text!</span>
<div>div 1</div>
<div>div 2</div>
<p id="try"></p>
<script src="jquery-3.2.1.js"></script>
<script>
<!-- Получим все абзацы и покрасим их в красный цвет.-->
$('p').css('color', 'red');
<!-- Получим все абзацы и покрасим их в красный цвет и изменим размер шрифта. Это делается с помощью объекта. -->
$('p').css({'color' : 'red', 'font-size' : '30px'});
<!-- В объектах кавычки над ключами можно не писать. Слова через дифис пишем в верблюжьем стиле. -->
$('p').css({color : 'red', fontSize : '30px'});
<!-- Метод attr() позволяет записывать и считывать атрибуты. Присвоим класс www всем div -->
$('div').attr('class', 'www');
$('div').attr('title', 'Это всплывающая подсказка по наведении курсора!');
var title = $('span#test').attr('title'); <!-- Считаем атрибут. -->
alert(title);
<!-- Метод wrap(). Обернем все абзацы в div. Параметры не нужны! -->
$('p').wrap();
<!-- Метод wrapInner(). Обернем внутреннее содержание всех абзацев в div. -->
$('p').wrapInner('<div>');
<!-- Метод unwrap(). -->
$('p').unwrap('<div></div>');
$('#try').html('!');
$('#try').css('color', 'blue');
</script>
</body>
</html>
index2.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JQ</title>
</head>
<body>
<p class="www">1</p>
<p class="www">1</p>
<p>3</p>
<span title="Hello world!" id="test">Here goes text!</span>
<div>div 1</div>
<div>div 2</div>
<p id="try"></p>
<script src="jquery-3.2.1.js"></script>
<script>
/*
$('p').html('!');
$('p').css('color', 'blue');
Сократим запись.
Знак $ - соглашение по именованию переменной.
var $elems = $('p');
$elems.html('!');
$elems.css('color', 'blue');
*/
// Цепочки JQ могут быть любой длины.
$('p').html('!').css('color', 'blue');
</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JQ</title>
</head>
<body>
<p class="www">1</p>
<p class="www">1</p>
<p>3</p>
<span title="Hello world!" id="test">Here goes text!</span>
<div>div 1</div>
<div>div 2</div>
<p id="try"></p>
<script src="jquery-3.2.1.js"></script>
<script>
<!-- Получим все абзацы и покрасим их в красный цвет.-->
$('p').css('color', 'red');
<!-- Получим все абзацы и покрасим их в красный цвет и изменим размер шрифта. Это делается с помощью объекта. -->
$('p').css({'color' : 'red', 'font-size' : '30px'});
<!-- В объектах кавычки над ключами можно не писать. Слова через дифис пишем в верблюжьем стиле. -->
$('p').css({color : 'red', fontSize : '30px'});
<!-- Метод attr() позволяет записывать и считывать атрибуты. Присвоим класс www всем div -->
$('div').attr('class', 'www');
$('div').attr('title', 'Это всплывающая подсказка по наведении курсора!');
var title = $('span#test').attr('title'); <!-- Считаем атрибут. -->
alert(title);
<!-- Метод wrap(). Обернем все абзацы в div. Параметры не нужны! -->
$('p').wrap();
<!-- Метод wrapInner(). Обернем внутреннее содержание всех абзацев в div. -->
$('p').wrapInner('<div>');
<!-- Метод unwrap(). -->
$('p').unwrap('<div></div>');
$('#try').html('!');
$('#try').css('color', 'blue');
</script>
</body>
</html>
index2.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JQ</title>
</head>
<body>
<p class="www">1</p>
<p class="www">1</p>
<p>3</p>
<span title="Hello world!" id="test">Here goes text!</span>
<div>div 1</div>
<div>div 2</div>
<p id="try"></p>
<script src="jquery-3.2.1.js"></script>
<script>
/*
$('p').html('!');
$('p').css('color', 'blue');
Сократим запись.
Знак $ - соглашение по именованию переменной.
var $elems = $('p');
$elems.html('!');
$elems.css('color', 'blue');
*/
// Цепочки JQ могут быть любой длины.
$('p').html('!').css('color', 'blue');
</script>
</body>
</html>
Комментариев нет:
Отправить комментарий