jQuery Советы и хитрости

Синтаксис

• Сокращение для готового события от roosteronacid
• Разрывы линий и цепочечность с помощью roosteronacid
• Вложенные фильтры Натана Лонга
• Кэшируйте коллекцию и выполняйте команды в одной строке с помощью roosteronacid
• Содержит селектор по roosteronacid
• Определение свойств при создании элемента с помощью roosteronacid
• Получите доступ к функциям jQuery как к массиву с помощью roosteronacid
• Функция noConflict - освобождение переменной $ Оли
• Изолируйте переменную $ в режиме noConflict с помощью nickf
• Бесконфликтный режим от roosteronacid

Хранилище данных

• Функция данных - связывает данные с элементами с помощью TenebrousX
• Поддержка атрибутов данных HTML5, на стероидах! петуховой кислотой
• Плагин метаданных jQuery от Филиппа Дупановича

оптимизация

• Оптимизировать эффективность сложных селекторов с помощью roosteronacid
• Параметр контекста от lupefiasco
• Сохранить и повторно использовать поиск Натана Лонга
• Создание HTML-элемента и сохранение ссылки. Проверка наличия элемента. Написание собственных селекторов. Автор Andreas Grech

Разное

• Проверить индекс элемента в коллекции по redsquare
• Живые обработчики событий от TM
• Заменить анонимные функции именованными функциями на ken
• Microsoft AJAX Framework и мост JQuery от Slace
• JQuery учебники по Egyamado
• Удалить элементы из коллекции и сохранить цепочечность с помощью roosteronacid
• Объявите $ this в начале анонимных функций Беном
• FireBug lite, плагин Hotbox, сообщает, когда изображение было загружено, и Google CDN от Color Blend
• Разумное использование сторонних скриптов jQuery от harriyott
• Каждая функция Яна Зича
• Плагин расширений форм от Chris S
• Асинхронная каждая функция от OneNerd
• Плагин шаблона jQuery: реализация сложной логики с использованием функций рендеринга от roosteronacid

Создание элемента HTML и сохранение ссылки

var newDiv = $("<div />");

newDiv.attr("id", "myNewDiv").appendTo("body");

/* Now whenever I want to append the new div I created, 
   I can just reference it from the "newDiv" variable */

Проверка существования элемента

if ($("#someDiv").length)
{
    // It exists...
}

Написание собственных селекторов

$.extend($.expr[":"], {
    over100pixels: function (e)
    {
        return $(e).height() > 100;
    }
});

$(".box:over100pixels").click(function ()
{
    alert("The element you clicked is over 100 pixels height");
});

data()Метод jQuery полезен и не очень известен. Это позволяет вам связывать данные с элементами DOM без изменения DOM.

Вложенные фильтры

Вы можете вкладывать фильтры (как показано здесь ).

.filter(":not(:has(.selected))")

Я действительно не фанат $(document).ready(fn)ярлыка. Конечно, это сокращает код, но также снижает читабельность кода. Когда вы видите $(document).ready(...), вы знаете, на что смотрите. $(...)используется слишком многими другими способами, чтобы немедленно иметь смысл.

Если у вас есть несколько фреймворков, вы можете использовать, jQuery.noConflict();как вы говорите, но вы также можете назначить другую переменную, например:

var $j = jQuery.noConflict();

$j("#myDiv").hide();

Очень полезно, если у вас есть несколько фреймворков, которые можно свести к $x(...)вызовам в стиле.

Оооо, давайте не будем забывать метаданные jQuery ! Функция data () великолепна, но она должна быть заполнена с помощью вызовов jQuery.

Вместо того, чтобы нарушать соответствие W3C атрибутам пользовательских элементов, таких как:

<input 
  name="email" 
  validation="required" 
  validate="email" 
  minLength="7" 
  maxLength="30"/> 

Вместо этого используйте метаданные:

<input 
  name="email" 
  class="validation {validate: email, minLength: 2, maxLength: 50}" />

<script>
    jQuery('*[class=validation]').each(function () {
        var metadata = $(this).metadata();
        // etc.
    });
</script>

Обработчики живых событий

Установите обработчик события для любого элемента, который соответствует селектору, даже если он добавляется в DOM после начальной загрузки страницы:

$('button.someClass').live('click', someFunction);

Это позволяет вам загружать контент через ajax или добавлять его через javascript и автоматически настраивать обработчики событий для этих элементов.

Аналогично, чтобы остановить обработку живых событий:

$('button.someClass').die('click', someFunction);

