jQuery вдохнул новую жизнь в JavaScript-программирование. Благодаря этому замечательному инструменту, появилась возможность с легкостью создавать мощные и интерактивные страницы. В сегодняшней статье собраны 10 полезных примеров jQuery-кода, которые обязательно вам пригодятся при разработке клиентской стороны сайта.
Предзагрузка изображений
Предзагрузка изображений весьма удобна: вместо того чтобы загружать картинку по запросу пользователя, мы предварительно подгружаем их в фоне, для того чтобы они сразу были готовы к показу. С помощью jQuery это делается очень просто, смотрите:
(function($) {
var cache = [];
// Аргументами являются пути картинок, относительно текущей страницы
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i--;) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
jQuery.preLoadImages("image1.gif", "/path/to/image2.png");
Источник: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript
Ссылки target=”blank”
Следующий фрагмент предназначен для того, чтобы все ссылки, имеющие атрибут rel=”external”, открывались в новом табе/окне. Код легко можно изменить, например открывать ссылки только с определенным классом.
$('a[@rel$='external']').click(function(){
this.target = "_blank";
});
/*
Использование:
<a href="http://www.catswhocode.com" rel="external">catswhocode.com</a>
*/
Источник: http://snipplr.com/view/315/-jquery–target-blank-links
Добавление класса тэгу <body> при включенном ява-скрипте
Этот пример состоит всего из одной строчки, но он является самым простым способом определить включен ли ява-скрипт в клиентском браузере. Если ява-скрипт включен, класс hasJs будет добавлен к тегу <body>.
$('body').addClass('hasJS');
Источник: http://eisabainyo.net/weblog/2010/09/01/10-useful-jquery-snippets
Плавная прокрутка по ссылке
jQuery хорошо известен своей возможностью легко создавать красивые визуальные эффекты. Одним из таких эффектов, является плавная прокрутка страницы, при нажатии на ссылку. Следующий пример демонстрирует пример такой прокрутки страницы, по клику на ссылку с классом topLink.
$(document).ready(function() {
$("a.topLink").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
});
Источник: http://snipplr.com/view.php?codeview&id=26739
Изменение прозрачности при наведении
Еще один красивый эффект – очень популярный среди клиентов – эффект затухания элемента при движении мыши. Следующий пример кода, реализует плавное изменение прозрачности картинки при наведении/отведении мыши.
$(document).ready(function(){
$(".thumbs img").fadeTo("slow", 0.6); // Эта строчка при загрузке страницы задает всем миниатюрам прозрачность равную 60%
$(".thumbs img").hover(function(){
$(this).fadeTo("slow", 1.0); // Делаем картинку непрозрачной, при наведении мыши
},function(){
$(this).fadeTo("slow", 0.6); // Снова возвращаем прозрачность 60%, при отведении мыши
});
});
Источник: http://snipplr.com/view/18606
Колонки одинаковой высоты
При создании сайта с колонками, очень часто требуется, чтобы все колонки были одинаковой высоты, как это можно было сделать в старых, добрых таблицах. Этот пример кода вычисляет высоту самой длинной колонки, и автоматически задает ту же высоту всем остальным.
var max_height = 0;
$("div.col").each(function(){
if ($(this).height() > max_height) { max_height = $(this).height(); }
});
$("div.col").height(max_height);
Источник: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4
Включаем HTML5-разметку в старых браузерах
HTML5 – это будущее клиентской веб-разработки. К сожалению, некоторые старые браузеры не умеют распознавать новые теги, такие как header и section. Этот пример кода, научит старые браузеры распознавать новые HTML5-тэги.
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
Еще лучше будет, если вы подключите .js-файл в секции <head> вашей html-страницы.
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Источник: http://remysharp.com/2009/01/07/html5-enabling-script/
Проверяем поддерживает ли браузер определенное CSS3-свойство
Ниже представлена простая jQuery-функция, проверяющая, поддерживает ли браузер клиента определенное CSS3-свойство. В этом примере, мы проверяем свойство border-radius, но его конечно, легко можно изменить на любое другое.
Обратите внимание, что при указании свойства, вам нужно опустить дефис, чтобы предотвратить ошибку синтаксиса. Поэтому вместо border-radius, вам нужно написать “borderRadius” или “BorderRadius”.
var supports = (function() {
var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' '),
len = vendors.length;
return function(prop) {
if ( prop in div.style ) return true;
prop = prop.replace(/^[a-z]/, function(val) {
return val.toUpperCase();
});
while(len--) {
if ( vendors[len] + prop in div.style ) {
// browser supports box-shadow. Do what you need.
// Or use a bang (!) to test if the browser doesn't.
return true;
}
}
return false;
};
})();
if ( supports('textShadow') ) {
document.documentElement.className += ' textShadow';
Источник: http://snipplr.com/view/44079
Получаем параметры url
Получение url-параметров с помощью jQuery – довольно простая задача. Следующий пример это продемонстрирует.
$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return results[1] || 0;
}
Источник: http://snipplr.com/view/26662
Отключаем клавишу “Enter” в формах
По умолчанию, форма отправляется на сервер при нажатии клавиши “Enter”. Но для некоторых форм, нажатие этой клавиши может вызвать проблемы. Следующий пример кода, поможет вам предотвратить нежелательную отправку формы, путем отключения клавиши “Enter”, с помощью jQuery.
$("#form").keypress(function(e) {
if (e.which == 13) {
return false;
}
});
Источник: http://snipplr.com/view/10943/disable-enter-via-jquery
Перевод статьи “10 awesome jQuery snippets”, автор Jean-Baptiste Jung
Отличнейшая подборка.
Заезженые примеры и не полные.
Понравилась подборка.
Я не большой спец, но вдохновляет на работу.
)
Извините за глупый вопрос, но я еще в этом деле новичок. подборка понравилась очень! подскажите только пожалуйста, куда вставлять эти коды? =)
очень надеюсь на помощь =)
Чувак, гугли:
1. Как подключить библиотеку jquery.
2. Как вставить скрипт jquery в .
3. Как присвоить класс блоку.
Erik, эти коды, входят в состав скриптов jQuery, а уже сами скрипты, нужно подцеплять из html странички, с указанием всех необходимых параметров и точного пути к файлу скрипта.
Новичкам респект, и много терпения и упорства — всё получится со временем. Я тоже вчерашний новичок как и все что будут читать этот коментарий :)