jQuery сниппеты

Здесь я собрал несколько, на мой взгляд, интересных сниппетов для работы с jQuery. Давно интересует тема создания своего локального хранилища с подобными фрагментами кода. Часто приходится их использовать и хорошо бы иметь их под рукой.
Вот несколько отобранных решений для повседневного использования

Исключение $(this) из селектора

Допустим, вы хотите привязать обработчик щелчка для каждой ссылки на странице. Функция для этого обработчика щелчка превращает все остальные ссылки в другой цвет.

var $allLinks = $("a");
 
$allLinks.click(function() {
 
     $allLinks.not(this).css("color", "red");
 
});

Выравнивание высот div'ов

var maxHeight = 0;
 
$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
 
$("div").height(maxHeight);

Отображение только первых х дивов и переключение остальных

var news = 2;
hidenews = "- Hide news archive";
shownews = "+ Show news archive";
 
$(".archive").html( shownews );
$(".news:not(:lt("+news+"))").hide();
 
$(".archive").click(function (e) {
   e.preventDefault();
       if ($(".news:eq("+news+")").is(":hidden")) {
           $(".news:hidden").show();
           $(".archive").html( hidenews );
       } else {
           $(".news:not(:lt("+news+"))").hide();
           $(".archive").html( shownews );
       }
});

HTML:

<div class="news">First news</div>
<div class="news">Second news</div>
<div class="news">Third news</div>
<a class="archive" href="#"></a>

Отображение последнего Twit'а

$.getJSON("http://twitter.com/statuses/user_timeline/username.json?callback=?", function(data) {
     $("#twitter").html(data[0].text);
});

Определение браузера и его версии

var userAgent = navigator.userAgent.toLowerCase(),
    browser   = '',
    version   = 0;
 
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
 
// Is this a version of IE?
if ($.browser.msie) {
  userAgent = $.browser.version;
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));   
  version = userAgent;
  browser = "Internet Explorer";
}
 
// Is this a version of Chrome?
if ($.browser.chrome) {
  userAgent = userAgent.substring(userAgent.indexOf('chrome/') + 7);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));   
  version = userAgent;
  // If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
  $.browser.safari = false;
  browser = "Chrome";
}
 
// Is this a version of Safari?
if ($.browser.safari) {
  userAgent = userAgent.substring(userAgent.indexOf('safari/') + 7);   
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  version = userAgent; 
  browser = "Safari";
}
 
// Is this a version of Mozilla?
if ($.browser.mozilla) {
    //Is it Firefox?
    if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
        userAgent = userAgent.substring(userAgent.indexOf('firefox/') + 8);
        userAgent = userAgent.substring(0,userAgent.indexOf('.'));
        version = userAgent;
        browser = "Firefox"
    }
    // If not then it must be another Mozilla
    else {
      browser = "Mozilla (not Firefox)"
    }
}
 
// Is this a version of Opera?
if ($.browser.opera) {
    userAgent = userAgent.substring(userAgent.indexOf('version/') + 8);
    userAgent = userAgent.substring(0,userAgent.indexOf('.'));
    version = userAgent;
    browser = "Opera";
}
 
// Now you have two variables, browser and version
// which have the right info

Отключение / Повторное включение input

//Отключение:
$("#submit-button").attr("disabled", true);
//Повторное включение:
$("#submit-button").removeAttr("disabled");

Поиск первого видимого элемента в заданном классе

Добавляет класс «first» для первого элемента с классом «activity» находящийся в зоне видимости

$(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();     
    var first = false;
    $(".activity").each( function() {
        var offset = $(this).offset();
        if (scrollTop <= offset.top && ($(this).height() + offset.top) < (scrollTop + windowHeight) && first == false) {
            $(this).addClass("first");
            first=true;
        } else {
            $(this).removeClass("first");
            first=false;
        }
    });
});

Одноразовая функция

$('#my-selector').bind('click', function() {
       $(this).unbind('click');
       alert('Clicked and unbound!');
});
//Или вариант такой:
$('#my-selector').one('click', function() {
       alert('Clicked and unbound!');
});

Очистить строку поиска по умолчанию по событию focus

1. Задаем значение для поиска как «Search...»
2. Когда поле поподет в фокус задаем черный цвет.
3. Если значение по умолчанию — удаляем его.
4. Когда поле вне фокуса — меняем цвет с черного на светло серый.
5. Если значение пустое — возвращаем дефолтное значение.

$("#s")
    .val("Search...")
    .css("color", "#ccc")
    .focus(function(){
        $(this).css("color", "black");
        if ($(this).val() == "Search...") {
            $(this).val("");
        }
    })
    .blur(function(){
        $(this).css("color", "#ccc");
        if ($(this).val() == "") {
            $(this).val("Search...");
        }
    });

Проверка загрузки jQuery

if (typeof jQuery == 'undefined') {
    // jQuery IS NOT loaded, do stuff here.
}

Проверка события

$('button').click(function(event, wasTriggered) {
    if (wasTriggered) {
        alert('triggered in code');
    } else {
        alert('triggered by mouse');
    }
});
 
$('button').trigger('click', true);

Проверка наличия элемента внутри родителя

if ( $(".child-element").parents("#main-nav").length == 1 ) {
   // YES, the child element is inside the parent
} else {
   // NO, it is not inside
}

Проверка существования эелемента

if ( $('#myElement').length > 0 ) {
    // it exists
}

Провверка активности checkbox'a

//Ищет выбранный элемент checkbox'a и возвращает true или false:
$('#checkBox').attr('checked');

