8 невероятных советов по jQuery :: U2WEB
You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today.

8 невероятных советов по jQuery

Кому не нравится jQuery? Это быстрая и простая javascript-библиотека стала очень популярной в 2008 году. В этой статье я собрал список восьми очень полезных jQuery-техник, советов и хитростей.

 

1. Ссылки 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>
*/

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

 

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

Вот что я называю очень простым, но очень полезным советом: этот код вернет количество выбранных элементов:

 

$('element').size();

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

 

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

Когда вы используете изображения с 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");

 

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

Несмотря на то, что для определения браузера лучше использовать условные комментарии для подключения 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" );

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

 

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

Вы когда-нибудь хотели иметь возможность удалять слова в тексте? Обратите внимание на следующий код, который может быть легко модифицирован для замены слова на другое.

 

var el = $('#id');
el.html(el.html().replace(/word/ig, ""));

 

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

Эта техника очень восстребована: как использовать две 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"));
});
*/

 

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

Изменение размера шрифта — это повсеместноиспользуема фича на многих современных 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;
 });
});

 

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

Существует множество вариантов запрета вызова контекстного меню мышью через JavaScript, но jQuery позволяет реализовать это намного проще:

 

$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});

 

Источник: https://habr.com/ru/post/54306/

Свяжистесь с нами

Если у вас остались вопросы не стесняйтесь обращаться к нам,
используя форму ниже.

 

 

 

Адрес: Санкт-Петербурге,
ул. Крупской, д. 32 (ст. м. Елизаровская)
тел.: +7 931 009 40 57

e-mail: hello@u2web.ru