Toivonen`s Blog

Перевод статьи Things you may not know about jQuery.

• $.fn — это всего лишь быстрый вызов для jQuery.prototype.
• Вы можете проверить, содержит ли jQuery-коллекция какие-нибудь элементы, попробовав обратиться к первому элементу, например if($(selector)[0]){…}
• jQuery стандартизирует события во всех браузерах! На доступные свойства и методы стоит посмотреть здесь: http://docs.jquery.com/Events/jQuery.Event
• Когда вы создаёте плагин, у вас есть доступ к предыдущему объекту из цепочки.
  jQuery.fn.doSomething = function() {
      this; // => $('a')
      this.prevObject; // => $('li')
      // Remember chaining in your plugins:
      return this;
  };
   
  jQuery('li').show()
      .find('a').doSomething();
   
  // You could even create a new 'root' plugin:
  // (Returns the 'root' of a chain)
  jQuery.fn.root = function() {
      // Root is always document so we have to
      // go back to one before the last:
      var root = this;
      while(root.prevObject.prevObject) {
          root = root.prevObject;
      }
      return root;
  };
   
  $('li').find('a').children().root(); // <= $('li') is returned
  // Using root() is the same as using end().end() in this situation
• Вы можете использовать пространства имён для событий. Это особенно полезно для разработки плагинов:
  jQuery.fn.myPlugin = function() {
   
      // Clean up after yourself!
   
      jQuery.myPlugin = {
          cleanUp: function() {
   
              // Remove all click handlers binded
              // as a result of the plugin:
              jQuery('*').unbind('click.myPlugin');
   
              // ALternatively, remove ALL events:
              jQuery('*').unbind('.myPlugin');
   
          }
      };
   
      return this.bind('click.myPlugin', function() {
          // Do something...
      });
  };
   
  // Note, you can also namespace data:
  // E.g. $(elem).data('whatever.myPlugin',value);
• Вы можете иметь доступ ко всем обработчикам событий, связанными с элементом (или каким-либо объектом) через хранилище событий.
  // List bound events:
  console.dir( jQuery('#elem').data('events') );
   
  // Log ALL handlers for ALL events:
  jQuery.each($('#elem').data('events'), function(i, event){
      jQuery.each(event, function(i, handler){
          console.log( handler.toString() );
      });
  });
   
  // You can see the actual functions which will occur
  // on certain events; great for debugging!
• jQuery естественным образом поддерживает JSONP (JSON with padding), что в действительность означает, что вы можете сделать кросс-доменные AJAX-запросы (хотя, строго говоря, это не совсем AJAX, потому что не используется XHR). Для того, чтобы это работало, на запращиваемом домене должно быть кое-какое JSONP API (оно должно уметь оборачивать JSON особенную callback-функцию). Например:
  function getLatestFlickrPics(tag,callback) {
      var flickrFeed = 'http://api.flickr.com/services/feeds/photos_public.gne?tags='
                     + tag + '&tagmode=any&format=json&jsoncallback=?';
      jQuery.getJSON(flickrFeed, callback);
  }
   
  // Usage:
  getLatestFlickrPics('ferrari', function(data){
      jQuery.each(data.items, function(i, item){
          $("<img/>").attr("src", item.media.m).appendTo('body');
      });
  });
• Вы можете найти это емного беспорядочным, но jQuery позволяет нам создавать целые DOM-структуры в рамках одной цепочки:
  // Create and inject in one chain:
  jQuery('<div/>')
      .append('<p><a href="#">Foo</a></p>')
      .find('p a')
          .click(function(){
              // Do something...
              return false;
          })
          .end()
      .append('<p><a href="#">Bar</a></p>')
      .find('p:eq(1) a')
          .click(function(){
              // Do something else...
              return false;
          })
          .end()
      .appendTo('body');
• Доступность DOM-элементов через jQuery невероятно легка:
  var HTMLCollection = $('div').get();
   
  // Alternatively, if you only want the first element:
  $('div').get(0);
  $('div').get()[0];
  $('div')[0];
• Вы можете не только привязывать события к DOM-элементам, но и также привязывать касмотомные события к любому объекту!
  function Widget() {
      // Do something...
  };
   
  var myPhotoWidget = new Widget('photos');
   
  jQuery(myPhotoWidget).bind('photoAdd', function() {
      // Custom event handling...
  });
   
  // Trigger event:
  jQuery(myPhotoWidget).trigger('photoAdd');
• Найти идентификатор выбранного элемента очень легко. jQuery даёт нам 'index'-метод:
  $('table tr').click(function(){
      // Find index of clicked table row:
      var index = $('table tr').index(this);
  });
• Вы можете содать ваш собственный фильтрующий селектор. Посмотрите на пример:
  $.expr[':'].external = function(elem,index,match) {
      var url = elem.href || elem.src,
          loc = window.location;
      return !!url.match(new RegExp('^' + loc.protocol + '//' + '(?!' + loc.hostname + ')' ));
  };
   
  // You can now use it within your selectors:
   
  // Find all external anchors:
  $('a:external');
   
  // Find all external script elements:
  $('script:external');
   
  // Determine if link is external:
  $('a#mylink').is(':external'); // true/false
• Я видел достаточно много людей, которые всё-ещё используют JavaScript-конструкции for и while, чтобы создать циклы в своей jQuery-скриптах. В этом нет ничего плохого, но знайте, что jQuery-метод each также может пробежаться по любомы массиву или объекту!
  var myArr = ['apple','banana','orange'];
   
  $.each(myArr, function(index, item) {
      // Do something with 'item'
      // return false to BREAK
      // return true to CONTINUE
  });
• Метод filter принимает строковый селектор или функцию. Когда вы используете его с функцией, вы должны возвращать false для удаления элемента из стока и true для его сохранения:
  $('div').filter(function(){
      return this.childNodes.length > 10; // Must return a Boolean
  });
• Вам не следует назначать ID или класс новым элементам, чтобы позже сослаться на них, просто сохраните их в переменную:
  var myInjectedDiv = $('<div/>').appendTo('body');
   
  // Use 'myInjectedDiv' to reference the element:
  myInjectedDiv.bind('click', function(){
      // ...
  });
• Метод map невероятно полезный, направленная функция будет запущена на каждом элементе данного массива (или объекта), и хотя функция выдаёт результат каждой раз, это будет добавлено вновый массив. Попробуйте взглянуть:
  // Create an array containing all anchor HREF attributes:
  var URLs = $.map($('a'), function(elem, index){
      return elem.href;
  });
   
  // URLs = ['http://google.com', 'http://whatever.com', 'http://yahoo.com']
• Это не имеет отношения к jQuery, но может быть полезным. Когда вам нужно соединить два различных сравнить делания чего-то, вы можете использовать Firebug-консоль для фиксирования времени, затраченного на выполнение куска кода. Например:
  console.time('My first method');
  // Do something...
  console.timeEnd('My first method');
   
  console.time('My second method');
  // Do something else...
  console.timeEnd('My second method');
   
  // Firebug will log the time (in milliseconds) taken
  // to complete each chunk...