Изучаем Java. Получение и установка стилей
Как изменить содержимое элементов в jQuery
В этом уроке мы попробуем свои силы в изменении содержимого элементов в jQuery.
Итак, наиболее часто используемой операцией является изменение содержимого элементов. Вне библиотеки jQuery для этой цели используется свойство innerHTML объекта document. Например, чтобы вставить новый фрагмент в элемент с идентификатором divl, можно воспользоваться следующим кодом.
alert($("div").eq(0).text());
Новое значение&1t;/b>
alert($("div").html());
$("div").text("Новое значение");
$("#divl").append("Новый текст");
Текст
Текст
Новый Текст
Теперь добавим DOM-элемент.
$("#divl").append($("Новый текст").get(0));
$("#divl").append($("Новый текст")) ;
Prepend(Выражение) - добавляет Выражение в начало содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу appendO, за исключением того, что добавляет Выражение не в конец элемента, а в его начало. Для примера добавим HTML-код в начало элемента.
$("#divl").prepend("Новый текст");
Текст
Результат будет выглядеть следующим образом.
Новый текст
Текст
$("Новый текст").appendTo("#divl");
$("#divl").append("Новый текст");
$("Новый текст").prependTo("#divl");
$("#divl").prepend("Новый текст");
Как добавить содержимое перед элементом или после него
В предыдущем разделе мы рассмотрели изменение внутреннего содержимого элемента. Библиотека jQuery предоставляет также методы, которые позволяют добавить какое-либо содержимое перед элементом или после него. Рассмотрим эти методы.
Aftег (Выражение) - добавляет Выражение после всех элементов коллекции. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код после элемента.
$("#divl").after("Новый текст");
текст
Результат будет выглядеть следующим образом.
текст Новый текст
Теперь добавим DOM-элемент.
$("#divl").after($("Новый текст").get(0));
А теперь добавим созданный элемент коллекции jQuery. $("#divl").after($("Новый текст"));
Before (Выражение) - добавляет Выражение перед всеми элементами коллекции. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу after (), за исключением того, что добавляет Выражение не после элемента, а перед ним. Для примера добавим HTML-код перед элементом.
$("#divl").before("Новый текст");
текст
Результат будет выглядеть следующим образом.
Новый текст текст
InsertAfter (Селектор) - добавляет коллекцию элементов jQuery после всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код после элемента с идентификатором divl.
$("Новый текст").insertAfter("#divl");
Результат будет таким же, как и при использовании метода after () .
$("#divl").after("Новый текст");
InsertBefore (Селектор) - добавляет коллекцию элементов jQuery перед всеми элементами, соответствующими указанному селектору. Для примера добавим HTML-код перед элементом с идентификатором divl.
$("Новый текст").insertBefore("#divl");
Результат будет таким же, как и при использовании метода before () .
$("#divl").before("Новый текст");
Вложение элементов
Все элементы коллекции можно разместить в каком-либо другом элементе. Для вложения элементов предназначены следующие методы.
Wraplnner (HTML-элемент или BОМ-элемент) -вкладывает внутреннее содержимое каждого элемента коллекции в другой элемент. Для примера выделим содержимое всех тегов div.
$ (“div”) .wraplnner (“”) ;
текст l текст 2
Результат будет выглядеть следующим образом.
текст l
Текст 2
Такого же эффекта можно достичь, передав в качестве параметра DOM-элемент.
$("div") .wraplnner(document.createElement ("b"));
Можно также передать элемент, созданный с помощью функции $ ().
$ ("div") .wraplnner ($ (MM)) ;
Wrap (HTML-элемент или BОМ-элемент) -полностью вкладывает каждый элемент коллекции в другой элемент.
$("div") .wrap("") ;
Текст l Текст 2
Результат выполнения таков:
Текст l
Текст 2
WrapAll (HTML-элемент или ВОМ-элемент) - собирает все элементы коллекции в одном месте и вкладывает их в другой элемент.
$ ("div") .wrapAll (" H) ;
Какой-то текст 1
Текст
Какой-то текст Текст 2
Какой-то текст 3 Текст 3
Результат будет выглядеть следующим образом.
Какой-то текст 1
Текст lТекст 2Текст 3
Какой-то текст 2 Какой-то текст 3
Как видно из примера, все элементы коллекции были размещены после первого элемента и расположены внутри тега u.
Перемещение и клонирование элементов
Если в качестве параметра методов before (), prepend (), append () и after () указать коллекцию существующих элементов jQuery, то они будут перемещены. Куда будут вставлены элементы, зависит от конкретного метода: before () (перед элементом), ргеpend() (в начало содержимого), append () (в конец содержимого), after () (после элемента). Для примера найдем все ссылки на странице и добавим их в конец элемента.
$("ttdivl").append($("а"));
Текст
l
Текст1
Как видно из примера, после удаления содержимого элемента с идентификатором divl сам элемент все еще остается доступным для манипуляций.
Remove ([Селектор]) - полностью удаляет элементы из объектной модели документа.
Этот элемент будет полностью удален
Данный пример демонстрирует отсутствие элемента после щелчка на кнопке Удалить. Щелкнув на кнопке Количество элементов в первый раз, мы получим число 1, а если щелкнуть на ней после удаления элемента, то получим число 0.
Если коллекция состоит более, чем из одного элемента, то будут удалены все элементы. Метод remove () позволяет задать дополнительное условие, которому должны соответствовать удаляемые элементы. В качестве примера удалим все ссылки с расширением. php.
$("а") . remove (" ") ;
Изменение содержимого элементов
Получать коллекцию элементов и осуществлять доступ к отдельному ее элементу мы уже научились. Теперь рассмотрим различные методы, позволяющие изменять свойства и значения элементов коллекции. Некоторые методы мы уже использовали в наших примерах для вывода результата или изменения свойств элементов.
Наиболее часто используемой операцией является изменение содержимого элементов. Вне библиотеки jQuery для этой цели используется свойство innerHTML объекта document. Например, чтобы вставить новый фрагмент в элемент с идентификатором divl, можно воспользоваться следующим кодом.
document.getElementByld("divl").innerHTML = "Новый текст";
Библиотека jQuery также позволяет использовать это свойство. Для этого находим элемент с помощью функции $ (), а затем преобразуем коллекцию элементов jQuery в набор DOM-элементов.
$("#divl").innerHTML = "Новый текст";
Для этой цели можно также воспользоваться методом get () .
$("#divl").get(0).innerHTML = "Новый текст";
В библиотеке jQuery для изменения содержимого элементов предназначены следующие методы.
Text () - позволяет получить или задать текст элемента. Если параметр не указан, то метод возвращает текстовое значение без тегов. При наличии нескольких элементов в коллекции будут возвращены все значения в виде строки. Если необходимо получить значение только первого элемента из коллекции, то можно воспользоваться методом eq () .
alert($("div").eq(0).text());
Можно также ограничить набор с помощью селектора:
first. alert($("div:first").text());
При указании строки в качестве параметра она заменит содержимое всех элементов коллекции. В случае наличия в строке специальных символов они будут заменены на HTML-эквиваленты.
$("div").text("Новое значение");
В этом примере строка в исходном HTML-коде будет выглядеть следующим образом.
Новое значение
Html () - позволяет получить или задать HTML-код элемента. Если параметр не указан, то метод возвращает значение вместе с тегами. При наличии нескольких элементов в коллекции будет возвращено значение только первого элемента.
alert($("div").html());
При указании HTML-кода в качестве параметра он заменит содержимое всех элементов коллекции, и объектная модель документа будет обновлена. Выведем HTML-код во всех тегах div.
$("div").text("Новое значение");
Если необходимо изменить значение только первого элемента из коллекции, то можно воспользоваться методом eq () или селектором: first.
$("div:first").html("Новое значение");
Append (Выражение) - добавляет Выражение в конец содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код в конец элемента.
$("#divl").append("Новый текст");
Текст
Результат будет выглядеть следующим образом.
Текст
Новый Текст
Теперь добавим DOM-элемент.
$("#divl").append($("Новый текст").get(0));
А теперь добавим созданный элемент коллекции jQuery.
$("#divl").append($("Новый текст")) ;
Prepend(Выражение) - добавляет Выражение в начало содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу append (), за исключением того, что добавляет Выражение не в конец элемента, а в его начало. Для примера добавим HTML-код в начало элемента.
$("#divl").prepend("Новый текст");
Текст
Результат будет выглядеть следующим образом.
Новый текст
Текст
AppendTo (Селектор) - добавляет коллекцию элементов jQuery в конец всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в конец элемента с идентификатором divl.
$("Новый текст").appendTo("#divl");
Результат будет таким же, как и при использовании метода append () .
$("#divl").append("Новый текст");
Как видно из примера, мы поменяли параметры местами и использовали метод append () вместо метода appendTo ().
PrependTo (Селектор) - добавляет коллекцию элементов jQuery в начало всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в начало элемента с идентификатором divl.
$("Новый текст").prependTo("#divl");
Результат будет таким же, как и при использовании метода prepend () .
$("#divl").prepend("Новый текст");
Бывают случаи, когда вам может понадобиться создать перетаскиваемый элемент внутри вашего веб-приложения. Это отличная функциональность, однако, возможно вы хотите, чтобы элемент оставался на новом месте, после перетаскивания. В сегодняшней статье вы узнаете, как можно легко перетаскивать и закреплять в новом месте нужный элемент даже после перезагрузки страницы, с помощью захвата и хранения его X и Y координат.
СценарийИтак, у вас есть элемент на странице. Вы можете перетаскивать его туда-сюда. Но, когда страница перезагружается, элемент возвращается на исходную позицию. И хотя нам нужно, чтобы элемент был перетаскиваемый, при этом нужно, чтобы наш элемент достаточно было перетащить один раз. Давайте рассмотрим простое решение, реализующее данную функциональность.
НачалоДля этого примера нам понадобится библиотека , и плагин JQuery-JSON . Кроме этого, мы также будем использовать PHP и базу данных MySQL для разбора и хранения наших данных. Если вы новичок в jQuery, не беспокойтесь. JQuery — это расширяемая, быстрая и легковесная JavaScript-библиотека, которую легко и весело использовать. Библиотека имеет хорошо структурированную документацию и огромное сообщество.
HTML и CSSНачнем с HTML-разметки и стилей для нашего примера. Сначала CSS:
Html, body { background:#151515; margin:0 0 0 0; padding:0 0 0 0; } #glassbox { background:#333; border:1px solid #000; height:400px; margin:30px auto auto auto; position:relative; width:960px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #element { background:#666; border:1px #000 solid; cursor:move; height:143px; padding:10px 10px 10px 10px; width:202px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #respond{ color:#fff; margin:0 auto 0 auto; width:960px; }
CSS – очень простой. Мы назначаем html и body нулевые свойства, для чистки внешних и внутренних отступов, далее устанавливаем значения высоты, ширины и другие свойства для наших элементов. — moz-border-radius и -webkit-border-radius – это два свойства, позволяющие нам создать закругленные углы (работает пока только в Mozilla Firefox и Safari 3) для наших элементов. Теперь, давайте взглянем на HTML:
Simple Draggable Element Persistence with jQuery
Move the Box
Как видите, мы создали очень простую страницу, в которую подключили наш CSS, библиотеку JavaScript и плагины, кроме того, страница содержит элементы, к которым мы будем применять некоторые эффекты и события. Обратите внимание, что файл jquery-ui представляет собой специальную сборку, включающую в себя только ядро и функции перетаскивания элементов.
Теперь самое интересное! Сначала давайте рассмотрим базовые функции, которые мы будем использовать для применения некоторых эффектов к нашим элементам. Разберем все до основания.
$(document).ready(function() { $("#element").draggable({ containment: "#glassbox", scroll: false })
Сначала мы говорим браузеру: «Эй, это код, который мы хотим запустить; это не HTML, это JavaScript». Затем, мы ждем пока документ полностью загрузится, после того как это случилось, вызываем функцию для получения нашего блока #element , и добавляем к нему обработчик перетаскивания с базовыми настройками. Опция containment содержит наш элемент внутри родительского блока, и мы устанавливаем значение scroll в false , потому что, нам не нужен скролл.
Mousemove(function(){ var coord = $(this).position(); $("p:last").text("left: " + coord.left + ", top: " + coord.top); })
Внутри этого фрагмента, мы вызываем, обработчик события mousemove и говорим ему: «Когда мышь передвигается, установить переменную coord равной значению текущей позиции нашего блока #element» Затем мы получаем последний параграф в блоке #(“p: last”) и печатаем текст, выводящий значения свойств left(x) и top(y) нашего элемента, относительно родительского объекта (которым является блок #glassbox).
Mouseup(function(){ var coords=; var coord = $(this).position(); var item={ coordTop: coord.left, coordLeft: coord.top }; coords.push(item); var order = { coords: coords }; $.post("updatecoords.php", "data="+$.toJSON(order), function(response){ if(response=="success") $("#respond").html("X and Y Coordinates Saved!").hide().fadeIn(1000); setTimeout(function(){ $("#respond").fadeOut(1000); }, 2000); }); }); }); lt;/script>
Ну да, здесь уже сложнее. В этом фрагменте мы собираемся сделать кучу вещей. Сначала, мы устанавливаем пустой массив, а затем получаем некоторые значения для его наполнения. С помощью вызова обработчика событий.mouseup() мы велим браузеру отслеживать событие, когда вы отпускаете кнопку мыши. Мы указываем, что переменная coords – это пустой массив и снова устанавливаем ее значение равной позиции нашего блока #element .
Затем, нам нужно создать список из двух строчек, которыми будут coordTop: и coordLeft: , соответствующие позициям left и top , нашего блока. С помощью строки coords.push(item) , мы заполним наш список массивом из координат. Затем задаем переменную order как новый список, в котором ключ coords будет соответствовать нашему массиву coords . Теперь немного аякса.
$.post – это обработчик запроса AJAX, который загружает удаленную страницу, с помощью метода HTTP POST . Эта функция принимает следующие параметры: url, дата, ответ и тип данных для возврата. В этом примере, мы укажем файле updatecoords.php в качестве нашего URL, потому что, именно этому файлы мы хотим отправить наши данные. Затем, мы опишем тип данных, с помощью включения функции $.toJSON , определенной в плагине JSON и назначим переменную order , в качестве данных, которые должен вернуть.toJSON .
Далее, мы создаем ответ, который проверяет возвращение успешного ответа от нашего PHP-файла. В случае получения успешного ответа, мы отображаем сообщение об успешном сохранении координат, используя метод.fadeIn() и скорость 1000 миллисекунд, затем задаем таймер на 2000 миллисекунд, и снова медленно прячем это сообщение, с помощью метода.fadeOut() . Вот так будет выглядеть наш JavaScript в целом виде:
$(document).ready(function() { $("#element").draggable({ containment: "#glassbox", scroll: false }).mousemove(function(){ var coord = $(this).position(); $("p:last").text("left: " + coord.left + ", top: " + coord.top); }).mouseup(function(){ var coords=; var coord = $(this).position(); var item={ coordTop: coord.left, coordLeft: coord.top }; coords.push(item); var order = { coords: coords }; $.post("updatecoords.php", "data="+$.toJSON(order), function(response){ if(response=="success") $("#respond").html("X and Y Coordinates Saved!").hide().fadeIn(1000); setTimeout(function(){ $("#respond").fadeOut(1000); }, 2000); }); }); });
Поместите этот код ниже HTML, сразу после закрывающего тега body.
PHPХорошо, давайте сделаем что-нибудь с данными, которые приходят от нашего JQuery. Сначала нужно создать простую базу данных, для хранения наших координат, которые мы впоследствии будем использовать для определения позиции нашего элемента. Затем, нам понадобится файл config.php, в котором будут записаны параметры подключения к базе данных, а затем мы перейдем к updatecords.php.
Database: "xycoords" CREATE TABLE IF NOT EXISTS coords (id int(11) NOT NULL AUTO_INCREMENT, x_pos int(4) NOT NULL, y_pos int(4) NOT NULL, PRIMARY KEY (id)) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Config.php
updatecoords.php
Здесь все довольно просто. Первое, что мы делаем – это проверяем, были ли переданы данные в файл. Если это произошло, мы включаем наш файл с настройками config.php и назначаем переменной $data значение json_decode(passed post variable); json_decode – это PHP-функция, представленная в PHP 5.2.0, которая позволяет декодировать строку JSON.
Поскольку наша переменная $data содержит массив данных, нам нужно разобрать его на части, чтобы получить нужные значения. Для этого мы пройдемся по массиву $data->coords () (который был получен из переменной order в JavaScript) и обработаем каждый элемент. В результате, из каждой пары ключ – значение будет создан объект списка, который мы в дальнейшем укажем и создадим переменную для его вывода. При этом мы будем использовать функцию preg_replace , для исключения ненужных символов. Кроме того, мы подготовим наши значения для вставки в базу данных, путем экранирования кавычек, и апострофов, с помощью функции mysqli_real_escape_string . Если все прошло хорошо, нам нужно будет вернуть успешный результат JavaScript.
Теперь, когда у нас уже все готово, для того чтобы получить координаты элемента и передать их в PHP для записи, нам понадобится изменить нашу HTML-разметку для отображения позиции элемента. Для этого, мы удалим простую HTML-разметку и создадим ее с помощью PHP:
