.html()

Метод jQuery wrap()

Метод jQuery wrap() используется для вставки HTML вокруг выбранных элементов.


Код jQuery в следующем примере обернет элементы контейнера элементом <div> с классом .wrapper в готовом документе, тогда как весь внутренний контент элементов абзаца обернет сначала элементом <b>, а затем — элементом <em>.

<script type="text/javascript">
  $(document).ready(function(){
    // Оборачиваем контейнер новым элементов с классом wrapper
    $(".container").wrap('<div class="wrapper"></div>');
    // Оборачиваем содержимое параграфа элементами b и em
    $("button").click(function(){
      $("p").contents().wrap("<em><b></b></em>");
    });
  });
</script>

Вставка родительских элементов и элементов-предков

Библиотека jQuery предоставляет набор методов, обеспечивающих вставку элементов в документ как родительских или элементов-предков по отношению к существующим элементам. Такого рода операции называются обертыванием (wrapping), или внешней вставкой, (поскольку добавляемый элемент окружает собой уже существующие элементы). Краткое описание этой группы методов приведено в таблице ниже:

Методы для внешней вставки родительских элементов и элементов-предков
Метод Описание
wrap(HTML), wrap(jQuery), wrap(HTMLElement[]) Обертывает указанные элементы вокруг каждого из элементов, содержащихся в объекте jQuery
wrapAll(HTML), wrapAll(jQuery), wrapAll(HTMLElement[]) Обертывает указанные элементы вокруг набора элементов, содержащихся в объекте jQuery (рассматриваемых как единая группа)
wrapInner(HTML), wrapInner(jQuery), wrapInner(HTMLElement[]) Обертывает указанные элементы вокруг содержимого каждого из элементов, содержащихся в объекте jQuery
wrap(функция), wrapInner(функция) Динамически обертывает элементы с использованием функции

При обертывании элементов эти методы могут принимать HTML-фрагмент в качестве аргумента, но всегда следует проверять, чтобы этот фрагмент содержал только один внутренний элемент. В противном случае jQuery не сможет определить, что именно необходимо сделать. Отсюда следует, что каждый элемент в аргументе метода может иметь не более одного родительского и не более одного дочернего элемента.

Пример использования метода wrap() приведен ниже:

В этом сценарии мы создаем новый элемент div и используем метод css() для установки значения CSS-свойства border. Затем элемент div добавляется в качестве родительского элемента по отношению ко всем элементам div с классом drow в документе. Результаты выполнения сценария представлены на рисунке:

Элементы, которые вы передаете в виде аргумента методу wrap(), вставляются между каждым из элементов, содержащихся в объекте jQuery, и его текущим родительским элементом.

Обертывание набора элементов

Когда используется метод wrap(), новые элементы клонируются, и каждый из элементов, содержащихся в объекте jQuery, получает собственный новый родительский элемент. Чтобы вставить в документ элемент, который станет родительским сразу для нескольких элементов, следует использовать метод wrapAll(), как показано ниже:

Этот сценарий отличается от предыдущего лишь тем, что в нем используется метод wrapAll(). Страница в окне браузера показана на рисунке:

Новый элемент добавляется как общий родительский элемент для всего набора выбранных элементов.

Будьте внимательны, используя этот метод. Если выбранные элементы не имеют общих родителей, то новый элемент будет добавлен как родительский для первого из них. После этого jQuery переместит все остальные элементы так, чтобы они стали сестринскими по отношению к первому элементу:

В этом сценарии выбираются элементы img, и эти элементы не имеют общих родителей. Вид страницы в окне браузера представлен на рисунке:

Новый элемент div был добавлен в документ как родительский по отношению к элементу img, соответствующему изображению астры, тогда как все остальные элементы изображений были перемещены в структуре DOM в позиции сестринских по отношению к нему элементов.

Обертывание содержимого элементов

Метод wrapInner() позволяет окружать элементами содержимое других элементов (а не сами элементы). Соответствующий пример приведен ниже:

Метод wrapInner() вставляет новые элементы между каждым из содержащихся в объекте jQuery элементом и его дочерним элементом. В данном сценарии выбираются элементы, принадлежащие классу dcell, и содержимое каждого из них заключается в новый элемент div. Страница в окне браузера показана на рисунке:

More Examples

Example

Get the HTML content of a <p> element with id=»myP»:


var x = document.getElementById(«myP»).innerHTML;

Example

Get the HTML content of a <ul> element with id=»myList»:

var x = document.getElementById(«myList»).innerHTML;

Example

Change the HTML content of two elements:

document.getElementById(«myP»).innerHTML = «Hello Dolly.»; document.getElementById(«myDIV»).innerHTML = «How are you?»;

Example

Alert the HTML content of a <p> element with id=»demo»:

alert(document.getElementById(«demo»).innerHTML);

Example

Delete the HTML content of a <p> element with id=»demo»:

document.getElementById(«demo»).innerHTML = «»;  // Replaces the content of <p> with an empty string

Example

Change the HTML content, URL, and target of a link:

