5.7.2. Манипуляции с dom

Метод after(content) — вставляет контент после каждого элемента из выборки, например $("p").after("<hr/>") - после каждого параграфа вставит линию.

insertAfter(etement) — вставляет элементы из выборки после каждого элемента переданного в качестве аргумента. Строка $("<hr/>").insertAfter("p") - означает «линия будет вставлена после каждого параграфа». before(content) — вставляет контент пе­ред каждым элементом из выборки. insertBefore(etement) — вставляет элементы из выборки перед каждым элементом переданным в качестве аргумента. append(content) — вставляет контент в конец каждого элемента из выборки, т.е. строку кода $("p").append("<hr/>"), следует читать как «в конец каждого параграфа будет добав­лена линия»

appendTo(element) — вставляет выбранный контент в конец каждого элемента переданного в качестве аргумента: $("<hr/>").appendTo("p") — «линия будет добав­лена в конец каждого параграфа»

prepend(content) — вставляет контент в начало каждого элемента из выборки

prependTo(element) — вставляет выбранный контент в начало каждого элемента переданного в качестве аргумента

replaceWith(content) - заменяет найденные элементы новым содержимым, replaceAll(target) - вставляет контент взамен найденному.

wrap(elem) - оборачивает найденный элемент новым элементом, wrapAll(elem) - оборачивает найденные элементы новым элементом, wraplnner(elem) - оборачивает контент каждого найденного элемента новым элементом, unwrap() - удаляет родительский элемент у найденных элементов; clone(withDataAndEvents) - клонирует выбранные элементы, для вставки копий назад в DOM, detach() - удаляет элемент из DOM, но сохраняет все данные о нём в jQuery, empty() - удаляет текст и дочерние DOM элементы, remove() - удаляет элемент из DOM, насовсем.

text() - вернёт текст заданного элемента, text(newText) - заменит текст внутри выбранных элементов.

<html ><head>

<meta charset="UTF-8"/>

<title>prjq41 - "Элементы JQuery</title>

<script type="text/javascript" src="js/jquery-1.8.3.js"> </script>

<style type="text/css">

body{color: green;}

h1{text-align:center;}

</style>

</head>

<body >

<div id="content" class="wrapper box">

<hgroup><h1>Page Title</h1> <h2>Page Description</h2> </hgroup>

<article id="stick"> <h2>Article Title</h2>

<p>Заголовок статьи</p> </article>

<article> <h2>Article Description</h2>

<p>Описание текста</p> </article>

</div>

<div id="cont"><h3 >Здесь контент</h3> </div>

<script>

var $myNewElement = $('<p>New element</p>');

$myNewElement.appendTo('#content');

$('#idname a:first').attr('href', 'prjq1.htm');

$('#idname a:last').attr({// Manipulating multiple attributes

href : 'prjq2.htm' , rel : 'super-special'})

</script>

</body> </html>

Атрибуты и CSS

Начнём с изучения метода css(property) — получения значения CSS свойства; css(property, value) — установка значения свойства; css({key: value, key:value}) — установка нескольких значений; css(property, function(index, value) { return value }) ;— для установки значения используется функция обратного вызова(callback-функция). Здесь index порядковый номер элемента в выборке; value — старое значение свойства

Метод css() возвращает текущее значение, а не прописанное в файле. Пример:

$("#my").css('color') // получаем значение цвета шрифта

$("#my").css('color', 'red') // устанавливаем значение цвета шрифта

$("#my").css({

'color':'red', 'font-size':'I4px', 'margin-left':'l0px'}) // установка значений

// используя функцию обратного вызова

$("#my").css('height', function(i, value){ return parseFloat(value) *1.2;})

Рассмотрим некоторые манипуляции с классами:

addClass(className) — добавление класса, addClass(function(index, currentdass){ return className }) — добавление класса используя функцию обратного вызова.

hasClass(className) — проверка на причастность к определённому классу

removeClass(className) — удаление класса

removeClass(function(index, currentdass){ return className }) — удаление класса используя функцию обратного вызова

toggleClass(className) — переключение класса, toggleClass(className, switch) — переключение класса по флагу switch, toggleClass(function(index, currentdass, switch){ return className }, switch) — переключение класса используя функцию об­ратного вызова

<!DOCTYPE html>

<html ><head>

<title>prjq5 - "Элементы 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>

<a href=prjq5.htm>Это Ссылка</a>

<script>

alert('Hello2');

var x=$("article").find("h2").html(); // выбираем теги h2 - Article Title

alert(x);

$("div").find("article").find("h2") //

$("article > h2").html("NEWHTML");

var x= $("article").children().css('fontsize', '200px'); //

alert('Hello3');

$ ("a").addClass ("test");//Все элементы теперь будут выделены

//$ ("a").removeClass ("test");//Для удаления class , используйте removeClass

var x=$('h1').css("fontSize"); alert(x); // returns a string "32px"

$('h1').css({ "fontSize" : '100px', "color" : "red "}); // setting multiple properties

var $p = $('p');

$p.addClass("big");

alert('Hello4');

//$p.toggleClass('big');

if ($p.hasClass('big')) { $p.removeClass('big'); }

</script>

</body> </html>

В приведённых функциях в качестве className может быть строка содержащая список классов через пробел, например $("#my").addClass('active notice'), удаляем не­сколько классов за раз $("#my").removeClass('active notice')

Методы removeAttr( attrName) — удаление атрибута.