Jquery рецепт: создание и добавление новых элементов (часть 1)

Удаление элементов

В дополнение к возможности вставки и замены элементов библиотека jQuery предлагает ряд методов для удаления элементов из DOM. Краткое описание этой группы методов приведено в таблице ниже:


Методы для удаления элементов
Метод Описание
detach(), detach(селектор) Удаляет элементы из DOM. Данные, связанные с элементами, сохраняются
empty() Удаляет все дочерние узлы каждого из элементов, содержащихся в объекте jQuery
remove(), remove(селектор) Удаляет элементы из DOM. По мере удаления элементов связанные с ними данные уничтожаются
unwrap() Удаляет родительские элементы каждого из элементов, содержащихся в объекте jQuery

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

В этом сценарии мы выбираем элементы img, атрибуты src которых содержат daffodil и snow, получаем их родительские элементы, а затем удаляем их. Можно также отфильтровать удаляемые элементы, передав селектор методу remove():

Оба сценария приводят к одному и тому же результату:

Как показывает мой опыт работы с методом remove(), не все селекторы способны выполнять функцию фильтра. Я рекомендую тщательно тестировать каждый шаг и отдавать предпочтение исходному набору выбранных элементов, если только это возможно.

Удаление элементов с сохранением данных

Метод detach() работает аналогично методу remove() с тем лишь отличием, что связанные с удаляемыми элементами данные сохраняются. О связывании данных с элементами подробно говорится в одной из следующих статей, а на данном этапе вам достаточно знать лишь то, что если планируется последующая вставка удаленных элементов в другое место документа, то обычно предпочтение следует отдавать методу detach().

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

В этом сценарии удаляется родительский элемент элемента img, атрибут src которого содержит astor. Затем элементы вновь вставляются в документ с помощью рассмотренного нами ранее метода append(). Я стараюсь избегать такого подхода, поскольку использование метода append() без вызова метода detach() дает тот же эффект.

Очистка элементов

Метод empty() удаляет все элементы-потомки и текст из элементов, содержащихся в объекте jQuery. Сами элементы остаются в документе. Соответствующий пример приведен ниже:

В этом сценарии из дочерних элементов элемента с атрибутом id, равным row1, выбирается элемент с индексом, равным 1, и вызывается метод empty(). Чтобы сделать изменение более заметным, соответствующая позиция в документе заключена в красную рамку. Страница в окне браузера показана на рисунке:

Метод unwrap()

Метод unwrap() удаляет родительские элементы для элементов, содержащихся в объекте jQuery. Выбранные элементы становятся дочерними элементами родителей своих бывших родительских элементов. Пример использования метода unwrap() приведен ниже:


В этом сценарии выбираются элементы div, являющиеся потомками элемента с атрибутом id, равным row1, и вызывается метод unwrap(), что приводит к удалению элемента row1, как показано на рисунке:

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

Основные сведения

Имеется несколько моментов, о которых вы должны быть в курсе при разработке плагинов.  В этом разделе мы их последовательно разберем. Рассмотрим следующий фрагмент кода:

Во-первых, вы, вероятно, заметили, что я использую в нашем плагине , а не . Я это делаю, поскольку за счет использования становится частью того же самого объекта jQuery, что и метод .

Давайте разберем подробнее, чтобы стало понятнее. В результате вызова (* jQuery.prototype – Прим. пер.) всегда возвращается объект jQuery, в котором содержатся все методы, доступные для использования в jQuery. Если вы когда-либо будете создавать ваши собственные методы, то они также станут частью этого объекта. Поскольку наша функция теперь является частью объекта jQuery, то мы можем использовать вместо

Во-вторых, вам следует постараться добавить для плагина возможность сцепления его методов. Поскольку наша функция теперь является частью объекта jQuery, то мы можем использовать this вместо $(this).Это одна из главных возможностей jQuery, которой разработчики пользуются все время. Для того чтобы добавить для метода возможность сцепления, он должен возвращать оригинальный объект jQuery. Это можно осуществить при помощи добавления , как я сделал выше в коде.

