Полезные примеры JavaScript на jQuery


23 июля 2008, PitBult

jQuery
Нашел в Интернете полезные примеры по работе с библиотекой jQuery. Решил выложить готовые решения, может будут кому-то полезны. ) Спасибо авторам и коллегам.

1. Плавное изменение цвета

Вы должно быть заметили, что ссылки у нас (в главном меню, в тегах и в заголовках на главной), плавно меняют свой цвет.
Как это делается: устанавливаем плагин Color Animations и пишем:

$(document).ready( function() {
$(".mainMenu a, .articleTitle a").mouseover( function() {
$(this).animate({color: "#cc4e4e"}, {queue:false, duration:250 });
}).mouseout( function() {
$(this).animate({color: "#0e8db7"}, { queue:false, duration:350});
});

});

2. Выбрать все чекбоксы конкретного объекта

// context = id элемента, внутри которого чекбоксы
function checkall(context){
$("#"+context).find("input[@type$='checkbox']").each(function(){
this.checked = checked;
});
}

3. Количество выбранных элементов

$('element').size();

4. Состояние радиобаттона

var var_name = $("input[@name='radio_name']:checked").val();

5. Переключатель класса

 $.fn.swapClass = function(c1, c2){
return this.each(function(){
var t = $(this);
(!t.is('.'+c1)) ?
t.addClass(c1).removeClass(c2) : t.addClass(c2).removeClass(c1);
});
}

Или короче:

$('#element').toggleClass('selected');

6. Перехват изменения размера окна

 function doSomething() {
alert("Я закончил изменение размера!");
};

var resizeTimer = null;
$(window).bind('resize', function() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(doSomething, 100);
});

7. Расположение объекта по центру экрана

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

8. Замена текста внутри элемента, используя регулярные выражения

Полезно, например при замене «скрыть» – «показать»

jQuery.fn.toggleText = function(a,b)
	{
	return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),
	function(x){return(x==a)?b:a;}));
	}

9. Запуск события resize после задержки

Задержка нужна по той причине, что событие resize() постоянно, пока юзер изменяет размер окна. А с использование этой функции, ресайз будет запускаться только через некоторое количество мс после того, как юзер прекратит изменять размер экрана.

jQuery.fn.resizeComplete = function(fn, ms)
	{
	var timer = null;
	this.resize(function()
		{
		if (timer)
			{
			clearTimeout(timer);
			}
		timer = setTimeout(fn,ms);
		});
	}

10. Создание селекторая :contains, чувствительного к регистру

jQuery.extend(jQuery.expr[':'], {
containsIgnoreCase: "(a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase().indexOf((m[3]||'').toLowerCase())>=0"
});

11. Имитация таймаута

$('a').click(function()
	{
	$(this).animate({width:$(this).width()},5000,
	function()
		{
		// Эта функция запустится только через 5 секунд
		alert('Ссылка была нажата 5 секунд назад');
		})
	});

12. Как узнать, имеется ли на странице элемент

Для этого проще всего воспользоваться свойством length:

if ( $('#myDiv').length ) { /* что-то делаем */}

13. Как запретить/разрешить элемент (disable/enable)

  // запретить #x
$("#x").attr("disabled","disabled");
// разрешить #x
$("#x").removeAttr("disabled");

14. Как сделать выбор/отмену выбора чекбокса (check/uncheck)

// выбрать #x
$("#x").attr("checked", "checked");
// отменить выбор #x
$("#x").attr("checked","");

15. Как получить значение выбранного элемента в селекте

Рассмотрим такой селект:

Для того чтобы получить value, достаточно написать

$("select#sel").val();

А вот, чтобы получить текст этого селекта, написать надо

$("#sel option:selected").text();

16. Как выбрать элементы, у которых в ID есть спецсимволы («.», «[«, и т.п.)

$("#some.id") // не работает
$("#some.id") // работает
//тут имеется ввиду что срабатывает со второго раза

17. Как определить, прописан ли у элемента класс (эта функция появилась в jQuery 1.2)

$('#something').hasClass("someClass")

Источник: http://vremenno.net/js/jquery-snippets/

  • Share/Bookmark

Читайте ещё похожие статьи на этом сайте:

  1. Как установить и получить cookie на JavaScript?
  2. Доработка HTML Form при помощи jQuery
  3. jqGrid (jQuery Grid Plugin) – табличное представление работы с данными
  4. EditArea – JavaScript редактор исходного кода
  5. PHP функция для конвертирования размеров файла (*KB, *MB, *GB)
1 балл2 балла3 балла4 балла5 баллов (Без рейтинга)
Loading ... Loading ...
JavaScript, Программирование


Если Вам понравилась эта статья, пожалуйста оставьте свой комментарий или подпишитесь на RSS-канал и получайте в будущем статьи на RSS Reader.

Комментарии

3 комментария (ев) для “Полезные примеры JavaScript на jQuery”

Написать комментарий

(обязательно)

(обязательно, не публикуется)