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


507

Синтаксис

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

оптимизация

Разное

Ответы:


252

Создание элемента 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");
});

93
Писать свои собственные селекторы довольно гладко
— Hugoware

22
Кроме того, если это поможет, вы можете сделать $ ("<div />") и достичь того же, что и $ ("<div> </ div>")
— Hugoware

4
Я люблю новую часть селектора, не знал об этом.
— Пим Джагер

5
Поскольку я пока не могу редактировать вики сообщества: объедините проверку присваивания и существования сif ((var someDiv = $("#someDiv")).length) { /* do stuff with someDiv... */ }
— Бен Бланк

4
@Ben: Причина, по которой я избегаю таких идиом в JavaScript, заключается в том, что я не хочу создавать иллюзию того someDiv, что в ifзаявлении есть область действия , потому что это не так; JavaScript поддерживает только область действия
— Андреас Греч,

111

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


4
data () действительно очень помогает.
— Пим Джагер

3
Я заметил, что он не работает с элементами без установленного идентификатора.
— Мыслитель

20
@ Thinker: Да, это так.
— Алекс Барретт

Используйте data () вместо объявления глобальных переменных js, imo.
— Йохан


80

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

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

var $j = jQuery.noConflict();

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

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


1
@Oli: О документе готово-стенография; у вас есть пункт. Но тем не менее: это совет / хитрость. Тот, который я использую во всем своем коде исключительно потому, что я думаю, что он «выглядит» лучше. Думаю, это вопрос личных предпочтений :)
— cllpse

Каждый день я пробираюсь через бессмысленные XML / XLS / XLST, сайты, написанные со слишком большим количеством уровней абстракции, сложные отказоустойчивые системы на сайтах, которые никогда не превзойдут скромные серверы ... и все же люди жалуются на разницу между $ ( <string>) & $ (<function>). Заставляет меня плакать :)
— JoeBloggs

Когда я вижу $ (function () {...}), я знаю, что происходит. Более обычные вещи должны быть короче. Вот почему мы превращаем часто называемые фрагменты кода в функции.
— Луйкоре

77

Оооо, давайте не будем забывать метаданные 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>

7
html5 атрибуты данных делают это менее важной проблемой; В настоящее время обсуждается вопрос о том, как встроить атрибут данных html5 в функцию jquery data (): forum.jquery.com/topic/…
— Оскар Остегард,

10
@Oskar - да, это было реализовано в jQuery 1.4.3 - data-*атрибуты автоматически доступны через вызовы.data()
— nickf

73

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

Установите обработчик события для любого элемента, который соответствует селектору, даже если он добавляется в 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);.


1
Да, я люблю новые живые вещи. Обратите внимание, что он работает только начиная с jQuery 1.3.
— Носредна

4
+ 1.. Вы спасли меня от сильной боли в сердце ... Я случайно прочитал вашу запись, и в то время как я делал перерыв, пытаясь решить, почему мое мероприятие не было уволено. Спасибо
— Luke101

2
для других опоздавших к этой статье вы также можете посмотреть на делегат (): api.jquery.com/delegate Похоже на жизнь, но более эффективно.
— Оскар Остегард

2
Просто помните, что живые пузыри доходят до тела, так что связанное живое событие может быть запущено. Если что-то по пути отменяет это событие, прямое событие не будет запущено.
— nickytonline

1
live () и die () являются устаревшими методами, поскольку jQuery 1.7 вышел 3 ноября. Заменяется на (), api.jquery.com/on и off (), api.jquery.com/off
— Йохан,

46

Замените анонимные функции именованными функциями. Это на самом деле заменяет контекст 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 передает цель события как this, вы не можете получить «правильный» OO без использования вложений. Я обычно иду на компромисс:$('div').click( function(e) { return self.onClick(e) } );
— Бен Бланк

3
Извини, Бен, но я не понимаю, как твой комментарий имеет отношение к моему сообщению. Можете ли вы уточнить? Вы все еще можете использовать 'self' (или любую другую переменную), используя мое предложение; это ничего не изменит.
— Кен

Да, Бен, что именно ты имеешь в виду !?
— Джеймс

2
Я должен упомянуть: всегда переменная мех и функции в пространстве имен, а не в корне!
— jmav