И, наконец, вам следует ограничить область видимости синонима (* для jQuery – Прим. пер.) для того, чтобы при использовании вашего плагина с другим кодом на JavaScript не возникало никаких конфликтных ситуаций. Для этого вам необходимо лишь обернуть функцию в функцию-выражение немедленного вызова именно так, как в коде выше.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .text()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $("button").click(function(){ // задаем функцию при нажатиии на элемент <button>
	   $("p").text('No'); // задаем содержимое элементов <p>
	   $("span").append("Элементы имеют следующий текст: " + $("p").text()); // добавляем содержимое всех элементов <p> в документ 
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<p>Yes</p>
		<p>Yes</p>
		<p>Yes</p>
		<span></span>
	</body>
</html>

В этом примере с использованием jQuery метода .text() мы задаем (изменяем) содержимое для всех элементов <p> и с помощью методов .text(), и .append() выводим содержимое выбранных элементов в элемент <span> (после того как они были изменены).

Результат нашего примера:

Пример использования jQuery метода .text()

Рассмотрим пример в котором в качестве параметра метода .text() передадим функцию:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование функции в качестве параметра метода .text()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){	  
          $("button").click(function(){  // задаем функцию при нажатиии на элемент <button> 
            $("p").text(function(index, text){ // передаем функцию в качестве параметра метода 	
              return "Этот элемент имеет индекс - " + index + (". Старое содержимое: " + text);  // возвращаем значение индекса элемента и старое содержимое элемента
	    });
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<p>Раз</p>
		<p>Два</p>
		<p>Три</p>
	</body>
</html>

В этом примере с использованием jQuery метода .text() и функции, переданной в качестве параметра метода, мы при нажатии на кнопку (элемент <button>) заменяем содержимое абзацев. Наша функция возвращает значение индекса элемента и старое содержимое элемента (до изменения).

Результат нашего примера:

Пример использования функции в качестве параметра метода .text().jQuery DOM методы

Как изменить или добавить стиль к элементу в jQuery?

Установить стиль элементу осуществляется тоже с помощью метода css, но в этом случае используется следующий синтаксис:

// 1 вариант (для установки одного стиля элементу)
.css( propertyName, value )
// 2 вариант (установка значения стиля с помощью функции)
css( propertyName, function )
// 3 вариант (для установки несколько стилей элементу)
css( properties )
// Описание параметров:
// propertyName (тип: String) – имя CSS-свойства
// value (тип: String или Number) – значение, которое нужно установить CSS-свойству
// function – функция, результат выполнения которой будет установлен в качестве значения CSS-свойству
//   Синтаксис функции:
//     Function( Integer index, String value ) => String или Number
//     В качестве аргументов функция получает индекс элемента (index) и текущее окончательное значение CSS-свойства (value)
// properties (тип: объект JavaScript, содержащий ноль или более пар ключ-значение) – объект, состоящий из пар DOM-свойство-значение, которые нужно установить элементу.

При установлении стилей с помощью метода , они задаются ко всем элементам текущего набора.

Например, добавим ко всем элементам серый цвет фона (background):

<div class="info">...</div>
<div class="info">...</div>

<script>
$('.info').css('background', 'grey');
</script>

Если необходимо применить к каждому элементу текущего набора сразу несколько CSS свойств, то в качестве параметра этого метода необходимо использовать объект JavaScript, содержащий пары ‘имяСвойства’ : значение.

.css({'имяСвойства1':значение, 'имяСвойства2':значение,...})

Пример, в котором показано как можно задать несколько CSS-свойств к элементам :

$('.success').css({
  'color':'green',
  'font-size':'16px'
});

В качестве значения строки также можно использовать относительные значения, которые начинаются с или . Первое выражение используется для увеличения текущего значения CSS свойства, а второе — для уменьшения.

Например, увеличим отступ слева и справа у элементов на :

$('.container').css({
  "padding-left": "+=10",
  "padding-right":"+=10"
});

Ещё один способ использования метода css — это применение в качестве 2 параметра функции.

.css('имяСвойства',функция)
// функция: Function( Integer index, String value ) => String или Number

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


Например, установим всем элементам , у которых цвет шрифта не равен чёрному, CSS свойство , равное .

$('.text').css('color',function(index,value){
  if (value!=='rgb(0, 0, 0)') {
    return 'red';
  }
});

Например, поменяем значение CSS свойства у всех элементов на странице, находящихся :

$('#content img').css('width','300px');

jQuery Html Method

The jQuery html () method is used to change the entire contents of the selected elements. This selected element replaces content with new content.

Syntax

html() method returns the content of first matched element.

Html() method sets the content of matched element.

It sets the content using function.

The HTML () method is used either to set content or to return the contents of the selected elements.

  • To set the content :- When you use this method to set the content, it overwrites the contents of all matched elements.
  • To return the content :- When you use this method to return content, it first returns the content of the matched element.

Parameters of Html Method

Parameter Description
Content It is an essential parameter. It is used to specify the new content for the selected elements. It can also contain HTML tags.
Function (index, currentcontent) It is an optional parameter. It specifies a function that returns the new content for the selected elements.Index: It shows the index position of the element in the set.Currentcontent: It shows the current HTML content of the selected element.

Ex 1 :- jQuery html() method

Let’s see an example 1 of html() method.

<!DOCTYPE html>  
<html>  
<title>Learn Jquery Html Method</title>
<head>  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>  
$(document).ready(function(){  
    $("#btn_click").click(function(){  
        $("#para").html("Hello <b>there, Thanks to try it</b>");  
    });  
});  
</script>  
</head>  
<body>  
<button id="btn_click">Click here to change the content</button>  
<p id="para">This is a paragraph. When you click the button after that it will change.</p>  
</body>  
</html>  

Ex 2 :- jQuery html()

Let’s see example2 of html method. This example returns the first match of element.

<!DOCTYPE html> 
<html> 
<head> 
<title> jQuery html() Method </title> 		
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
</head> 
	
<body style = "text-align:center;"> 
			
  <h1 style = "color:blue;" >Hello World </h1> 
  <h2>jQuery | html() Method </h2> 
	
  <button id="btn-click">Click</button> 
	<script> 
		$(document).ready(function(){ 
			$("#btn-click").click(function(){ 
				alert($("h2").html()); 
			}); 
		}); 
	</script> 
</body> 
</html> 

Ex 3 :- jQuery replace text

Let’s take a new example using the jQuery html() method. It will replace the h2 tag text. See the example below

<!DOCTYPE html> 
<html> 
<head> 
<title> jQuery replace text using html() </title>        
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
</head> 
    
<body style = "text-align:center;"> 
            
  <h1 style = "color:blue;" >Hello World </h1> 
  <h2>jQuery | html() Method </h2> 
    
  <button id="btn-click">Click</button> 
    <script> 
        $(document).ready(function(){ 
            $("#btn-click").click(function(){ 
                $("h2").html('Hello'); 
            }); 
        }); 
    </script> 
</body> 
</html> 

Recommended jQuery Tutorial

  1. jQuery Text Method By Example
  2. Get and Set Input, Select box, Text, radio Value jQuery
  3. Duplicate Html Elements Using jQuery By Example
  4. jQuery | Event MouseUp By Example
  5. Event jQuery Mouseleave By Example
  6. jQuery Event Mouseenter Example
  7. Event jQuery MouseOver & MouseOut By Example
  8. keyup jquery event example
  9. Jquery Click Event Method with E.g.
  10. Event jQuery. Blur By Example
  11. jQuery form submit event with example
  12. keydown function jQuery
  13. List of jQuery Events Handling Methods with examples
  14. Jquery Selector by .class | name | #id | Elements
  15. How to Get the Current Page URL in jQuery
  16. jQuery Ajax Get() Method Example
  17. get radio button checked value jquery by id, name, class
  18. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  19. jQuery Get Data Text, Id, Attribute Value By Example
  20. Set data attribute value jquery
  21. select multiple class in jquery
  22. How to Remove Attribute Of Html Elements In jQuery
  23. How to Checked Unchecked Checkbox Using jQuery
  24. jQuery removeClass & addClass On Button Click By E.g.
  25. To Remove whitespace From String using jQuery
  26. jQuery Ajax Post Method Example
  27. jQuery Ajax Get Method Example
  28. To Load/Render html Page in div Using jQuery Ajax $.load
  29. jQuery Sibling Methods – To Find Siblings Elements
  30. jQuery Find Siblings Elements with Class, id

С этим читают