Структура программы на примере простейшей программы
JQuery
для чайников. Урок 4. Немного о мощных возможностях
JQuery.
Исходники к уроку можно скачать
здесь.
Сегодня мы изучим несколько приемов JQuery, при
помощи которых можно найти быстрые и красивые решения для многих задач.
И так, пусть у нас есть таблица, у которой нужно раскрасить только четные
строки:
На JQuery это можно сделать все одной строкой:
$("tr:nth-child(odd)").addClass("<Имя класса
раскрашенной строки>");
А вот полный текст примера:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8"
/>
<title>jQuery.
Chainable Transition Effects</title>
<script
type='text/javascript'
src='jquery.js'></script>
<script
type="text/javascript">
$(document).ready(function(){
$("tr:nth-child(odd)").addClass("oddclass");
});
</script>
<style
type="text/css">
.oddclass {
background-color:yellow;
}
</style>
</head>
<body>
<table
border=1>
<tr>
<td>Один</td>
<td>Два</td>
<td>Три</td>
<td>Четыре</td>
</tr>
<tr>
<td>Один</td>
<td>Два</td>
<td>Три</td>
<td>Четыре</td>
</tr>
<tr>
<td>Один</td>
<td>Два</td>
<td>Три</td>
<td>Четыре</td>
</tr>
<tr>
<td>Один</td>
<td>Два</td>
<td>Три</td>
<td>Четыре</td>
</tr>
<tr>
<td>Один</td>
<td>Два</td>
<td>Три</td>
<td>Четыре</td>
</tr>
<tr>
<td>Один</td>
<td>Два</td>
<td>Три</td>
<td>Четыре</td>
</tr>
<tr>
<td>Один</td>
<td>Два</td>
<td>Три</td>
<td>Четыре</td>
</tr>
</table>
</body>
</html> |
подобные хитрые приемы стали возможны благодаря тому, что в качестве
параметров функции $ мы можем задать запрос к
элементам HTML-документа и выполнить к результату
этого запроса различные функции. Например, вот такая конструкция:
| $(<HTML-текст>).appendTo(<Элемент>); |
Позволяет добавить заданный HTML-текст к заданному
элементу, например:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8"
/>
<title>jQuery.
Chainable Transition Effects</title>
<script
type='text/javascript'
src='jquery.js'></script>
<script
type="text/javascript">
$(document).ready(function()
{
$("#button").click(function
() {
$("<p>Проба</p>").appendTo("body");
})
});
</script>
</head>
<body>
<input
type="button"
value="Нажми
сюда"
id="button">
</body>
</html> |
Выдаст вот такой результат:
Можно всем элементам заданного вида (например, всем тэгам <P>
установить определенный CCS-класс.
Давайте рассмотрим это на примере:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8"
/>
<title>jQuery.
Chainable Transition Effects</title>
<style
type="text/css">
.myclass {
color:red;
}
</style>
<script
type='text/javascript'
src='jquery.js'></script>
<script
type="text/javascript">
$(document).ready(function()
{
$("#button").click(function
() {
$("P").addClass("myclass");
})
});
</script>
</head>
<body>
<input
type="button"
value="Нажми
сюда"
id="button">
<P>Это
параграф</P>
<P>И
это тоже параграф</P>
<div>А
это уже не параграф</div>
</body>
</html> |
Эффект от этого скрипта следующий: при нажатии на кнопочку произойдет подцветка
красным цветом только того текста, который заключен в тэг
<P></P>:
На этом я закончу урок, но тема JQuery все еще
открыта, так что до новых встреч.
|
