jquery новичок: как эффективно делать несколько действий на одном и том же элементе DOM?

Question

я недавно узнал (здесь на StackOverflow:)), что при использовании JQuery каждый раз, когда я пишу

$("...") 

поиск DOM выполняется для обнаружения согласующих элементов. Мой вопрос очень прост: как эффективно выполнять серию действий (используя красивые методы объектов jquery) на элементе DOM, который я нашел с jquery? В настоящее время я делаю (например):

var previousHtml = $("#myDiv").html(); 
$("#myDiv").addClass("tangoClass"); 
$("#myDiv").html("bla bla bla"); 
//... 

В принципе, я всегда имел в виду элемент, написав $ ("# myDiv"). Как я могу многократно манипулировать элементом DOM (используя функции jquery, а не ванильный Javascript) эффективным образом? Означает ли следующее: дорогостоящие поисковые запросы DOM?

var myDiv = $("#myDiv"); 
var previousHtml = myDiv.html(); 
myDiv.addClass("tangoClass"); 
myDiv.html("bla bla bla"); 

Или я вместо того, чтобы попытаться заковав JQuery звонки как можно больше, например:

var previousHtml = $("#myDiv").addClass("tangoClass").html(); //saves me 1 $("#myDiv") call 
$("#myDiv").html("bla bla bla"); 

Спасибо за любой проницательности. :)

лара

Answer 1

Никто не связал jQuery Performance Rules, так что я буду звонить, так как это отличная статья и обязательное чтение для новых разработчиков jQuery!

Как вы увидите, это подтверждает ваши подозрения: caching your jQuery objects, сохраняя их в переменных так же эффективно, как и цепочка.

Answer 2

Да, я бы рекомендовал использовать цепочки, потому что методы JQuery обычно возвращают элемент, измененный, так что не нужно смотреть вверх в DOM снова. И я считаю его более читаемым (вы знаете, какие операции принадлежат тому элементу).

Answer 3

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

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

$("#myDiv").html('bla bla bla').addClass('tangoClass'); 

Answer 4

два одинаковых.

var myDiv = $("#myDiv"); // $("#myDiv") runs document.getElementById, 
         // wraps the DOMElement, returns the wrapper. 
myDiv.addClass("tangoClass"); // obviously reuses the object 
myDiv.html("bla bla bla"); // ditto 

цепочки точно так же, потому что методы JQuery возвращают this объект, который они прикреплены к:

myDiv 
    .addClass("tangoClass") 
    .html("bla bla bla") 
; 

вы можете проверить это с (myDiv === myDiv.html("bla bla bla"))

, чтобы ответить на ваш вопрос «, который я должен использовать ": DRY (Не повторяйте себя) предложит цепочку. просто не забывайте читаемость (не выставляйте много вызовов методов в одну строку, мой рецепт читаемости выше)

Answer 5

Это зависит от того, какие функции вы вызываете на этот элемент, поскольку не все функции возвращают DOM элемент. Однако, если все функции, которые вы должны вызывать, всегда будут возвращать элемент DOM, то это может сделать ваш код более читаемым.

Answer 6

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

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

Удачи вам!

Answer 7

Я также согласен, что сцепление является наилучшим способом использовать, но что-то еще никто не имеет адрес здесь используется .andSelf() (1) и .end() (2) в то время как цепочки.

следующее добавляет класс «граница» как к div, так и к p, содержащимся внутри.

$("div").find("p").andSelf().addClass("border"); 

Использование .end() "сброс" селектор

$("div") 
    .find("p").addClass("myParagraph").end() 
    .find("span").addClass("mySpan"); 

---

обновление: .andSelf() является устаревшим и по существу переименованы в .addBack(), использовать его таким же образом.