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

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

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

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

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

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

var $j = jQuery.noConflict();

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

Очень полезный, если у Вас есть несколько платформ, которые могут быть сведены к $x(...) - вызовы стиля.

вместо того, чтобы использовать различный псевдоним для объекта 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 только, но я сделал миленький мост для Ajax MS и jQuery:

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

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

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

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

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

Как так:

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

    // Other code
});

Проверка Индекс

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

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

следующее намного легче:

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

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

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

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

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

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

Ooooh, давайте не забывать метаданные jQuery ! Данные () функция является большой, но это должно быть заполнено через вызовы 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>

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

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

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

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

Синтаксическая краткая сахарная вещь - Кэширует объектный набор и выполняет команды на одной строке:

Вместо:

var jQueryCollection = $("");

jQueryCollection.command().command();

я делаю:

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

А несколько "реальный" вариант использования мог быть чем-то вдоль этих строк:

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

Замените анонимные функции именованными функциями. Это действительно заменяет контекст 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 );

Обработчики событий Live

Установите обработчик событий для любого элемента , который соответствует селектору, даже если он добавляется в 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 для абсолютных новичков») от Jeffery Way ОЧЕНЬ ПОЛЕЗНЫЕ.

Он нацелен на разработчиков, которые плохо знакомы с 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 /

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

Примите во внимание следующее:

<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 subset = $("");

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

It seems that most of the interesting and important tips have been already mentioned, so this one is just a little addition.

The little tip is the jQuery.each(object, callback) function. Everybody is probably using the jQuery.each(callback) function to iterate over the jQuery object itself because it is natural. The jQuery.each(object, callback) utility function iterates over objects and arrays. For a long time, I somehow did not see what it could be for apart from a different syntax (I don’t mind writing all fashioned loops), and I’m a bit ashamed that I realized its main strength only recently.

The thing is that since the body of the loop in jQuery.each(object, callback) is a function, you get a new scope every time in the loop which is especially convenient when you create closures in the loop.

In other words, a typical common mistake is to do something like:

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

Now, when you invoke the functions in the functions array, you will get three times alert with the content undefined which is most likely not what you wanted. The problem is that there is just one variable i, and all three closures refer to it. When the loop finishes, the final value of i is 3, and someArrary[3] is undefined. You could work around it by calling another function which would create the closure for you. Or you use the jQuery utility which it will basically do it for you:

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

Now, when you invoke the functions you get three alerts with the content 1, 2 and 3 as expected.

In general, it is nothing you could not do yourself, but it’s nice to have.

Update:

Just include this script on the site and you’ll get a Firebug console that pops up for debugging in any browser. Not quite as full featured but it’s still pretty helpful! Remember to remove it when you are done.

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

Check out this link:

From CSS Tricks

Update: I found something new; its the the JQuery Hotbox.

JQuery Hotbox

Google hosts several JavaScript libraries on Google Code. Loading it from there saves bandwidth and it loads quick cos it has already been cached.

<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>

Or

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

You can also use this to tell when an image is fully loaded.

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

The "console.info" of firebug, which you can use to dump messages and variables to the screen without having to use alert boxes. "console.time" allows you to easily set up a timer to wrap a bunch of code and see how long it takes.

console.time('create list');

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

console.timeEnd('create list');

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

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

Разрывы строк и возможность цепочки

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

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

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

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

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

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

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

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

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

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

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

The explicit and verbose way:

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

The shorthand:

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

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

Если у вас есть действительно сложные документы , где запуск jquery функция each () блокирует браузер во время итерации, и / или 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
};

Первый способ использования такой же, как и each ():

$('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

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

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

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

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

$("<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();
}()));

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

(Это бесполезный плагин)

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

// elementExists is also added
if ($("#someid").elementExists())
  alert("found it");

// Select box related
$("#mydropdown").isDropDownList();

// Can be any of the items from a list of radio boxes - it will use the name
$("#randomradioboxitem").isRadioBox("myvalue");
$("#radioboxitem").isSelected("myvalue");

// The value of the item selected. For multiple selects it's the first value
$("#radioboxitem").selectedValue();

// Various, others include password, hidden. Buttons also
$("#mytextbox").isTextBox();
$("#mycheck").isCheckBox();
$("#multi-select").isSelected("one", "two", "three");

// Returns the 'type' property or 'select-one' 'select-multiple'
var fieldType = $("#someid").formElementType();

Этот фрагмент предназначен для Коби .

Рассмотрим следующий фрагмент кода:

// hide all elements which contains the text "abc"
$("p").each(function ()
{
    var that = $(this);

    if (that.text().indexOf("abc") > -1) that.hide();
});    

Вот сокращение ... которое примерно в два раза быстрее:

$("p.value:contains('abc')").hide();

Вот источник java.util.Arrays .

На самом деле, у вас есть этот исходный код в JDK - просто откройте java.util.Arrays в вашей среде IDE и исходный код + комментарии появятся. Если у вас нет среды IDE, посмотрите на JDK _ HOME\src.zip

Затем поместите ее в среду IDE и проследите, как она работает.

• установите точки останова (и запустите программу в режиме отладки)
• с помощью System.out.println (..)
• измените ее части, чтобы увидеть, как они отражаются.
• Прочитайте статью википедии о сортировке слиянием
• обратите внимание на этот комментарий: //Рекурсивно отсортировать половины dest в src

Вы можете проанализировать eMails с помощью модуля электронной почты .

No-conflict метода

jQuery.noConflict();

"Запустите эту функцию, чтобы вернуть управление переменной $ в ту библиотеку, в которой она была реализована. Это позволяет убедиться, что jQuery не конфликтует с объектом $ других библиотек.

С помощью этой функции можно получить доступ к jQuery только с помощью переменной jQuery . Например, если раньше выполнялось $ ("div p") , теперь необходимо выполнить jQuery ("div p") ".