document.getElementById(«myAnchor»).innerHTML = «W3Schools»; document.getElementById(«myAnchor»).href = «https://www.w3schools.com»; document.getElementById(«myAnchor»).target = «_blank»;

Используем aside

Вероятнее всего этот виджет, будет выглядеть как боковая панель, и отображать содержание указанного пользователя Twitter. Учитывая это, я решил поместить содержимое в тег <aside>. Для того чтобы с лёгкостью получить доступ к этому элементы выставим ему ID.

К слову о разметке. Все заголовки сообщений пользователя Twitter будут включены в тег <h2>, а изображение и всё остальное в теге <p>. Вы можете изменить это на своё собственное предпочтение, когда будете реконструировать данный пример. Мы могли бы получить все необходимые данные через JSON, что мы и сделаем, однако, если в процессе загрузки возникнет задержка, посетителю будет отображено множество пустых блоков. Так что лучше нам дождаться полной загрузки и затем произвести заполнение блоков.

Ещё у нас на странице будут реализованы вкладки для переключения между списками сообщений, друзей и подписчиков. Все они будут заключены в теги

  • ,
  • и . Вкладка со списком сообщений будет отображаться по умолчанию, поэтому нам необходимо указать специальный класс CSS для активной вкладкиВ более крупном проекте предпочтительнее использовать jQuery для переключения вкладок интерфейса, но я не хотел концентрировать внимание на этом, т.к. тема урока другая

Наконец, у нас есть всё что нужно для того, чтобы разместить все входящие данные: внешний контейнер с ID, три вкладки для сообщений, друзей и последователей, которые также имеют свои ID для удобства выборки. Мы также добавили элемент

для тех посетителей, которые не используют JavaScript при просмотре web-страницОбратите внимание, что мы будем использовать плагин tmpl, который даст нам возможность использовать шаблоны jQuery. Этот плагин можно скачать тут

Чуть ранее я упомянул о специальных таблицах стилей. Откройте новый файл в вашем любимом текстовом редакторе и добавить следующий код:

