Создание, работа и добавление HTML на лету
Вы можете создать HTML-разметку на лету, передав функции jQuery строку необработанного HTML.
|
01
02
03
04
05
06
07
08
09
10
11
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function($){
alert($(‘<div><a></a></div>’).get(0).nodeName);
alert($(‘<div><a></a></div>’).length);
alert($(‘<div><a></a></div><div><a></a></div>’).length);
})(jQuery);
</body>
</html>
|
Важно отметить, что при создании структур DOM с использованием функции jQuery только корневые элементы в структуре добавляются в набор оболочек. В предыдущем примере кода элементы <div> будут единственными элементами в наборе оболочки.
Мы можем использовать метод find() для работы с любым элементом в структуре HTML после его создания.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script>
(function ($) {
$(‘<div><a></a></div>’)
.find(‘a’)
.text(‘jQuery’)
.attr(‘href’, ‘http://www.jquery.com’);
})(jQuery);
</body>
</html>
|
После работы с вновь созданным HTML, его также можно добавить в DOM, используя один из методов манипуляции jQuery. Ниже мы используем метод appendTo() для добавления разметки на страницу.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function($){ $(‘<div><a></a></div>’)
.find(‘a’)
.text(‘jQuery’)
.attr(‘href’, ‘http://www.jquery.com’)
.end().appendTo(‘body’);
})(jQuery);
</body>
</html>
|
Примечания. Простые элементы, которые не содержат атрибутов, например, $('<div></div>') , создаются с помощью метода DOM document.createElement , тогда как во всех остальных случаях используется свойство innerHTML . Фактически, вы можете напрямую передать функции jQuery элемент, созданный с помощью document.createElement -eg $(document.createElement('div')) .
HTML-строка, переданная в jQuery, не может содержать элементы, которые могут считаться недействительными внутри элемента <div> .
HTML-строка, переданная в функцию jQuery, должна быть правильно сформирована.
Вы должны открывать и закрывать все элементы HTML при передаче jQuery HTML. Невыполнение этого требования может привести к ошибкам, в основном в Internet Explorer. На всякий случай всегда закрывайте свои элементы HTML и избегайте написания ярлыков HTML — например, $(<div />) .
Grokking индекс () метод
Вы можете определить индекс элемента в наборе оболочки, передав этот элемент в метод index() . В качестве примера, предположим, что у вас есть набор оболочек, содержащий все элементы <div> на веб-странице, и вы хотели бы знать индекс последнего элемента <div> .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// Alerts «3»
alert($(‘div’).index($(‘div:last’)));
})(jQuery);
</body>
</html>
|
Использование index() самом деле не имеет смысла, пока мы не рассмотрим, как его можно использовать с событиями. Например, щелкнув элементы <div> в приведенном ниже коде, мы можем передать элемент <div> на который нажали (с ключевым словом this ), в метод index() чтобы определить индекс <div> на который нажали.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<div id=»nav»>
<div>nav text</div>
<div>nav text</div>
<div>nav text</div>
<div>nav text</div>
</div>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// Alert index of the clicked div amongst all div’s in the wrapper set
$(‘#nav div’).click(function () {
alert($(‘#nav div’).index(this));
// or, a nice trick…
alert($(this).prevAll().length);
});
})(jQuery);
</body>
</html>
|
Гроккинг текста () Метод
Можно ошибочно предположить, что метод text() возвращает только текстовый узел первого элемента в наборе оболочки. Тем не менее, он фактически объединит текстовые узлы всех элементов, содержащихся в наборе оберток, а затем вернет объединенное значение в виде одной строки. Убедитесь, что вам известны эти функции, иначе вы можете получить неожиданные результаты.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<div>1,</div>
<div>2,</div>
<div>3,</div>
<div>4</div>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
alert($(‘div’).text());
})(jQuery);
</body>
</html>
|
Обновить или удалить символы с помощью регулярного выражения
Используя метод JavaScript replace() сочетании с некоторыми функциями jQuery, мы можем очень легко обновить или удалить любой шаблон символов из текста, содержащегося в элементе.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<p>
I really hate using JavaScript.
ever!
</p>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
var $p = $(‘p’);
// Replace ‘hate’ with ‘love’
$p.text($p.text().replace(/hate/ig, ‘love’));
// Remove ‘twister’ and replace it with nothing
$p.text($p.text().replace(/twister/ig, »));
// That is how the replace() string method is chained after using text()
})(jQuery);
</body>
</html>
|
Вы также можете обновить любые символы, содержащиеся в строке, возвращаемой из html() . Это означает, что вы можете не только обновлять текст, но также обновлять и заменять элементы DOM с помощью регулярного выражения.
Гроккинг .contents () метод
Метод .contents() можно использовать для поиска всех узлов дочерних элементов, включая текстовые узлы, содержащиеся внутри элемента. Однако здесь есть одна загвоздка. Если извлеченное содержимое содержит только текстовые узлы, выделение будет помещено в оболочку, заданную как один текстовый узел. Однако если содержимое, которое вы извлекаете, имеет один или несколько узлов элементов среди текстовых узлов, то метод .contents() будет содержать текстовые узлы и узлы элементов. Изучите код ниже, чтобы понять эту концепцию.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<p>I love using jQuery!</p>
<p>I love <strong>really</strong> using jQuery!</p>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// Alerts «I love using jQuery!»
alert($(‘p:first’).contents().get(0).nodeValue);
// Alerts «I love»
alert($(‘p:last’).contents().get(0).nodeValue);
// Alerts «really» but is an HTML element, not a text node
alert($(‘p:last’).contents().eq(1).text());
// Alerts «using jQuery!»
alert($(‘p:last’).contents().get(2).nodeValue);
})(jQuery);
</body>
</html>
|
Обратите внимание, что когда элемент в наборе обертки является текстовым узлом, мы должны извлечь значение с помощью .get(0).nodeValue . Метод contents() удобен для извлечения значений текстовых узлов. Из contents() DOM можно извлечь только текстовые узлы с помощью contents() .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<p>jQuery gives me <strong>more <span>power
</p>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function($){ $(‘p’) .find(‘*’) // Select all nodes
.andSelf() // Include <p>
.contents() // Grab all child nodes, including text
.filter(function() {return this.nodeType == Node.TEXT_NODE;}) // Remove non-text nodes
.each(function (i, text) { alert(text.nodeValue) });
})(jQuery);
</body>
</html>
|
Использование remove () не удаляет элементы из набора Wrapper
Когда вы используете remove() , фрагмент DOM из DOM, элементы, содержащиеся в удаленной структуре DOM, все еще содержатся в наборе оболочки. Вы можете удалить элемент, работать с этим элементом, а затем фактически поместить этот элемент обратно в DOM, все в пределах одной цепочки jQuery.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<div>remove me</div>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(‘div’)
.remove().html(‘<a href=»http://www.jQuery.com»>jQuery</a>’)
.appendTo(‘body’);
})(jQuery);
</body>
</html>
|
Дело в том, что если вы remove() элементы, это не значит, что они удалены из набора оболочки jQuery.