Jquery

Jquery



Отображаем все элементы списка select.

 
        $('select[@name=mySelect]').attr('size', $('select[@name=mySelect] option').size());
    

Сделать недоступны для выбора отдельный элемент списка select.

 
        $('select[@name=mySelect] option:contains('текст нужного элемента')').attr('disabled', 'disabled');
    

Значение выделенного элемента списка select.

  
    alert( $('select[@name=mySelect] option:selected').val() );
    

Проверить, выбран ли какой-нибудь элемент списка select.

 
        if( typeof $('select[@name=mySelect] option:selected').text() === 'undefined' ){
               alert('Ни один элемент списка не выбран');
        }
    

Снимаем выделение первого элемента списка select.

  
    $('select[@name=mySelect] option:first').removeAttr('selected');
    

Выделяем первый элемент списка select.

  
    $('select[@name=mySelect] option:first').attr('selected', 'yes');
    

Добавить в список select новый элемент.

  
    $('select[@name=mySelect]').append('');
    

Удалить все элементы списка select.

  
    $('select[@name=mySelect] option').remove();
    // или
    $('#id option').remove();
    

Подключение нескольких обработчиков событий к одному элементу.

  
    $('#someinput').bind('keyup change keydown', function() { 
        alert ("one of three events is called!");
    });
    

Проверка количества выбранных чекбоксов.

  
    if (!$('.check_one:checked').length){
        alert(message);
    }
    

Выделение элемента выпадающего списка.

  
    $("#mySelect option[value='3']").attr('selected', 'selected');
    

Выделение всех чекбоксов одним нажатием.

При нажатии выделяет(снимает выделение) с группы чекбоксов, имеющих css класс group_checkbox
  
    
    

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

  
    $('element').size();
    

Прелоад изображений

jQuery.preloadImages = function()
{
    for(var i = 0; i < arguments.length; i++)
    {
        jQuery("").attr("src", arguments[i]);
    }
};

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

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

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

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

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

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

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

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

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

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

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

Ссылки target=blank

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

/*
Использование:
enkidu.ru
*/

Плавный toggle. Устраняем проблему рваного эффекта в IE

Стандартный slideToggle эффект отвратительно работает в IE. Следующий код устраняет этот недостаток:
html:
                  
    
    

javascript:
   
$(document).ready(function()
{
    $("#switcherButton").click(function()
    {
        if( $('#toogleDiv').hasClass("open") )
        {
            $("#toogleDiv").height($("#toogleDiv").height())
            $("#toogleDiv > *").fadeOut();
            $("#toogleDiv").removeClass("open").slideUp("slow", function(){
                $("#switcherButton").val("down");
            });        
        }
        else
        {
            $("#toogleDiv > *").css("display", "block");
            $("#toogleDiv").addClass("open").slideDown("slow", function(){
                $("#switcherButton").val("up");
            });     
        }
    });
});

Эффекты. show ( show(effect, options, [speed], [callback]) )

Использует эффект для отображения элемента. Необходимые файлы jquery.js, effects.core.js и effects.slide.js
   
$(document).ready(function()
{
    $("#show").click(function  () {
        $("div#showDiv").show("slide", {}, 1000);
    });
});

Показать эффект

Эффекты. hide ( hide(effect, options, [speed], [callback]) )

Использует эффект для сокрытия элемента. Необходимые файлы jquery.js, effects.core.js и effects.slide.js
   
$(document).ready(function()
{
    $("#div112").click(function  () {
        $(this).hide("slide", {}, 1000, function(){$(this).show()});
    });
});

Показать эффект

Эффекты. hide. Blind ( hide(effect, options, [speed], [callback]) )

Использует эффект для сокрытия элемента. Необходимые файлы jquery.js, effects.core.js и effects.blind.js
   
    $(document).ready(function()
    {
        $("#div10").click(function  () {
            $(this).hide("blind", {direction:"vertical"}, 1000);
        });
        $("#div11").click(function () {
            $(this).hide("blind", {direction:"horizontal"}, 1000);
        });
    });

Показать эффект
Показать эффект

Эффекты. hide. Clip ( hide(effect, options, [speed], [callback]) )

Использует эффект для сокрытия элемента. Необходимые файлы jquery.js, effects.core.js и effects.clip.js
   
$(document).ready(function()
{
    $("#div124").click(function  () {
        $(this).hide("clip", {direction:"vertical"}, 1000);
    });
    $("#div242").click(function () {
        $(this).hide("clip", {direction:"horizontal"}, 1000);
    });
});

Показать эффект
Показать эффект

Эффекты. hide. Puff ( hide(effect, options, [speed], [callback]) )

Использует эффект для масштабирования элемента с последующим сокрытием. Необходимые файлы jquery.js, effects.core.js и effects.scale.js
   
$(document).ready(function()
{
    $("#div771").click(function  () {
        $(this).hide("puff", {}, 1000);
    });
    $("#div2ee").click(function () {
        $(this).hide("puff", { percent: 700 }, 1000);
    });
});

Показать эффект
Показать эффект

Эффекты. hide. Scale ( hide(effect, options, [speed], [callback]) )

Использует эффект для масштабирования элемента с последующим сокрытием. Необходимые файлы jquery.js, effects.core.js и effects.scale.js
   