#tweetbox {
    display:block; width:300px; padding:10px; border:1px solid #aaa; -moz-border-radius:5px;
    border-radius:5px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    background-color:#eee;
}
#tweetbox img { display:block; }
#user { margin-bottom:10px; float:left; }
#user h2 { margin:0 0 10px 0; position:relative; font-size:18px; }
#user img { float:left; }
#user p { width:230px; margin:0; position:relative; float:left; font-size:10px; color:#333; }
#user img { display:block; margin-right:10px; border:3px solid #333; }
#tools { margin:0; *margin-bottom:-10px; padding:0; clear:both; list-style-type:none; }
#tools li {  float:left; }
#tools a {
    display:block; height:20px; padding:3px 24px; border:1px solid #aaa; border-bottom:none;
    -moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; margin-right:-1px;
    position:relative; font-size:14px; outline:none; background-color:#d6d6d6;
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0.5, #E8E8E8), color-stop(0, #DBDBDB), color-stop(0.5, #D6D6D6));
    background-image: -moz-linear-gradient(center top, #E8E8E8 50%, #DBDBDB 0%, #D6D6D6 50%);
}
a { text-decoration:none; color:#333; }
#tools .on { height:21px; margin-top:-1px; top:1px; }
#feed { width:298px; border:1px solid #aaa; clear:both; background-color:#d6d6d6; }
#feed > div { display:none; }
noscript { display:block; padding:10px; font-size:13px; color:#333; }

Сохраните этот файл как tweetbox.css в том же каталоге, где находятся ваши HTML страницы. Это лишь малое, что мы можем указать для дизайна нашего виджета

В коде, который мы только что привели, вы можете заметить несколько приёмов CSS3: округлённые углы (обратите внимание, мы больше не нуждаемся в -WebKit- для этих целей!), а так же некоторые градиенты для вкладок. Следует отметить, что мы прячем все блоки, за исключением одного — активного

На данный момент виджет должен выглядеть так:

Вставка новых элементов

Метод Append предназначен для создания и вставки нового элемента в уже существующий контекст. Технически, новый элемент вставляется прямо перед закрывающимся тегом родителя.

Сначала мы хотим показать как это делается на чистом JavaScript, чтоб вы лучше прочувствовали, насколько jQuery упрощает работу.

В JavaScript перед тем как добавить какой-то элемент, нам нужно его создать при помощи метода .createElement(). В следующем примере, мы создаем элемент <div> и помещаем его в переменную.

var div = document.createElement('div');

Для того, чтобы вставить новый элемент на страницу, необходимо воспользоваться методом .appendChild(). В следующем примере, мы добавляем новый элемент в тело документа:

var div = document.createElement('div');
document.body.appendChild(div);

Если мы посмотрим на код страницы через Developer Tool, то увидим наш новый элемент сразу перед закрывающимся тегом </body>.

Теперь, давайте сделаем то же самое с помощью jQuery. Тут всё гораздо проще. Всё, что нам нужно, так это воспользоваться методом .append():

$('body').append('<div>');

Выполнив данный код, вы получите точно такой же результат. Новый элемент будет добавлен в тело документа. Только тут, нам это обошлось в одну строчку кода.

Загрузка части страницы

Иногда сервер может вернуть больше разметки, чем нужно. Например, вы запрашиваете статью с сервера, чтобы вставить текст на свою страницу, но весь документ вам не нужен.

Метод jQuery позволяет легко ограничивать объем полученной разметки. Нужно просто добавить пробел после запроса URL, за которым будет следовать селектор для выбора нужной части страницы. jQuery получит всю страницу через AJAX, но только нужная часть разметки будет вставлена в текущий код.


Например:

$('#articleContainer').load( "newArticle.html #articleBody" );

Так можно получать новые страницы с сервера. Не нужно будет перегружать каждый раз страницу. Также можно выводить сообщение о загрузке для посетителя, чтобы он был в курсе происходящего. Например, можно добавить сообщение»Загрузка, подождите!» в контейнер , затем вызвать метод чтобы загрузить новое содержание в . Как только новая разметка будет получена , сообщение будет автоматически замещено.

Плавное проявление/затухание при наведении курсора мыши

Еще один приятный визуальный эффект, который очень популярен — плавное проявление/затухание элементов при наведении на них курсора мыши. Следующий код устанавливает непрозрачность 100% при наведении курсора мыши, и 60% — при потере фокуса.

$(document).ready(function(){
    $(".thumbs img").fadeTo("slow", 0.6); // Устанавливаем непрозрачность миниатюр до 60% при загрузке страницы.

    $(".thumbs img").hover(function(){
        $(this).fadeTo("slow", 1.0); // При наведении курсора, непрозрачность становится 100%.
    },function(){
        $(this).fadeTo("slow", 0.6); // Пр потере фокуса непрозрачность опять становится 60%.
    });
});

Ограничения

Существуют так же и некоторые ограничения, распространяемые на данный язык:

  • JavaScript не может закрывать окна и вкладки, которые не были открыты с его помощью
  • Не может защитить исходный код страницы и запретить копирование текста или изображений со страницы
  • Не может осуществлять кроссдоменные запросы, получать доступ к веб-страницам, расположенным на другом домене. Даже когда страницы из разных доменов отображаются в одно и тоже время в разных вкладках браузера, то код JavaScript принадлежащий одному домену не будет иметь доступа к информации о веб-странице из другого домена. Это гарантирует безопасность частной информации, которая может быть известна владельцу домена, страница которого открыта в соседней вкладке
  • Не имеет доступа к файлам, расположенным на компьютере пользователя, и доступа за пределы самой веб-страницы, единственным исключением являются файлы cookie, это небольшие текстовые файлы, которые JavaScript может записывать и считывать

В целом, можно сказать, что он разработан таким образом, чтобы затруднить выполнение вредоносного кода.

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

outerHTML

Следующее свойство тега-элемента outerHTML работает также как и innerHTML, но содержит информацию не только о содержимом тега, но и сам тег. С его помощью мы можем изменять тег целиком, то есть, на его место записывать другой тег. Например:

h1.outerHTML = "<h2>Измененный <u>заголовок</u> из h1 в h2";

Теперь у нас вместо заголовка h1 появляется заголовок h2 с новым содержимым. И здесь есть одна тонкость: переменная h1 продолжает содержать информацию о заголовке h1:

console.dir(h1);

То есть, мы на странице заменили этот заголовок, но в переменной прежняя информация продолжает существовать. В частности, если вывести содержимое свойства outerHTML, то увидим прежний заголовок:

console.log(h1.outerHTML);

Поэтому, как только мы заменяем какой-либо элемент через свойство outerHTML, прежнюю переменную следует либо обновить новой информацией, либо отбросить и в дальнейшем не использовать.

Изменение значения атрибута

Чтобы изменить значение атрибута HTML, используйте следующий синтаксис:

document.getElementById(id).attribute = новое значение

В этом примере изменяется значение атрибута объекта элемента :

Пример

<!DOCTYPE html><html> <body> <img id=»myImage» src=»smiley.gif»> <script> document.getElementById(«myImage»).src = «landscape.jpg»; </script> </body> </html>

Объясненный пример:

  • Приведенный выше HTML документ содержит элемент с
  • Мы используем HTML DOM, чтобы получить элемент с помощью
  • JavaScript изменяет содержимое атрибута этого элемента, из «smiley.gif» на «landscape.jpg»

Делаем запрос POST с помощью метода $.post()

В то время как метод  позволяет делать запросы AJAX с помощью метода HTTP GET, метод реализует запросы с помощью метода HTTP POST. Синтаксис вызова аналогичен методу .

Например, изменим нашу демонстрацию с передачей прогноза погоды из предыдущего урока на использование метода :

$.post( "getForecast.txt", data, success, "json" );

Пробуем запустить демонстрацию и получаем такое же окно, как и в предыдущем уроке.

Метод HTTP POST обычно используется для отправки данных формы. Причина заключается в том, что позволяет отправлять небольшие объемы данных (обычно несколько сот символов), а  метод POST может пересылать столько данных, сколько вам нужно. Поэтому, если требуется переслать большой объем данных в запросе AJAX, используйте метод .


С этим читают