jQuery функция $.fn.extend()

Определение и применение

jQuery функция $.fn.extend() позволяет объединить содержимое объекта с прототипом jQuery, чтобы предоставить новые методы, которые могут быть связаны с функцией jQuery(). Эта функция будет полезна для написания собственных плагинов.

jQuery синтаксис:

Синтаксис 1.0:
$.fn.extend( obj ) 

obj - Object

Добавлен в версии jQuery

1.0

Значения параметров

Параметр	Описание
obj	Объект для слияния с прототипом jQuery.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery функции $.fn.extend()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $.fn.extend({ // объединяем содержимое объекта с прототипом jQuery (добавляем 2 новых метода)
	    highlight: function(){
	      $(this).css("background-color", "yellow"); // изменяем цвет заднего фона текущему элементу на котором вызывается метод
	    },
	    unhighlight: function(){
	      $(this).css("background-color", "rgba(0,0,0,0)"); // изменяем цвет заднего фона текущему элементу на котором вызывается метод
	    }
	  })
	  $( ".highlight" ).click(function(){ // задаем функцию при нажатиии на элемент с классом highlight
	    $( "li" ).highlight(); // вызываем добавленный метод
	  });
	  $( ".unhighlight" ).click(function(){ // задаем функцию при нажатиии на элемент с классом unhighlight
	    $( "li" ).unhighlight(); // вызываем добавленный метод
	  });
	});
		</script>
	</head>
	<body>
		<button class = "highlight">highlight</button>
		<button class = "unhighlight">unhighlight</button>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>
</html>

В этом примере с использованием jQuery функции $.fn.extend() мы объединили содержимое объекта с прототипом jQuery, чтобы предоставить два новых метода, которые могут быть связаны с функцией jQuery(). С использованием метода .click() мы при нажатии на определенный элемент <button> (кнопка) вызываем функцию, которая с использованием метода .css() изменяет цвет заднего фона элементам <li> на желтый в первом случае, и на прозрачный во втором.

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

Пример использования jQuery функции $.fn.extend(). — Пример использования jQuery функции $.fn.extend()

jQuery утилиты