Введение в jquery. Часть 1
В этому уроке начинается небольшая серия видео уроков о библиотеке jquery. jquery — библиотека, основанная на javascript, кроссбраузерный инструмент, который предоставляет разработчику функции для манипуляции html содержимым, функции отслеживания и обработки событий, создания анимаций, отправки и получения запросов с сервера. Скачать jquery можно с сайта http://jquery.com/.
Код урока
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<div class="three">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<img src="https://placekitten.com/g/150/150" alt="">
<img src="https://placekitten.com/g/200/200" alt="">
<img src="https://placekitten.com/g/250/250" alt="">
<script src="jquery.js"></script>
<script>
$("p").css("color", "red");
$("#one").css({
"color": "green",
"font-size": "30px"
});
$("img[src='https://placekitten.com/g/150/150']").after("котик");
$("img[src='https://placekitten.com/g/200/200']").click(function(){
$(this).animate({
"opacity": "0.4"
}, 2000, function(){
alert("Анимация закончена");
});
});
var attr = $("img[src='https://placekitten.com/g/250/250']").attr("src");
console.log(attr);
$("#one").addClass("two");
$("#one").removeClass("two");
$("#one").removeAttr("class");
$("#one").before("текст");
$(".three ul li").each(function(){
$(this).css("font-size", "30px");
});
$("#one").append("содержимое");
$("еще содержимое").appendTo("#one");
console.log($("#one").children());
$("#one").empty();
</script>
</body>
</html>
Спасибо за видео!
В коде урока все теги параграфа отсутствуют!
Здравствуйте, Виктор. Благодарю за отзыв. Замечание учтено и исправлено.