jQuery функция $.fn.extend()
jQuery утилитыОпределение и применение
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 утилиты