Поради та рекомендації jQuery

Синтаксис

• Стенограма до готового заходу ростеронацидом
• Розриви ліній та ланцюг сполучення ростеронацидом
• Вкладені фільтри Натана Лонга
• Кешуйте колекцію та виконайте команди в одному рядку roosteronacid
• Містить селектор ростеронацидом
• Визначення властивостей при створенні елемента ростеронацидом
• Отримуйте доступ до функцій jQuery так, як ви б вирішили масив roosteronacid
• Функція noConflict - звільнення змінної $ від Oli
• Виділіть змінну $ в режимі noConflict за допомогою nickf
• Безконфліктний режим ростеронацидом

Зберігання даних

• Функція даних - прив'язує дані до елементів TenebrousX
• Підтримка атрибутів даних HTML5 на стероїдах! ростеронацидом
• Плагін метаданих jQuery від Філіпа Дупановича

Оптимізація

• Оптимізуйте продуктивність складних селекторів ростеронацидом
• Параметр контексту від lupefiasco
• Збережіть та повторно використовуйте пошуки Натана Лонга
• Створення HTML-елемента та збереження посилання, Перевірка наявності елемента, Написання власних селекторів від Andreas Grech

Різне

• Перевірте індекс елемента в колекції за допомогою redsquare
• Живі обробники подій від TM
• Замініть анонімні функції на названі функції на ken
• Рамка Microsoft AJAX та міст jQuery від Slace
• Підручники jQuery від egyamado
• Видаліть елементи з колекції та збережіть придатність ростеронацидом
• Оголосіть $ this на початку анонімних функцій Беном
• FireBug lite, плагін Hotbox, повідомляють про завантаження зображення та Google CDN за допомогою Color Blend
• Розумне використання сторонніх сценаріїв jQuery від harriyott
• Кожна функція Яна Зіха
• Плагін розширень форми від Chris S
• Асинхронна кожна функція OneNerd
• Плагін шаблону jQuery: реалізація складної логіки за допомогою функції render від 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/ щодо подібних функцій заміни.

UPDATE2: 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);

Я вважаю це найбільш портативним. Я працюю над сайтом, який одночасно використовує і прототип, і 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 вкажіть параметр контексту на додаток до параметра селектора. Визначення параметра контексту дозволяє 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, оскільки jQuery підтримується MS, а тепер мати хороший міст, це означає, що робити jQuery операції дуже просто:

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

Отже, наведений вище приклад не є великим, але якщо ви пишете елементи керування сервером ASP.NET AJAX, це спрощує встановлення jQuery у вашій системі управління на стороні клієнта.

Оптимізація продуктивності складних селекторів

Запит на підмножину DOM при використанні складних селекторів значно покращує продуктивність:

var subset = $("");

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

Якщо говорити про поради та підказки, а також деякі підручники. Я знайшов, що ці серії навчальних посібників ( "Серія відеозаписів jQuery для абсолютних початківців") від Джеффірі Вейя ДУЖЕ ДОПОМОГІ.

Він націлений на тих розробників, які не знайомі з 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/

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

Якщо у вас є справді складні документи, де функція jquery every () блокує браузер під час ітерації, та / або 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 це.

Так:

$('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 (об'єкт, зворотний виклик) . Напевно, всі використовують функцію jQuery.each (зворотний виклик) для ітерації над самим об’єктом jQuery, оскільки це природно. Функція утиліти jQuery.each (об'єкт, зворотний виклик) перебирає об'єкти та масиви. Тривалий час я якось не бачив, що це може бути, крім іншого синтаксису (я не проти написати всі модні петлі), і мені трохи соромно, що я зрозумів його основну силу лише нещодавно.

Вся справа в тому, що оскільки тіло циклу в jQuery.each (об'єкт, зворотний виклик) є функцією , ви отримуєте нову область застосування щоразу в циклі, що особливо зручно, коли ви створюєте закриття в циклі.

Іншими словами, типова поширена помилка - робити щось на кшталт:

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.

JQuery Hotbox

Google розміщує кілька бібліотек JavaScript в коді Google. Завантаження його звідти економить пропускну здатність, і він швидко завантажує, тому що він уже був кешований.

<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 (що набагато швидше, ніж шипля). Розглянемо цей вибір:

$('.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. У цьому випадку: всі елементи лі, що не містять тексту "Один" або "Два", будуть видалені.

Зміна типу вхідного елемента

Я зіткнувся з цим питанням, коли я намагався змінити тип вхідного елемента, вже приєднаного до 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 додала підтримку користувальницьких атрибутів 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!