Примеры исспользования jQuery
.pdf
Методы для работы с html
Код html-страницы прост:
<html>
<head>
<title>jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="script.js"></script> </head>
<body>
<div id="red_sk"></div>
<input type="button" value="Добавить!" onclick="addYellowSquare();"> </body>
</html>
Методы для работы с html
Внешний вид зададим с помощью таблицы стилей (style.css):
#red_sk{ width:700px; height:100px; background:red;
}
.yellow_square{ float:left; width:80px; height:80px; background:yellow; margin:5px;
}
Код script.js :
function addYellowSquare(){
$("#red_sk").prepend("<div class='yellow_square'></div>");
}
Методы для работы с html
Примеры работы с html (pr8):
Методы для работы с html
Код html-страницы прост:
<html>
<head>
<title>jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="script.js"></script> </head>
<body>
Наши города:
<ul id="jq"> <li>Архангельск</li> <li>Москва</li> <li>Иркутск</li> </ul>
Дополните список:
<input type="text" id="user_text"
function addSpisok(){
var jq=$('#user_text').val(); $('#jq').append('<li>'+jq+'</li>');
}
size="20" maxlength="50">
<input type="button" value="Добавить" onclick="addSpisok();"> </body>
</html>
Методы по обработке событий
Примеры работы по обработке событий (pr9):
Методы по обработке событий
Код html-страницы прост:
<html>
<head>
<title>jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="script.js"></script> </head>
<body>
Урок: <select id="lesson">
<option value='1'>Урок 1</option> <option value='2'>Урок 2</option> <option value='3'>Урок 3</option>
</select><br><br>
Описание: <span id="desc"></span> </body>
</html>
Итак, мы могли бы каждому пункту списка задать обработчик события - функцию desc, которая и будет задавать описания в зависимости от выбранного пункта. Но jQuery позволяет сделать это еще проще.
Методы по обработке событий
Код script.js : $(document).ready(init);
function init(){ $('#lesson').bind('change', desc);
}
function desc(){
var op=$('#lesson').val(); switch (op)
{
На странице script.js нам достаточно назначить функцию, которая будет срабатывать каждый раз, когда документ готов к работе (назовем ее init). Сама же функция init будет вызывать функцию desc каждый раз, когда выбран какой-либо пункт списка (т.е. наступает событие change)
case '1': $('#desc').text('Первый урок по jQuery знакомит с основными понятиями и возможностями этой библиотеки.'); break;
case '2': $('#desc').text('Второй урок по jQuery знакомит с таким понятием, как селекторы.');
break;
case '3': $('#desc').text('Третий урок по jQuery знакомит с таким понятием, как фильтры.');
break;
}
}
Методы по обработке событий
Примеры работы по обработке событий (pr10):
Методы по обработке событий
Код html-страницы прост:
<html>
<head>
<title>jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="script.js"></script> </head>
<body>
<p>первый абзац</p> <p>второй абзац</p> <p>третий абзац</p>
</body>
</html>
Методы по обработке событий
Код script.js :
$(document).ready(init);
function init(){ $('p').hover(
function(){$(this).css("background-color", "blue");}, function(){$(this).css("background-color", "white");} );
}
Таким образом, когда указатель мыши над абзацем, его фон - синий, а при выходе - белый.