45

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

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

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

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

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

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


43

вместо использования другого псевдонима для объекта 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 одновременно, и эти методы позволили избежать всех конфликтов.


Второй пример - nice'r для глаз :)
— cllpse

25
Однако есть разница: первый пример будет ожидать события document.ready (), а второй - нет.
— SamBeran

1
@SamBeran: правда, второй пример запустится немедленно; однако, если вы переносите объектный литерал, вы можете использовать $ (document) .ready (...) внутри объектного литерала, что означает, что вы можете указать, когда вы хотите запускать каждый фрагмент кода.
— Уил Мур III

4
instanceOfне будет работать, только instanceof. И все равно это не сработает, потому jQuery instanceof jQueryчто вернется false. $ == jQueryэто правильный способ сделать это.
— nyuszika7h

@ Nyuszika7H: Да, вы правы, но на самом деле дело не в этом.
— Ник

39

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

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

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

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

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

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

Что не так с методом core index ()? Это было в ядре с 1.2 по крайней мере. docs.jquery.com/Core/index
— кен

Хорошо, да, я немного играл в адвоката дьявола, потому что, когда я просматривал индекс jQuery (), я понял, что это довольно болезненно. Благодарю за разъяснение!
— Кен

4
Это круто, но важно знать, что это не будет работать правильно, если у вас были предыдущие братья и сестры, которые не были частью выбора.
— ТМ.

2
Я уверен, что начиная с jQuery 1.4, вы можете просто использовать index()и получить индекс от его родителя.
— Алекс

@alex - конечно, но обратите внимание на дату этого поста - до релиза 1.4 было 5 месяцев!
— красный квадрат

23

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

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

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

Сокращение:

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

22

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

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

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

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


10
Примечание: $(document.forms[0]).find('input:radio')делает то же самое. Если вы посмотрите на источник jQuery, вы увидите: если вы передадите второй параметр $, он на самом деле вызовет .find().
— nyuszika7h

Как насчет ... $('form:first input:radio')?
— ДаГревис

Пол Айриш отметил в paulirish.com/2009/perf (начиная со слайда 17), что это «назад» с точки зрения читабельности. Как указал @ Nyuszika7H, он использует .find () для внутреннего использования, а $ (document.forms [0]). Find ('input: radio') очень легко читать, по сравнению с помещением контекста в начальный селектор.
— LocalPCGuy

21

Не только 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 в своей реализации клиентского управления.


Предоставляет ли клиентская библиотека ajax способ найти элемент управления по оригинальному идентификатору, который вы назначили (в приведенном ниже коде)
— Chris S

this.get_id () вернет вам идентификатор элемента управления в области видимости клиента. Указанный сервером идентификатор является нерелевантным, поскольку идентификатор клиента генерируется в зависимости от иерархии родительских доменов
— Аарон Пауэлл,

20

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

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

var subset = $("");

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

7
Только если это подмножество кэшируется / сохраняется.
— Dykam

6
Это не сильно отличается от $ (""). Find ("input [value ^ = '']")
— Чад Моран

1
@Dykam: что это, в случае моего примера кода. Но ваша точка зрения остается в силе.
— cllpse

4
@ Чэд, на самом деле он идентичен и соответствует функции, которую ты написал
— Майк Робинсон,

19

Говоря о Советы и хитрости, а также некоторые учебники. Я нашел эти серии обучающих программ ( «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/


19

Асинхронная функция 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


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


18

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

Вместо:

var jQueryCollection = $("");

jQueryCollection.command().command();

Я делаю:

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

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

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

4
Лучше поместить ссылку $ (this) в локальную переменную, потому что вы получите небольшой удар по производительности, потому что это займет немного больше времени ...
— Сандер Верслуйс

4
В этом случае (без каламбура) я использую «это» только один раз. Нет необходимости в кешировании.
— cllpse

1
Небольшой совет. Хотя в данном случае это может не иметь значения, всегда стоит вносить дополнительные изменения в DOM. Например, элемент, над которым вы наводите курсор, уже имеет класс «hover». Вы удалите этот класс и добавите его снова. Вы можете обойти это с $(this).siblings().removeClass("hover"). Я знаю, это звучит как мелочь, но каждый раз, когда вы меняете DOM, может быть запущена другая перерисовка браузера. Другие возможности включают события, присоединенные к DOMAttrModified, или классы, изменяющие высоту элемента, которые могут запускать другие прослушиватели событий «изменения размера».
— gradbot

1
Если вы хотите использовать кеш и минимизировать изменения DOM, вы можете сделать это. cache.not(this).removeClass("hover")
— gradbot

@gradbot: я не понимаю твои последние два комментария. Не могли бы вы расширить?
— Randomblue

15

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

Вот так:

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

    // Other code
});

