Читайте также:
|
<div class=first>Блок на замену</div>
<div>Блок на замену без класса</div>
$("<h2>Новые блоки</h2>").replaceAll("div");
$("div.first").replaceWith("<h2>Новый блок</h2>");
45. jQuery. Простые эффекты.
Самые простые эффекты jQuery – показ/скрытие элементов, простейшая анимация.
Основные методы: show(), hide(), toggle(), slideUp(), slidеDown(), slideToggle(), fadeIn(), fadeOut(), fadeTo().
Универсальный метод: animate()
Пример 1
<div id="clickme">Click here</div>
<img id="book" src="book.png" alt="" width="100" height="123"
style="position: relative; left: 10px;">
$("#clickme").click(function () {
$("#book").animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function () {
// Animation complete.
});
});
Пример 2. Разметка
.ball{ width:100px; height:100px; top: 50px;
background-image: url("ball.png"); position: relative; }
.bottom {border-bottom: 1px solid #000; height: 600px;
width: 500px; margin: 0 auto}
<button id="start"> Пуск </button>
<button id="stop"> Стоп </button>
<div class="bottom">
<div class="ball"></div>
</div>
Пример 2. Код
function ballBounce(){
$(".ball").animate ({top: 500}, 800,
function() { $(this).animate ({ top: 50}, 800,
function() { ballBounce() });
});
}
$("#start").click(function(){ ballBounce(); });
$("#stop").click(function(){ $(".ball").stop(); });
46. Основы технологии Ajax.
AJAX (от англ. Asynchronous Javascript and XML — "асинхронный JavaScript и XML") — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в "фоновом" обмене данными браузера с веб-сервером.
В результате, при обновлении данных веб-страница не перезагружается полностью и веб-приложения становятся более быстрыми и удобными.
Основные методы jQuery:
.ajax(options)
.get(url, [data,] [callback,] [type])
.post(url, [data,] [callback,] [type])
.load(url, [data,] [callback])
.
Основной метод:
.ajax(options)
единственный параметр - обьект options, с параметрами:
async - boolean - запрос синхронный или асинхронный (по умолчанию)
data - object - имеет вид {ключ:значение, ключ:значение,…}
type - string - какой тип запроса get или post
url - string - адрес обработчика
.load (url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ]) – выполняет загрузку фрагмента источника в указанный контейнер.
Примеры
$("#result").load("test.html");
$("#result").load("test.html #container", function() {
alert("Загрузка выполнена.");
});
$("#success").load("file.php",
function(response, status, xhr) {
if (status == "error") {
var msg = "Oшибка: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
.get/.post(url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ])
Выполняет загрузку методом GET/POST.
Примеры
$.get("test.html", function (data) {
$(".result").html(data);
alert(" Загрузка выполнена.");
});
$.get("test.php", { name: "John", time: "2pm" })
$.get("test.php", function (data) {
$("body")
.append("<p>Name: " + data.name + "</p>") // John
.append("<p>Time: " + data.time + "</p>"); // 2pm
}, "json");
test.php
<?php
echo json_encode(array("name"=>"John","time"=>"2pm"));
?>
$.get("test.php", function (data) {
$("body")
.append("<p>Name: " + data.name + "</p>") // John
.append("<p>Time: " + data.time + "</p>"); // 2pm
}, "json");
test.php
<?php
echo json_encode(array("name"=>"John","time"=>"2pm"));
?>
Пример. $.post("test.php", { name: "John", time: "2pm" }).done(function(data) {
$("#result").html("Данные загружены: " + data); });
test.php
<?php
echo "получены методом POST ". $_POST["name"]. " и ". $_POST["time"];
?>
Пример. Код обработчика
<script>
$(function(){
$.ajax({
type: "POST",
url: "poster.php",
data: { x: "Hello, ", y: "world!" },
success: callback
}); });
function callback(data, status)
{ $("div").text(data); }
</script>
47. Основы регулярных выражений
Регулярное выражение (regular expression, сокращенно РВ, жарг. «регэксп» или «регекс») – это технология, которая позволяет задать шаблон и осуществить поиск/замену данных, соответствующих этому шаблону, в заданном тексте, представленном в виде строки.
Регулярные выражения пришли из в PHP из UNIX и Perl. В PHP существуют удобные и мощные средства работы со строками, как explode (разбиение строки на подстроки), strstr (нахождение подстроки), str_replace (замена всех вхождений подстроки).
Возникает вопрос – зачем нужны РВ?
Основное преимущество РВ заключается в том, что они позволяют организовать гибкий поиск, т.е. найти то, о чем нет точного знания, но есть примерное представление.
Пример – поиск телефонного номера вида 123-45-67
/\d{3}-\d{2}-\d{2}/m
В общем случае регулярное выражение представляет собой строку. Эта строка состоит из собственно регулярного выражения (шаблона), выделенного с помощью специального символа разделителя («/», «#», «|», «{«, «!» и т.п) и модификатора, влияющего на способ обработки РВ.
48. Регулярные выражения. Метасимволы
Регулярное выражение (regular expression, сокращенно РВ, жарг. «регэксп» или «регекс») – это технология, которая позволяет задать шаблон и осуществить поиск/замену данных, соответствующих этому шаблону, в заданном тексте, представленном в виде строки.
Регулярные выражения пришли из в PHP из UNIX и Perl. В PHP существуют удобные и мощные средства работы со строками, как explode (разбиение строки на подстроки), strstr (нахождение подстроки), str_replace (замена всех вхождений подстроки).
Возникает вопрос – зачем нужны РВ?
Основное преимущество РВ заключается в том, что они позволяют организовать гибкий поиск, т.е. найти то, о чем нет точного знания, но есть примерное представление.
Пример – поиск телефонного номера вида 123-45-67
/\d{3}-\d{2}-\d{2}/m
В общем случае регулярное выражение представляет собой строку. Эта строка состоит из собственно регулярного выражения (шаблона), выделенного с помощью специального символа разделителя («/», «#», «|», «{«, «!» и т.п) и модификатора, влияющего на способ обработки РВ.
Метасимволы. Регулярные выражения способны включать в шаблон альтернативы и повторения. Они кодируются с помощью метасимволов. Метасимвол отличается от любого другого символа тем, что имеет специальное значение.
Примеры метасимволов:
«/», «^», «$», «[», «]», «*», «+» и др.
\ - считать следующий метасимвол как обычный символ;
. - один произвольный символ. Кроме '\n' - конец строки;
| - альтернатива (или);
() - группировка;
[ ] - класс символов.
Дата добавления: 2015-02-16; просмотров: 131 | Поможем написать вашу работу | Нарушение авторских прав |