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

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

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

jQuery синтаксис:

Синтаксис 1.0:

$.fn.extend( obj )

obj - Object

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

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

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

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

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<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>

main.js

JavaScript

$(document).ready(function () {
    $.fn.extend({
        highlight: function () {
            $(this).css('background-color', 'yellow')
        },
        unhighlight: function () {
            $(this).css('background', 'rgba(0,0,0,0)')
        },
    })
    $('.highlight').click(function () {
        $('li').highlight()
    })
    $('.unhighlight').click(function () {
        $('li').unhighlight()
    })
})

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