5.5.3. Блочная верстка
Рассмотрим методы для работы с размерами, и координатами элементов:
offset() - вернёт позицию DOM элемента в виде объекта: { top: 10, left: 30 }. Аналогично offset( {top:10, Left:30}) - устанавливает расположение элемента. position() - вернёт позицию DOM элемента относительно родительского элемента; height() - возвращает высоту элемента за вычетом отступов и границ; height(height) - устанавливает высоту всех элементов в выборке, единицы измерения по умолчанию будут px.
width() и width(width) - ведут себя аналогично height(), но работают с шириной.
Методы height() и width() возвращают параметры области внутри margin, padding и border элемента.
innerHeight() и innerWidth() - вернут высоту и ширину элемента, включая padding
outerHeight() и outerWidth() - вернут высоту и ширину элемента, включая padding и border
outerHeight(true) и outerWidth(true) - высота и ширина, включая padding, border и margin
<!DOCTYPE html>
<html ><head>
<title>prjq6 - "Элементы JQuery</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"> </script>
<style type="text/css">
body{color: green;}
p{text-align:center;}
.big{font-size:200%;color:black;}
.test {color:black;
font-weight: bold;}
</style>
</head>
<body >
<script>alert('Hello1')</script>
<div>Это первый div </div>
<div id='idname'>Это второй div </div>
<div id="content" class="wrapper box">
<h1>Заголовок h1</h1>
<article id="stick"> <h2>Article Title</h2>
<p>Заголовок статьи</p> </article>
<article> <h2>Article Description</h2>
<p>Описание текста</p> </article>
<p >Основной текст.</p>
</div>
<script>
var $h1=$('h1');
var x=$h1.width();// gets the width of the first H1
var y=$h1.height();//gets the height of the first H1
alert("X="+x+" Y="+y);// x=931, y=36
$h1.width('50px'); // sets the width of all H1 elements
var x=$h1.width();
$h1.height('50px'); // sets the height of all H1 elements
var y=$h1.height(); // возвращают параметры области внутри margin, padding alert("X="+x+" Y="+y);//x=50, y=50
alert($('h1').position());//returns an object position information for the first H1
$("div").offset();
$("article").offset( {top: 10, left: 30 });
var x= $("article").offset();
alert('Hello2');
var $p = $('p');
y=$p.innerHeight();// вернут соответственно высоту и ширину элемента,
x=$p.innerWidth();// включая padding
alert("X="+x+" Y="+y);//x=931, y=19
x=$p.outerWidth();//outerHeight() и outerWidth() - вернут высоту и ширину элемента,
y=$p.outerHeight();//включая padding и border
alert("X="+x+" Y="+y);//x=931, y=19
x=$p.outerWidth(true); //
y=$p.outerHeight(true); //outerHeight(true) и outerWidth(true) - высота и ширина, //включая padding, border и margin
alert("X="+x+" Y="+y);//x=931, y=51
</script>
</body> </html>
5.7.3. Обработка событий
Обработчик события в JavaScript можно добавить следующим образом:
document.getElementById('id').click = function1;.
В JQuery это можно сделать так:
$('#id').click(function(){/*код обработки по id*/});
Как и ранее код выполняется после загрузки документа или, как обработчик события ready() документа. Простой пример:
<img src="img/avtor.jpg" id="myfoto" />
<script type="text/javascript">
$(document).ready(function(){
$('#myfoto').click(function(){
alert('This is my photo!');
});
});
</script>
Основные события в JQuery: mousedown, mouseup, mouseover, mouseout ; mousemove; keypress; submit; focus; change; click.
<script>
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
</script>
Опробовать события можно на примере с событиями мышки и элементами формы.
<!DOCTYPE html>
<html ><head>
<title>prjq6 - "Элементы JQuery</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"> </script>
<style type="text/css">
body{color: green;}
p{text-align:center;}
.big{font-size:200%;color:black;}
.test {color:black; font-weight: bold;}
</style>
</head>
<body >
<div>Это первый div </div>
<h1>Заголовок h1</h1>
<article id="stick"> <h2>Article Title</h2>
<p>Заголовок статьи</p> </article>
<article> <h2>Article Description</h2>
<p>Основные события в JQuery: mousedown — нажата кнопка мыши;
mouseup — отпущена кнопка мыши; mouseover — курсор над элементом;
mouseout — курсор ушёл; mousemove — курсор переместился по элементу;
keypress — нажата клавиша; submit — отправлены данные из формы;
focus — получен фокус; change — изменено; click — клик.</p> </article>
<a href=prjq6.htm id='idname'>Это Ссылка</a>
<img src="img/avtor.jpg" id="myfoto" />
<script type="text/javascript">
// сообщение при перемещении курсора:
$('#myfoto'). mousemove(function(){
alert('This is my photo too!');
});
$('#idname').mouseover(function(){//событие помещения курсора над ссылкой
alert('This is my href!');
});
alert('Hello1');
// Returns a function that will always run in the provided scope.
var myFunction = function() {console.log(this); alert('SOS');};
var myObject = { foo : 'bar' };
myFunction(); // logs window object
var myProxyFunction = $.proxy(myFunction, myObject);
myProxyFunction(); // logs myObject object
$('#foo').click(myObject.myFn); // logs DOM element #foo
$('#foo').click($.proxy(myObject, 'myFn')); // logs myObject
</script>
</body> </html>
События для работы с формами
События с которыми чаще всего придётся работать: change — изменение значения элемента, submit — отправка формы. Отслеживание change позволяет обрабатывать такие события как изменение selectbox, или radiobutton. Отслеживание submit потребуется для проверки правильности заполнения формы, а так же для отправки. Для работы с формами используются методы, которые реализуют также события:
.blur(); .change(); .focus(); .select() ;.serialize(); .serializeArray(); .submit(); .val()
Рассмотрим простую форму:
<form action="/save/">
<input type="text" name="name" value="lvan"/> <select name="role">
<option>User</option> <option>Admin</option> </select>
<input type="submit"/> </form>
А примеры будут идти в обратном порядке, вот отправка формы AJAX'ом по ссылке из action:
$('form').submit( unctioi(){
// чуть позже расскажу подробнее о AJAX $.post(
$(this).attr('action'), // ссылка куда отправляем данные
$(this).serialize() // данные формы
// отключаем действие по умолчанию return false;
});
Вот и первый метод - serialize() - он в ответе за «сбор» данных с формы в удобном для передачи данных формате:
name=lvan&role=Admin
Так же есть метод serializeArray() -он собранные данные представляет в виде объекта: [
{
name:"name", value:"Ivan"
}, {
name:"role", value:"Admin"
},
]
Теперь стоит добавить в данный код немного проверки данных:
$('form').submit( unctioi(){
if ($(this).find('input[name=user]').val() == '') { alert('Введите имя пользователя'); return false;
}
// кусок кода с отправкой // ...
});
Вот еще один метод, который нам будет частенько нужен:
val() - получение значения первого элемента формы из выборки val(value) - установка значение всем элементам формы из выборки
Данный метод отлично работает практически со всеми элементами формы, вот только с ^юЬ^^п^ми установить значение таким образом не получится, тут потребуется небольшой workaround:
$('input[type=radio][name=choose][value=2]').prop('checked', true)
Можно конечно же использовать и метод click() дабы эмулировать выбор необходимо пункта, но это вызовет обработчики clicks, что не желательно
С checbox'ами чуть-чуть попроще:
$('input[name=check] ,).prop('checked', true)
Проверяем «чекнутость» простым скриптом:
$('input[name=check] ').prop('checked') // или чуть более наглядным способом $('input[name=check] ').is(':checked')
Проверять и отправлять форму AJAX'ом теперь умеем, теперь осталось решить вопрос с динамическим изменением формы, и для этого у нас уже есть все необходимые знания, вот, к примеру, добавление выпадающего списка:
$('form').append('<select name="some"></select>');
А если потребуется изменить список? Есть на все случаи жизни:
// возьмём список заранее, var $select = $('form select[name=Role]'); // добавить новый элемент в выпадающий список $select.append('<option>Manager</option>'); // выбрать необходимый элемент $select.val('Value 1'); // или по порядковому номеру, начиная с 0 $select.find('option:eq(2)').prop('selected', true); // очищаем список
$select.remove('option'); // преобразуем в multiple
// не забываем, что имя такого селекта, должно быть с [], т.е. // myselect[], иначе сервер получит, лишь одно значение $('select').attr('size',
$('select option').length
)
$('select').attr('multiple', true)
осталось добавить вменяемый вывод ошибок за alert() :
if ($(this).find('input[name=user]').val() == '') { $(this).find("input[name=user]')
.before('<div class="error">Введите имя</div>,); return false;
}
При повторной отправки формы не забудьте убрать сообщения оставшиеся от предыдущей проверки:
$(this).find('.error').remove()
Теперь можно объединить кусочки кода и получить следующий вариант:
$('form').submit( unction(){ // чистим ошибки
$(this).find('.error').remove(); // проверяем поля формы
if ($(this).find('input[type=name]').val() == '') { $(this).find("input[name=user]')
.before('<div class="error">Введите имя</div>'); return false;
}
// всё хорошо - отправляем запрос на сервер $.post(
$(this).attr('action'), // ссылка куда отправляем данные
$(this).serialize()
);
return false;
Другие события формы: focus , blur+ метод blur(), select — выбор текста в textarea и input[type=text] + метод select(); submit — отправка формы + метод submit();
Примеры работы с элементами формы доступны на странице form.html
// данные формы
:button Selects <button> elements and elements with type="button"
:checkbox Selects inputs with type="checkbox"
:checked Selects checked inputs
:disabled Selects disabled form elements
:enabled Selects enabled form elements
:file Selects inputs with type="file"
:image Selects inputs with type="image"
:input Selects <input> , <textarea> , and <select> elements
:password Selects inputs with type="password"
:radio Selects inputs with type="radio"
:reset Selects inputs with type="reset"
:selected Selects options that are selected
:submit Selects inputs with type="submit"
:text Selects inputs with type="text"
Пример $('#myForm :input'); // get all elements that accept input
Для работы с формами используются методы, которые реализуют события:
.blur(); .change(); .focus(); .select() ;.serialize(); .serializeArray(); .submit(); .val()
Эффекты и анимация
В методах, с помощью которых можно «оживить» сайт первым параметром (необязательным идёт скорость в милисекундах.
Show() — показать элемент. В зависимости от параметров, либо просто прописывает элементу display: block; без анимации, либо медленно сворачивает элемент. hide() — скрыть элемент. Аналогично предыдущему.
toggle — показать/скрыть работает как переключатель hide / show.
slideDown — свёртывание, slideUp — развёртывание, slideToggle — свёртывание/развёртывание, в зависимости от текущего состояния
fadeIn — появление, fadeOut — затухание, fadeTo — появление-затухание до нужной прозрачности. Вторым параметром идёт прозрачность, до которой необходимо затухнуть
// скроем все картинки
$('img').hide();
// теперь вернём их на место
$('img').show();
Данные вызовы оперируют лишь CSS атрибутом display и переключают его из текущего состояния в none и обратно. В качестве первого параметра можно задать скорость анимации, для этого можно использовать одно из зарезервированных слов «slow» или «fast», либо же указывать скорость в миллисекундах (1000 мс = 1 сек):
$('img').hide('slow');
$('img').show(400);
вторым параметром в приведенных методах может быть callback-функция - она будет выполнена по окончанию анимации элементов:
// скрываем все картинки $('img').hide('slow', function (){alert("lmages was hidden");
});
$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});