Еще один пример - отмена действий по умолчанию.
Теперь мы укажем в head вместо файла jquery.js, лежащего у нас на компьютере, файлик, лежащий на сайте jquery на Гугловском CDN. Таким образом, мы сможем понизить нагрузку на наш сервер, засчет того, что библиотека jquery будет запрашиваться не с нашего сервера, а с серверов гугла:)
Приведем страницу к следующему виду:
<!DOCTYPE html>Строчка "event.preventDefault();" означает предотвращение дефолтного действия по событию. В данном случае это значит, что при клике по ссылке не будет осуществлен переход по ней, который является действием по умолчанию для события "клик по ссылке".
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
Пример - добавление и забирание CSS-класса.
На всякий случай, тем, кто не знает, что такое CSS - предлагаю ознакомиться с этой статьей в Википедии.
Добавим в head нашей страницы следующие строки:
<style type="text/css">Они описывают класс ссылок test. Ссылки, принадлежащие этому классу, будут написаны жирным шрифтом.
a.test { font-weight: bold; }
</style>
Далее, в нашу функцию, вызываемую при нажатии на ссылку, добавляем следующую строчку:
$("a").addClass("test");В результат при клике по ссылки все ссылки в документе станут написаны жирным текстом.
Эффекты.
В JQuery присутствует поддержка многих эффектов, призванных сделать ваши страницы как можно более красивыми и оригинальными.
Например, заставим нашу ссылку постепенно исчезать после клика по ней.
Для этого в обработчик клика следует добавить следующую строку:
$(this).hide("slow");И все, мы видим, как ссылка постепенно исчезает после клика.
На этом на сегодня всё, продолжим разбираться с JQuery в следующих статьях:)
2 комментария:
Классно, только мало информации! Автор, напиши ещё что-нибудь про jQuery, про методы, используемые в этом фреймворке, про параметры этих методов. А также начни вместе с твоими читателями рассматривать исходный код jquery. Это будет очень интересно!
Отличная идея, спасибо!
Отправить комментарий