Эти обработчики живых событий имеют некоторые ограничения по сравнению с обычными событиями, но они отлично работают в большинстве случаев.

Для получения дополнительной информации см. Документацию jQuery .

ОБНОВЛЕНИЕ: live()и die()не рекомендуется в jQuery 1.7. Смотрите http://api.jquery.com/on/ и http://api.jquery.com/off/ для аналогичной функциональности замены.

ОБНОВЛЕНИЕ2: live()долгое время считалось устаревшим, даже до выпуска jQuery 1.7. Для версий jQuery 1.4.2+ до 1.7 используйте delegate()и undelegate(). live()Пример ( $('button.someClass').live('click', someFunction);) можно переписать , используя delegate()так: $(document).delegate('button.someClass', 'click', someFunction);.

Замените анонимные функции именованными функциями. Это на самом деле заменяет контекст jQuery, но он начинает играть больше, чем при использовании jQuery, из-за его зависимости от функций обратного вызова. Проблемы, с которыми я сталкиваюсь с встроенными анонимными функциями, заключаются в том, что их сложнее отлаживать (гораздо проще взглянуть на стек вызовов с четко именованными функциями вместо 6 уровней «анонимных»), а также тот факт, что несколько анонимных функций в одном и том же Цепочка jQuery может стать громоздкой для чтения и / или обслуживания. Кроме того, анонимные функции обычно не используются повторно; с другой стороны, объявление именованных функций побуждает меня писать код, который с большей вероятностью будет использоваться повторно.

Иллюстрация; вместо:

$('div').toggle(
    function(){
        // do something
    },
    function(){
        // do something else
    }
);

Я предпочитаю:

function onState(){
    // do something
}

function offState(){
    // do something else
}

$('div').toggle( offState, onState );

Определение свойств при создании элемента

В jQuery 1.4 вы можете использовать литерал объекта для определения свойств при создании элемента:

var e = $("<a />", { href: "#", class: "a-class another-class", title: "..." });

... Вы даже можете добавить стили:

$("<a />", {
    ...
    css: {
        color: "#FF0000",
        display: "block"
    }
});

Вот ссылка на документацию .

вместо использования другого псевдонима для объекта jQuery (при использовании noConflict) я всегда пишу свой код jQuery, оборачивая все это в замыкание. Это можно сделать в функции document.ready:

var $ = someOtherFunction(); // from a different library

jQuery(function($) {
    if ($ instanceOf jQuery) {
        alert("$ is the jQuery object!");
    }
});

В качестве альтернативы вы можете сделать это так:

(function($) {
    $('...').etc()    // whatever jQuery code you want
})(jQuery);

Я считаю это самым портативным. Я работал над сайтом, который использует и Prototype, и jQuery одновременно, и эти методы позволили избежать всех конфликтов.

Проверьте индекс

У jQuery есть .index, но его неудобно использовать, так как вам нужен список элементов и передайте элемент, индекс которого вы хотите:

var index = e.g $('#ul>li').index( liDomObject );

Следующее намного проще:

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

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

Сокращение для готового события

Явный и многословный способ:

$(document).ready(function ()
{
    // ...
});

Сокращение:

$(function ()
{
    // ...
});

В основной функции jQuery укажите параметр контекста в дополнение к параметру селектора. Задание параметра context позволяет запускать jQuery из более глубокой ветви в DOM, а не из корня DOM. Учитывая достаточно большой DOM, указание параметра контекста должно привести к повышению производительности.

Пример: Находит все входные данные типа радио в первой форме в документе.

$("input:radio", document.forms[0]);

Ссылка: http://docs.jquery.com/Core/jQuery#expressioncontext

Не только jQuery, но я создал небольшой мост для jQuery и MS AJAX:

Sys.UI.Control.prototype.j = function Sys$UI$Control$j(){
  return $('#' + this.get_id());
}

Очень хорошо, если вы делаете много ASP.NET AJAX, так как MS поддерживает jQuery, теперь с хорошим мостом означает, что действительно легко выполнять операции jQuery:

$get('#myControl').j().hide();

Таким образом, приведенный выше пример не очень хорош, но если вы пишете серверные серверные элементы управления ASP.NET AJAX, вы можете легко использовать jQuery в своей реализации клиентского управления.

Оптимизировать производительность сложных селекторов

Запрос подмножества DOM при использовании сложных селекторов резко повышает производительность:

var subset = $("");

$("input[value^='']", subset);

