Интересные разделы:
JQuery
.unbind() .bind()Обнавлено: 23.05.2020

Когда разрабатываешь плагин для jQuery нужно всегда контролировать события! Важно уметь грамотно использовать методы jQuery типа unbind и bind, а иначе вы можете зайти слишком далеко а потом долго искать причины почему ваш плагин делает неправильные вещи! $(‘.button_click’).unbind(‘click’) Используется чтобы уничтожить событие клика кнопки. Например клик вызывается методом .on(‘click’, function(){…}).

Когда разрабатываешь плагин для jQuery нужно всегда контролировать события! Важно уметь грамотно использовать методы jQuery типа unbind и bind, а иначе вы можете зайти слишком далеко а потом долго искать причины почему ваш плагин делает неправильные вещи!

$(‘.button_click’).unbind(‘click’) Используется чтобы уничтожить событие клика кнопки. Например клик вызывается методом .on(‘click’, function(){…}).

Создание плагина для jQueryОбнавлено: 16.05.2020

Для начало нужно создать каркас плагина Прописываем настройки по умолчанию Создание методов плагина Этот тип архитектуры плагинов позволяет вам инкапсулировать все ваши методы в родительском по отношению к плагину замыкании (closure), и вызывать их, сперва передавая имя метода как строку, а затем передавая любые дополнительные параметры для этого метода. Этот подход к инкапсуляции методов является […]

Для начало нужно создать каркас плагина

(function( $ ) {
  $.fn.myPlugin = function() {
  
      // Тут ваш код

  };
})(jQuery);

 $('#element').myPlugin();

Прописываем настройки по умолчанию

(function( $ ){

  $.fn.tooltip = function( options ) {  

    // Создаём настройки по-умолчанию, расширяя их с помощью параметров, которые были переданы
    var settings = $.extend( {
      'location'         : 'top',
      'background-color' : 'blue'
    }, options);

    return this.each(function() {        

      // Тут пишем код плагина tooltip

    });

  };
})( jQuery );

$('div').tooltip({
  'location' : 'left'
});

Создание методов плагина

(function( $ ){

  var methods = {
    init : function( options ) { 
      // А ВОТ ЭТОТ
    },
    show : function( ) {
      // ПОДХОД
    },
    hide : function( ) {
      // ПРАВИЛЬНЫЙ
    },
    update : function( content ) {
      // !!!
    }
  };

  $.fn.tooltip = function( method ) {
    
    // логика вызова метода
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Метод с именем ' +  method + ' не существует для jQuery.tooltip' );
    } 
  };

})( jQuery );

// вызывает метод init
$('div').tooltip(); 

// вызывает метод init
$('div').tooltip({
  foo : 'bar'
});

// вызывает метод hide
$('div').tooltip('hide'); 

// вызывает метод update
$('div').tooltip('update', 'Теперь тут новое содержимое'); 

Этот тип архитектуры плагинов позволяет вам инкапсулировать все ваши методы в родительском по отношению к плагину замыкании (closure), и вызывать их, сперва передавая имя метода как строку, а затем передавая любые дополнительные параметры для этого метода. Этот подход к инкапсуляции методов является стандартом в сообществе разработчиков jQuery-плагинов и применяется в бесчисленном множестве плагинов и виджетов

.each добавляем через каждые 2 итерации новый элемент в Jquery

   var cnt = 0;
   var vi_env_output = '';
   var vi_env_count = $('.m-device__block .m-device__item').length;
   vi_env_output += '<div class="m-device__row">';

  $('.m-device__block .m-device__item').each(function(){

    var vi_item = this;
    $(this).remove();

    if (cnt % 2 == 0 && cnt != vi_env_count) {
      vi_env_output += '</div><div class="m-device__row">';
    }

    vi_env_output += '<div class="m-device__item">' + $(vi_item).html() + '</div>';

    cnt++;
  });

  setTimeout(function(){
    vi_env_output += '</div>';
    $('.m-device__block').append(vi_env_output);
  }, 1000)

Цикл (loop) объекта в JQueryОбнавлено: 03.02.2020

Цикл объекта в JQuery. How to loop js object in JQUERY?

var vi_obj = jQuery.parseJSON({"name":"John", "sname":"Carter", "age":"20"});
$.each(vi_obj, function (i,v) {
    console.log(i, v);
})

JQuery

JQuery - это отличный JavaScript-фреймворк, который легко понять и использовать. Но исследование должно начинаться с чего-то, мы считем, что лучше начать с иллюстративных примеров, и они будут продолжены в этом разделе.