$(document).ready(function()
{
    $("#div240w").click(function () {
        $(this).hide("scale", {}, 1000);
    });
    $("#div1242w").click(function () {
        $(this).effect("scale", { percent: 0 }, 1000);
    });
    $("#div262").click(function () {
        $(this).effect("scale", {
            percent:200,
            direction:'horizontal'}, 1000);
    });
});

Показать эффект
Показать эффект
Показать эффект

Эффекты. hide. Fold ( hide(effect, options, [speed], [callback]) )

Использует эффект для сокрытия элемента. Необходимые файлы jquery.js, effects.core.js и effects.fold.js
   
$(document).ready(function()
{
    $("#divr41").click(function  () {
        $(this).hide("fold", {}, 1000);
    });
    $("#div2ye5").click(function () {
        $(this).hide("fold", { size: 50 }, 1000);
    });
});

Показать эффект
Показать эффект

Эффекты. hide. Drop ( hide(effect, options, [speed], [callback]) )

Использует эффект для сокрытия элемента. Необходимые файлы jquery.js, effects.core.js и drop.clip.js
   
$(document).ready(function()
{
    $("#div1w3").click(function  () {
        $(this).hide("drop", { direction: "left" }, 1000, function(){$(this).show()});
    });
    $("#div2wf").click(function () {
        $(this).hide("drop", { direction: "down" }, 1000, function(){$(this).show()});
    });
    $("#divq2wf").click(function () {
        $(this).hide("drop", { direction: "up" }, 1000, function(){$(this).show()});
    });  
    
    $("#divq7wf").click(function () {
        $(this).hide("drop", { direction: "right" }, 1000, function(){$(this).show()});
    });
});

Показать эффект
Показать эффект
Показать эффект
Показать эффект

Эффекты. toggle ( toggle(effect, options, [speed], [callback]) )

Использует эффект для переключения элемента. Необходимые файлы jquery.js, effects.core.js и effects.slide.js
   
$(document).ready(function()
{
    $("#toggle").click(function  () {
        $("div#toggleDiv").toggle("slide", {}, 1000);
    });
});

Показать эффект

Эффекты. effect. Pulsate ( effect(effect, options, [speed], [callback]) )

Использует эффект для переключения элемента. Необходимые файлы jquery.js, effects.core.js и effects.pulsate.js
   
$(document).ready(function()
{
    $("#div1er65").click(function  () {
        $(this).effect("pulsate", { times: 2 }, 1000);
    });
    $("#divr2rw").click(function () {
        $(this).effect("pulsate", { times: 9 }, 50);
    });
});

Показать эффект
Показать эффект

Эффекты. effect. Explode ( effect(effect, options, [speed], [callback]) )

Использует эффект для переключения элемента. Необходимые файлы jquery.js, effects.core.js и effects.explode.js
   
$(document).ready(function()
{    
    $("#explodeDiv").click(function  () {
        $(this).effect("explode", {}, 1000);
    });
    
    $("#divwww2").click(function  () {
	  $(this).hide("explode", { pieces: 25 }, 1000);
	});    
});

Показать эффект
Показать эффект

Эффекты. effect. Bounce ( effect(effect, options, [speed], [callback]) )

Необходимые файлы jquery.js, effects.core.js и effects.bounce.js
   
$(document).ready(function()
{   
    $("#div1").click(function  () {
	  $(this).effect("bounce", { times: 3 }, 300);
	});
	$("#div2").click(function () {
	  $(this).effect("bounce", { times: 7,
	      direction: 'right',
	      distance: 50 }, 300);
	});
});

Показать эффект
Показать эффект

Эффекты. effect. Highlight ( effect(effect, options, [speed], [callback]) )

Необходимые файлы jquery.js, effects.core.js и effects.highlight.js
   
$(document).ready(function()
{
    $("#div3").click(function  () {
        $(this).effect("highlight", {}, 1000);
    });
    $("#div4").click(function () {
        $(this).effect("highlight", {color: '#ff0000'}, 500);
    });
});

Показать эффект
Показать эффект

Эффекты. effect. Shake ( effect(effect, options, [speed], [callback]) )

Необходимые файлы jquery.js, effects.core.js и effects.shake.js
   
$(document).ready(function()
{    
    $("#div5").click(function () {
        $(this).effect("shake", { times: 3 }, 300);
    });
    $("#div6").click(function () {
        $(this).effect("shake", {
            times: 4,
            direction: 'down',
            distance: 10 
        }, 300);
    });
});

Показать эффект
Показать эффект

Эффекты. effect. Transfer ( effect(effect, options, [speed], [callback]) )

Необходимые файлы jquery.js, effects.core.js и effects.transfer.js
Обязательно пропишите стилевой класс .ui-effects-transfer { border: 2px dotted blue; background: yellow; } иначе не увидите эффекта
   
$(document).ready(function()
{    
    $("#div7").click(function  () {
        $(this).effect("transfer", { to: "div#div8" }, 2000);
    });
    $("#div9").click(function () {
        $(this).effect("transfer", { className: "transfer2",
        to: "div#div8" }, 800);
    });
});

Показать эффект
Показать эффект
Реклама Запчасти на БМВ - Запчасти на BMW 525 недорого . забор . Интернет магазин предлагает пароварка braun дешево