Говоря о Советы и хитрости, а также некоторые учебники. Я нашел эти серии обучающих программ ( «Jquery для начинающих» Absolute Video Series) по Джефри Пути очень полезны.

Он нацелен на тех разработчиков, которые плохо знакомы с jQuery. Он показывает, как создавать много интересных вещей с помощью jQuery, таких как анимация, создание и удаление элементов и многое другое ...

Я многому научился от этого. Он показывает, как легко использовать jQuery. Теперь мне это нравится, и я могу читать и понимать любой скрипт jQuery, даже если он сложный.

Вот один пример, мне нравится « Изменение размера текста »

1- jQuery ...

<script language="javascript" type="text/javascript">
    $(function() {
        $('a').click(function() {
            var originalSize = $('p').css('font-size'); // get the font size 
            var number = parseFloat(originalSize, 10); // that method will chop off any integer from the specified variable "originalSize"
            var unitOfMeasure = originalSize.slice(-2);// store the unit of measure, Pixle or Inch

            $('p').css('font-size', number / 1.2 + unitOfMeasure);
            if(this.id == 'larger'){$('p').css('font-size', number * 1.2 + unitOfMeasure);}// figure out which element is triggered
         });        
     });
</script>

2- CSS Styling ...

<style type="text/css" >
body{ margin-left:300px;text-align:center; width:700px; background-color:#666666;}
.box {width:500px; text-align:justify; padding:5px; font-family:verdana; font-size:11px; color:#0033FF; background-color:#FFFFCC;}
</style>

2- HTML ...

<div class="box">
    <a href="#" id="larger">Larger</a> | 
    <a href="#" id="Smaller">Smaller</a>
    <p>
    In today’s video tutorial, I’ll show you how to resize text every time an associated anchor tag is clicked. We’ll be examining the “slice”, “parseFloat”, and “CSS” Javascript/jQuery methods. 
    </p>
</div>

Очень рекомендую эти уроки ...

http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

Асинхронная функция each ()

Если у вас действительно сложные документы, в которых при выполнении jquery каждая функция () блокирует браузер во время итерации, и / или в Internet Explorer появляется сообщение « Вы хотите продолжить выполнение этого сценария », это решение сохранит день.

jQuery.forEach = function (in_array, in_pause_ms, in_callback)
{
    if (!in_array.length) return; // make sure array was sent

    var i = 0; // starting index

    bgEach(); // call the function

    function bgEach()
    {
        if (in_callback.call(in_array[i], i, in_array[i]) !== false)
        {
            i++; // move to next item

            if (i < in_array.length) setTimeout(bgEach, in_pause_ms);
        }
    }

    return in_array; // returns array
};


jQuery.fn.forEach = function (in_callback, in_optional_pause_ms)
{
    if (!in_optional_pause_ms) in_optional_pause_ms = 10; // default

    return jQuery.forEach(this, in_optional_pause_ms, in_callback); // run it
};

Первый способ, которым вы можете использовать это, как и каждый ():

$('your_selector').forEach( function() {} );

Необязательный второй параметр позволяет задать скорость / задержку между итерациями , которые могут быть полезны для анимации ( следующий пример будет ждать 1 секунду между ними итерациями ):

$('your_selector').forEach( function() {}, 1000 );

Помните, что поскольку это работает асинхронно, вы не можете полагаться на то, что итерации будут завершены до следующей строки кода, например:

$('your_selector').forEach( function() {}, 500 );
// next lines of code will run before above code is complete

Я написал это для внутреннего проекта, и, хотя я уверен, что его можно улучшить, он сработал для того, что нам было нужно, поэтому надеюсь, что некоторые из вас сочтут его полезным. Спасибо -

Синтаксическая стенография - вещь, кеширующая коллекцию объектов и выполняющая команды в одной строке:

Вместо:

var jQueryCollection = $("");

jQueryCollection.command().command();

Я делаю:

var jQueryCollection = $("").command().command();

Несколько «реальный» вариант использования может быть чем-то вроде этого:

var cache = $("#container div.usehovereffect").mouseover(function ()
{
    cache.removeClass("hover").filter(this).addClass("hover");
});

Мне нравится объявлять $thisпеременную в начале анонимных функций, поэтому я знаю, что могу ссылаться на jQueried this.

Вот так:

$('a').each(function() {
    var $this = $(this);

    // Other code
});

Сохранить объекты jQuery в переменных для повторного использования

Сохранение объекта jQuery в переменную позволяет вам повторно использовать его без необходимости искать его в DOM.

(Как предложил @Louis, теперь я использую $, чтобы указать, что переменная содержит объект jQuery.)

// Bad: searching the DOM multiple times for the same elements
$('div.foo').each...
$('div.foo').each...

// Better: saving that search for re-use
var $foos = $('div.foo');
$foos.each...
$foos.each...

В качестве более сложного примера, скажем, у вас есть список продуктов в магазине, и вы хотите показать только те, которые соответствуют критериям пользователя. У вас есть форма с флажками, каждый из которых содержит критерии. Флажки имеют имена, такие как organicи lowfat, и продукты имеют соответствующие классы - .organicи т. Д.

var $allFoods, $matchingFoods;
$allFoods = $('div.food');

Теперь вы можете продолжать работать с этим объектом jQuery. Каждый раз, когда устанавливается флажок (чтобы установить или снять флажок), начните с основного списка продуктов и отфильтруйте его в соответствии с установленными флажками:

// Whenever a checkbox in the form is clicked (to check or uncheck)...
$someForm.find('input:checkbox').click(function(){

  // Start out assuming all foods should be showing
  // (in case a checkbox was just unchecked)
  var $matchingFoods = $allFoods;

  // Go through all the checked boxes and keep only the foods with
  // a matching class 
  this.closest('form').find("input:checked").each(function() {  
     $matchingFoods = $matchingFoods.filter("." + $(this).attr("name")); 
  });

  // Hide any foods that don't match the criteria
  $allFoods.not($matchingFoods).hide();
});

Кажется, что большинство интересных и важных советов уже были упомянуты, так что это лишь небольшое дополнение.

Небольшой совет - это функция jQuery.each (object, callback) . Все, вероятно, используют jQuery.each (обратный вызов) для перебора самого объекта jQuery, потому что это естественно. Утилита jQuery.each (object, callback) выполняет итерации по объектам и массивам. Долгое время я почему-то не понимал, что это может быть, за исключением другого синтаксиса (я не против написания всех модных циклов), и мне немного стыдно, что я понял его основную силу только недавно.

Дело в том, что поскольку тело цикла в jQuery.each (object, callback) является функцией , вы каждый раз получаете новую область видимости в цикле, что особенно удобно при создании замыканий в цикле.

Другими словами, типичная распространенная ошибка - сделать что-то вроде:

var functions = [];
var someArray = [1, 2, 3];
for (var i = 0; i < someArray.length; i++) {
    functions.push(function() { alert(someArray[i]) });
}

Теперь, когда вы вызываете функции в functionsмассиве, вы будете трижды предупреждены о содержимом, undefinedкоторое, скорее всего, не то, что вы хотели. Проблема в том, что существует только одна переменная i, и все три замыкания относятся к ней. Когда цикл заканчивается, окончательное значение iравно 3 и someArrary[3]равно undefined. Вы можете обойти это, вызвав другую функцию, которая создаст для вас замыкание. Или вы используете утилиту jQuery, которая в основном сделает это за вас:

var functions = [];
var someArray = [1, 2, 3];
$.each(someArray, function(item) {
    functions.push(function() { alert(item) });
});

Теперь, когда вы вызываете функции, вы получаете три оповещения с содержанием 1, 2 и 3, как и ожидалось.

В общем, это ничего, что вы не могли бы сделать сами, но приятно иметь.

Доступ к функциям jQuery, как к массиву

Добавить / удалить класс на основе логического ...

function changeState(b)
{
    $("selector")[b ? "addClass" : "removeClass"]("name of the class");
}

Это более короткая версия ...

function changeState(b)
{
    if (b)
    {
        $("selector").addClass("name of the class");
    }
    else
    {
        $("selector").removeClass("name of the class");
    }
}

Не так много вариантов использования для этого. Тем не менее; Я думаю, что это аккуратно :)

Обновить

На случай, если вы не читаете комментарий, ThiefMaster указывает, что toggleClass принимает логическое значение , которое определяет, должен ли класс быть добавлен или удален. Итак, что касается моего примера кода выше, это был бы лучший подход ...

$('selector').toggleClass('name_of_the_class', true/false);

Обновить:

Просто включите этот скрипт на сайт, и вы получите консоль Firebug, которая появляется для отладки в любом браузере. Не совсем полнофункциональный, но довольно полезный! Не забудьте удалить его, когда вы закончите.

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

Проверьте эту ссылку:

Из хитростей CSS

Обновление: я нашел что-то новое; это JQuery Hotbox.

JQuery Hotbox

Google размещает несколько библиотек JavaScript в Google Code. Загрузка этого оттуда экономит пропускную способность, и она загружается быстро, потому что она уже была кэширована.

<script src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">  

    // Load jQuery  
    google.load("jquery", "1.2.6");  

    google.setOnLoadCallback(function() {  
        // Your code goes here.  
    });  

</script>

Или

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

Вы также можете использовать это, чтобы сказать, когда изображение полностью загружено.

$('#myImage').attr('src', 'image.jpg').load(function() {  
    alert('Image Loaded');  
});

«Console.info» firebug, который вы можете использовать для выгрузки сообщений и переменных на экран без использования блоков предупреждений. «console.time» позволяет легко настроить таймер, чтобы обернуть кучу кода и посмотреть, сколько времени это займет.

console.time('create list');

for (i = 0; i < 1000; i++) {
    var myList = $('.myList');
    myList.append('This is list item ' + i);
}

console.timeEnd('create list');

По возможности используйте методы фильтрации по псевдоселекторам, чтобы jQuery мог использовать querySelectorAll (что намного быстрее, чем sizzle). Рассмотрим этот селектор:

$('.class:first')

Такой же выбор можно сделать, используя:

$('.class').eq(0)

Что должно быть быстрее, потому что первоначальный выбор .class совместим с QSA

Удалить элементы из коллекции и сохранить возможность объединения

Учтите следующее:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

$("li").filter(function()
{
    var text = $(this).text();

    // return true: keep current element in the collection
    if (text === "One" || text === "Two") return true;

    // return false: remove current element from the collection
    return false;
}).each(function ()
{
    // this will alert: "One" and "Two"       
    alert($(this).text());
});

filter()Функция удаляет элементы из объекта JQuery. В этом случае: Все li-элементы, не содержащие текст «Один» или «Два», будут удалены.

Изменение типа элемента ввода

Я столкнулся с этой проблемой, когда пытался изменить тип элемента ввода, уже подключенного к DOM. Вы должны клонировать существующий элемент, вставить его перед старым элементом, а затем удалить старый элемент. В противном случае это не сработает:

var oldButton = jQuery("#Submit");
var newButton = oldButton.clone();

newButton.attr("type", "button");
newButton.attr("id", "newSubmit");
newButton.insertBefore(oldButton);
oldButton.remove();
newButton.attr("id", "Submit");

Разумное использование сторонних скриптов jQuery, таких как проверка поля формы или анализ URL. Стоит посмотреть, о чем идет речь, чтобы вы знали, когда в следующий раз встретите требование JavaScript.

Разрывы и цепочки

При объединении нескольких вызовов в коллекции ...

$("a").hide().addClass().fadeIn().hide();

Вы можете повысить удобочитаемость с помощью переносов строк. Нравится:

$("a")
.hide()
.addClass()
.fadeIn()
.hide();

Используйте .stop (true, true) при запуске анимации, чтобы предотвратить повторение анимации. Это особенно полезно для анимации ролловера.

$("#someElement").hover(function(){
    $("div.desc", this).stop(true,true).fadeIn();
},function(){
    $("div.desc", this).fadeOut();
});

Использование самозапускающихся анонимных функций в вызове метода, например, .append()для перебора чего-либо. IE:

$("<ul>").append((function ()
{
    var data = ["0", "1", "2", "3", "4", "5", "6"],
        output = $("<div>"),
        x = -1,
        y = data.length;

    while (++x < y) output.append("<li>" + info[x] + "</li>");

    return output.children();
}()));

Я использую это, чтобы перебрать вещи, которые были бы большими и неудобными, чтобы вырваться из моей цепочки, чтобы построить.

Поддержка атрибутов данных HTML5, на стероидах!

Функция данных была упомянута ранее. С его помощью вы можете связать данные с элементами DOM.

Недавно команда jQuery добавила поддержку пользовательских атрибутов данных data5 * в HTML5 . И как будто этого было недостаточно; они принудительно снабжают функцию данных стероидами, что означает, что вы можете хранить сложные объекты в форме JSON непосредственно в вашей разметке.

HTML:

<p data-xyz = '{"str": "hi there", "int": 2, "obj": { "arr": [1, 2, 3] } }' />

JavaScript:

var data = $("p").data("xyz");

data.str // "hi there"
typeof data.str // "string"

data.int + 2 // 4
typeof data.int // "number"

data.obj.arr.join(" + ") + " = 6" // "1 + 2 + 3 = 6"
typeof data.obj.arr // "object" ... Gobbles! Errrghh!