Pull to refresh

8 отличных хитростей jQuery

Reading time 4 min
Views 28K
Original author: Jean-Baptiste Jung
imageКому не нравится jQuery? Это быстрая и простая javascript-библиотека стала очень популярной в 2008 году. В этой статье я собрал список восьми очень полезных jQuery-техник, советов и хитростей.

Ссылки target=blank


Вы используете атрибут target=blank для ссылок? Если да, то вы должны знать, что XHTML 1.0 Strict не позволяет этого делать. Хорошим решением проблемы может стать использование jQuery для создания ссылок, которые открывают новые окна:
$('a[rel$="external"]').click(function(){
 this.target = "_blank";
});

/*
Использование:
<a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a>
*/

* This source code was highlighted with Source Code Highlighter.

Примечание переводчика: в оригинале автор использует "@rel", что в данный момент устарело, но вполне может работать на ранних версиях jQuery. Кроме того, в комментариях есть описание решения по стандартам через window.open.

Подсчет общего числа элементов


Вот что я называю очень простым, но очень полезным советом: этот код вернет количество выбранных элементов:
$('element').size();

* This source code was highlighted with Source Code Highlighter.

Примечание переводчика: кроме того, вы можете использовать length, вместо size().

Предзагрузка изображений


Когда вы используете изображения с JavaScript, хорошей практикой будет загрузить их перед тем как использовать. Этот код делает всю работу:
jQuery.preloadImages = function()
{
 for(var i = 0; i<arguments.length; i++)
 {
  jQuery("<img>").attr("src", arguments[i]);
 }
};

// Использование
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");


* This source code was highlighted with Source Code Highlighter.


Определение браузера


Несмотря на то, что для определения браузера лучше использовать условные комментарии для подключения css, очень просто сделать тоже самое через jQuery, что может быть полезно.
//A. Цель Safari
if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" );

//B. Цель все выше IE6
if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//C. Цель IE6 и ниже
if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//D. Цель Firefox 2 и выше
if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );

* This source code was highlighted with Source Code Highlighter.

Примечание переводчика: в jQuery 1.3 и выше $.browser считается устаревшим и не рекомендуется к использованию, вместо этого рекомендуется использовать $.support.

Удаление слова в тексте


Вы когда-нибудь хотели иметь возможность удалять слова в тексте? Обратите внимание на следующий код, который может быть легко модифицирован для замены слова на другое.
var el = $('#id');
el.html(el.html().replace(/word/ig, ""));

* This source code was highlighted with Source Code Highlighter.


Колонки одинаковой высоты


Эта техника очень восстребована: как использовать две css-колонки и сделать их одинаковой высоты? К счастью, Роб из cssnewbie знает решение:
function equalHeight(group) {
  tallest = 0;
  group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
  group.height(tallest);
}

/*
Использование:
$(document).ready(function() {
  equalHeight($(".recent-article"));
  equalHeight($(".footer-col"));
});
*/

* This source code was highlighted with Source Code Highlighter.

Источник: Equal Height Columns with jQuery

Изменение размера шрифта


Изменение размера шрифта — это повсеместноиспользуема фича на многих современных web-сайтах. Посмотрите, как реализовать ее с помощью jQuery:
$(document).ready(function(){
 // Сбрасываем размер шрифта
 var originalFontSize = $('html').css('font-size');
  $(".resetFont").click(function(){
  $('html').css('font-size', originalFontSize);
 });
 // Увеличиваем размер шрифта
 $(".increaseFont").click(function(){
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*1.2;
  $('html').css('font-size', newFontSize);
  return false;
 });
 // Уменьшаем размер шрифта
 $(".decreaseFont").click(function(){
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*0.8;
  $('html').css('font-size', newFontSize);
  return false;
 });
});


* This source code was highlighted with Source Code Highlighter.

Источник: Text Resizing With jQuery

Запрет вызова контекстного меню мышью


Существует множество вариантов запрета вызова контекстного меню мышью через JavaScript, но jQuery позволяет реализовать это намного проще:
$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});

* This source code was highlighted with Source Code Highlighter.

Источник: Fast Tip: How to cancel right click context menu in jQuery

Progg it
Tags:
Hubs:
+68
Comments 85
Comments Comments 85

Articles