//Ищет все выбранные элементы checkbox'a:
$('input[type=checkbox]:checked');

Проверка пустого элемента

//Делаем что-то для каждого найденного пустого элемента
$('*').each(function() {
	if ($(this).text() == "") {
		//Do Something
	}
});
//если элемент пустой возвращает TRUE или FALSE:
var emptyTest = $('#myDiv').is(:empty);

Вычисляем расстояние между курсором мыши и элементом

Этот код будет вычислять растояние между курсором мыши и центром элемента. Это может быть полезно для запуска функции, когда курсор мыши находится в пределах пределенного расстояния от элемента. Или вы можете создать значение свойства, такие как ширина, высота, или непрозрачности элемента, в области курсора мыши.

(function() {
    var mX, mY, distance,
        $distance = $('#distance span'),
        $element  = $('#element');
 
    function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }
 
    $(document).mousemove(function(e) { 
        mX = e.pageX;
        mY = e.pageY;
        distance = calculateDistance($element, mX, mY);
        $distance.text(distance);        
    });
 
})();

Добавление класса ко всем ссылкам с определенным расширением

$('a[href]').each(function() {
   if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
       $(this).addClass(C[1]);
   }
});

Добавление наложения DIV'a на страницу

$(function() {
 
   var docHeight = $(document).height();
 
   $("body").append("<div id="overlay"></div>");
 
   $("#overlay")
      .height(docHeight)
      .css({
         'opacity' : 0.4,
         'position': 'absolute',
         'top': 0,
         'left': 0,
         'background-color': 'black',
         'width': '100%',
         'z-index': 5000
      });
});

Заменить битую картинку на дефолтную

// Replace source
$('img').error(function(){
        $(this).attr('src', 'missing.png');
});
 
// Or, hide them
$("img").error(function(){
        $(this).hide();
});

Добавить/удалить класс при наведении

$('#elm').hover(
       function(){ $(this).addClass('hover') },
       function(){ $(this).removeClass('hover') }
)

Добавить поддержку :nth-of-type в jQuery

$.expr[':']['nth-of-type'] = function(elem, i, match) {
    var parts = match[3].split("+");
    return (i + 1 - (parts[1] || 0)) % parseInt(parts[0], 10) === 0;
};

Отключить обработку клавиши Enter

$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});

Растянуть iframe под размер данных

$(function(){
   var iFrames = $('iframe');
   function iResize() {
      for (var i = 0, j = iFrames.length; i < j; i++) {
         iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
      }
      if ($.browser.safari || $.browser.opera) {
         iFrames.load(function(){
            setTimeout(iResize, 0);
         });
         for (var i = 0, j = iFrames.length; i < j; i++) {
            var iSource = iFrames[i].src;
            iFrames[i].src = '';
            iFrames[i].src = iSource;
         }
      } else {
         iFrames.load(function() {
            this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
         });
      }
   }
});
 
//Меняет размер для такого html:
 
<iframe src="content.html" class="iframe" scrolling="no" frameborder="0"></iframe>
 
//Работает только в пределах одного домена

Проверка сложности пароля

$('#pass').keyup(function(e) {
   var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$", "g");
   var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
   var enoughRegex = new RegExp("(?=.{6,}).*", "g");
   if (false == enoughRegex.test($(this).val())) {
      $('#passstrength').html('Должно быть больше 6 символов');
   } else if (strongRegex.test($(this).val())) {
      $('#passstrength').className = 'ok';
      $('#passstrength').html('Сложный пароль');
   } else if (mediumRegex.test($(this).val())) {
      $('#passstrength').className = 'alert';
      $('#passstrength').html('Средняя сложность');
   } else {
      $('#passstrength').className = 'error';
      $('#passstrength').html('Ошибка!');
   }
   return true;
});
 
//Использовать вместе с html:
 
<input type="password" name="pass" id="pass">
<span id="passstrength"></span>

Проверить полную загрузку изображений

$('#theImage').attr('src', 'image.jpg').load(function() { 
    alert('This Image Has Been Loaded'); 
});

Отцентрировать элемент на странице

$(document).ready(function(){ 
 jQuery.fn.center = function () { 
    this.css('position','absolute'); 
    this.css('top', ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + 'px'); 
    this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');
     
    return this;
     
    }
    $('div').center();
     
});

Выбрать URL из текста и превратить его в ссылку

$(document).ready(function(){ 
    $.fn.replaceUrl = function() { 
            var regexp = /((ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?)/gi; 
            this.each(function() { 
                $(this).html( 
                    $(this).html().replace(regexp,'<a href="$1">$1</a>')
                );
            });
            return $(this);
        }
        //usage
        $('p').replaceUrl(); 
}); 

Открыть внешние ссылки в новом окне

$(function(){
    $('a[rel$='external']').click(function(){
        this.target = "_blank";
    });
});

Прокрутить страницу вверх

$(document).ready(function() {
    $('.top').click(function(){
        if($.browser.safari){
            bodyelem = $("body")
        } else{
            if($.browser.opera){
                bodyelem = $("html")
            } else{
                bodyelem = $("html,body")
            }
        }
        bodyelem.animate({scrollTop: 0});
        return false;
    });
});

Отключить все эффекты в jQuery

$(document).ready(function() {
    jQuery.fx.off = true;
});

Здесь собраны крупицы того, чем действительно может пользоваться программист. Но Вы можете собрать свой собственный сборник-хранилище такого добра и обращаться к нему по мере необходимости.

Автор: codemake