Какова Ваша любимая функция jQuery? [закрытый]

Селекторы с поддержкой CSS 1-3 и XPath вместе взятые и ваши собственные селекторы!

// "odd" numbered rows in a table with class "orders"
jQuery('table.orders tr:odd')

// All external links (links that start with http://)
jQuery('a[@href^="http://"]')

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

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

• $ (документ) .ready (...). Посмотрите на реализацию этой функции. Существует множество операторов if-else, проверяющих различные функции браузера.

• Методы положения и измерения: $ (...). Offset (), $ (...). Position (), $ (...). width (), $ (...). innerWidth () и т. д. И здесь та же история. Кроме того, они работают надежно (или я предполагаю более надежно, что я смогу достичь себя) для особых случаев, таких как window и document.

• $ (...). Animate (). Также цепочка анимаций и $ (...). Stop (). Очень свободный API.

• Обработчики событий. Это то, что есть в каждой библиотеке JavaScript, и это не то, что нельзя было бы реализовать сам, но это приятно иметь.

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

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

Несмотря на то, что одним из преимуществ jQuery является селектор, я считаю, что они мне не нужны так часто, и если они мне нужны, я обычно обойтись базовыми.

Наконец, манипуляции с jQuery DOM имеют несколько полезных утилит, но в целом, я думаю, можно добиться того же с помощью немного большего (хотя и утомительного) кода. Я знаю, что, скорее всего, упрощаю, но не похоже, что есть какие-то серьезные проблемы с кроссбраузерностью.

Регулярное выражение в селекторах (поскольку я использую ASP.Net, а элементы управления имеют нелепые визуализированные идентификаторы.)

Чтобы получить это в jQuery:

<asp:TextBox ID="txtTest" runat="server" />

Я просто делаю следующее:

$("input[id$='txtTest']")

Это заставило меня изменить свой взгляд на то, как делать клиентскую работу на веб-сайтах.

Мне нравится, что он в определенной степени одинаково относится как к новичкам, так и к экспертам. Но если вы знаете, что делаете, вы действительно можете сделать приложение ярким во всех отношениях. Такие вещи, как отложенная загрузка, разделение кода и создание шаблонов, могут быть выполнены с помощью jQuery. Он был разработан как инструмент DOM, но может быть легко адаптирован для использования в пространстве имен и в качестве полнофункционального js-фреймворка.

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

Если вы новичок в jQuery, это должен быть плагин jQuery UI и темы, разработанные людьми для его использования. ThemeRoller позволяет быстро адаптировать темы и проигрывать сценарии «что, если» с вашим приложением, когда оно отображается в Firefox. Я смог значительно улучшить веб-приложение за счет использования вкладок, слайдеров-гармошек, датпикеров и предупреждений всего за день или два, не зная вообще jQuery.

Более опытным веб-разработчикам понравится философия jQuery " ненавязчивый JavaScript ", строгое использование XHTML и CSS, селекторов и цепочек.

Система плагинов просто великолепна. Технически вы можете быть и оставаться полным новичком в JQuery и по-прежнему использовать большую часть, если не все, его возможности с помощью плагинов. Это делает его очень популярным среди художников и непрограммистов, просто желающих добавить всплывающую подсказку, модальный диалог, лайтбокс, раскрывающееся меню и т. Д.

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

<p class="active" onclick="myFunction()">foo</p>

на веб-странице, я могу написать это:

<p class="active">foo</p>

и написать это один раз внутри своих тегов скрипта:

$(".active").click(function(){ ... });

Почему мне это больше нравится? Потому что jQuery отделяет контент от функциональности так же, как CSS отделяет контент от стиля. И, как отмечают Ян Зич и другие, jQuery упрощает программирование многих функций для любого браузера, поэтому, например, анимация становится легкой задачей, когда вы хотите имитировать вкладки, отображающие / скрывающие div на странице для пользователя.

Chaining! Huge jQuery chains are amazing. Sometimes I can't stop. It feels almost like doing everything in one line (you want to, don't deny it).

this.lasso = $('<div/>')
    .css({ position: 'absolute', overflow: 'hidden' })
    .addClass('ui-crop-lasso')
    .hide()
    .appendTo('body')
    .resizable({
        handles: 'all',
        start: setLasso,
        stop: setLasso,
        resize: setLasso,
        minHeight: 50,
        minWidth: 50
    })
    .draggable({
        containment: el,
        cursorAt: 'move',
        drag: setLasso
    });

Try it out, you'll be addicted in no time.

Selectors, and chaining.

Не нужно беспокоиться (так сильно) о совместимости между различными браузерами

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

var newDiv = $('<div></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(a) {
        return $(a).height() > 100;
    }
});

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

The way jQuery objects works regardless of being none, one or many DOM elements in it.

Also, event handling rocks. Being able to just return false on click events, for example, rocks.

Система подключаемых модулей:

((function($){
    $.fn.plugin = function(){
        return this.each(function(){
            //code here
        });
    }
})(jQuery)

Цепочка:

$('.parent').children().remove().end().css('background-color', 'red');

Кроссбраузерная совместимость с различными функциями, например. Ajax

$.GET('url', {data: 'here'}, function(data){ /* callback */ });

Относительные значения в анимированной функции:

$('div.class:hover').animate({ height: '+=10', width: '+=10', opacity: '-=.5' })