12
Вместо этого я использую «это» :)
— cllpse

2
ROA: Да, это будет кислота :) Вы также можете использовать arguments.callee, чтобы позволить анонимной функции ссылаться на себя
— JoeBloggs,

5
Джо - просто хедз-ап, звонящий уйдет с ECMAScript 5 и строгим режимом. См .: ejohn.org/blog/ecmascript-5-strict-mode-json-and-more
— Майк Робинсон,

@Joe Вы можете дать ему имя, просто будьте осторожны с причудами IE .
— Алекс

Отличный пример использования $ в начале имени переменной для указания переменной объекта jQuery по сравнению со стандартной переменной. Добавляя это в начало любой переменной, которая кэширует объект jQuery, вы сразу же узнаете, глядя на него, что вы можете выполнять функции jQuery над переменной. Делает код намного более читабельным сразу.
— LocalPCGuy

14

Сохранить объекты 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();
});

8
Мое соглашение об именах должно иметь $впереди. напримерvar $allItems = ...
— Луи

6
@Lavinski - Я думаю, идея заключается в том, что это $указывает на то, что это объект jQuery, который облегчил бы визуальную дифференциацию от других переменных.
— Натан Лонг

@ Луис - с тех пор я принял ваше соглашение и обновлю свой ответ соответствующим образом. :)
— Натан Лонг

11

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

Небольшой совет - это функция 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, как и ожидалось.

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


11

Доступ к функциям 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);

2
Это аккуратно и имеет несколько интересных применений, но это совсем не специфично для jQuery ... это просто то, что вы можете сделать с любым объектом JavaScript.
— ТМ.

1
Спасибо :) ... это простой JavaScript; Да. Но я бы сказал, что jQuery - это JavaScript. Я не утверждаю, что это специфично для jQuery.
— cllpse

7
В этом конкретном случае вы действительно хотите использовать, $('selector').toggleClass('name_of_the_class', b);хотя.
— ThiefMaster

9

Обновить:

Просто включите этот скрипт на сайт, и вы получите консоль 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');

в Иране не видно веб-страниц, загруженных с помощью API Google. фактически Google ограничил доступ иранцев к коду Google. так -1
— Алиреза Элиадерани

Я только что узнал, что вы можете использовать Firebug в любом браузере. Это потрясающе.
— Tebo

9

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

$('.class:first')

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

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

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


@ Nyuszika7H Я думаю, ты упускаешь суть. Дело в том, что QSA не может оптимизировать большинство псевдоселекторов, поэтому $ ('. Class: eq (0)') будет медленнее, чем $ ('. Class'). Eq (0).
— Ральф Хольцманн

9

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

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

<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-элементы, не содержащие текст «Один» или «Два», будут удалены.


Не проще ли просто использовать «каждый» и переместить изменение поля внутри переключателя?
— DisgruntledGoat

Обновил мой ответ. Пожалуйста, дайте мне знать, если я
— проясню

Это действительно УДАЛЯЕТ ли элементы? Кажется, насторожил с отфильтрованным списком элементов.
— Cheeso

1
Функция фильтра удаляет элементы из коллекции внутри объекта jQuery. Это не влияет на DOM.
— cllpse

6
В вашей функции фильтра вы можете просто написать: return !! $ (this) .text (). Match (/ One | Two /); ;)
— Винсент

8

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

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

7

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


7

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

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

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

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

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

4
В этом случае первый более читабелен, но да, в некоторых случаях разрывы строк увеличивают читабельность.
— nyuszika7h

7

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

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

7

Использование самозапускающихся анонимных функций в вызове метода, например, .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();
}()));

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


5

Поддержка атрибутов данных 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!
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.