Научете как да създадете елемент в jQuery

Създаването на нов елемент е една от най-основните задачи, които можете да изпълните с библиотеката на jQuery JavaScript. Използвайки jQuery, задачата е много по-проста от еквивалентния подход с Document Object Model (DOM). Освен това ще го намерите по-гъвкав и изразителен, колкото повече използвате jQuery.

За да послужите за цел, ще трябва да можете да добавите своя елемент към уеб страница. Научете как да добавите нов елемент от списъка или да замените параграф с ново съдържание с помощта на jQuery.

Какво е jQuery?

Библиотеката jQuery е колекция от JavaScript код с две основни цели:

• Той опростява обичайните JavaScript операции.
• Той се справя с проблемите с кръстосаната съвместимост с JavaScript между различни браузъри.

Втората цел се грижи за грешки, но също така се занимава с разликите в изпълнението между браузърите. И двете цели са по-малко необходими, отколкото преди, тъй като браузърите се подобряват с времето. Но jQuery все още може да бъде ценен инструмент.

Какво е елемент?

Елементът понякога се нарича таг. Въпреки че двете често се използват взаимозаменяемо, има фина разлика. Тагът се отнася до литерала или

 включвате в HTML файл, за да маркирате текстовото съдържание. Елементът е обектът зад кулисите, който представлява маркирания текст. Мислете за елемент като DOM аналог на HTML таговете.

Как да създадете нов елемент с помощта на jQuery

Подобно на повечето jQuery операции, създаването на елемент започва с функцията долар, $(). Това е пряк път към ядрото jQuery() функция. Тази функция има три различни цели, тя:

• Съвпада с елементи, обикновено такива, които вече съществуват в документа
• Създава нови елементи
• Изпълнява функция за обратно извикване, когато DOM е готов

Когато подадете низ, съдържащ HTML като първи параметър, тази функция ще създаде нов елемент:

$("")

Това връща специален jQuery обект, който съдържа колекция от елементи. В този случай има един-единствен обект, представляващ елемент "a", който току-що създадохме.

Низът трябва да изглежда като HTML, за да се разграничи това действие от съответстващите елементи. На практика това означава, че низът трябва да започва с a <. Не можете да добавите обикновен текст към документа, като използвате този метод.

Важно е да разберете, че това не добавя елемента към вашия документ, а само създава нов елемент, готов за добавяне. Елементът е „неприкачен“, заема памет, но всъщност все още не е част от крайната страница.

Добавяне на по-сложен HTML

Функцията за долар всъщност може да създаде повече от един елемент. Всъщност той може да изгради всяко дърво от HTML елементи, които искате:

$("

един
две
три
")

Можете също да използвате този формат, за да създадете елемент с атрибути:

$('')

Как да зададете атрибути на нов елемент

Можете да създадете нов jQuery елемент и да зададете неговите атрибути, без да се налага сами да създавате пълния HTML низ. Това е полезно, ако генерирате стойности на атрибути динамично. Например:

снимка = нова дата().getHours() > 12? "afternoon.jpg": "morning.jpg";
$("", { src: снимка });

Как да добавите елемент

След като създадете нов елемент, можете да го добавите към документа по няколко различни начина. Документацията на jQuery събира тези методи заедно под категория „манипулация“..

Добавете като дъщер на съществуващ елемент

$("тяло").append($("
Здравей свят
"));
$(document.body).append($el);

Можете да използвате този метод, например, за да добавите нов елемент от списъка в края на списък.

Добавете го като брат или сестра на съществуващ елемент

$("p.last").after("
Нов параграф
")
$("ul li: first").before("
нов продукт
")

Това е добър избор, ако например искате да добавите нов параграф в средата на два други.

Заменете съществуващ елемент

Можете да замените съществуващ елемент с новосъздан с помощта на замени с() метод:

$('#old').replaceWith("
Нов параграф
");

Увийте около съществуващ елемент

Това е доста рядък случай на употреба, но може да искате да включите съществуващ елемент в нов. Например, може да имате a код елемент, който искате да увиете в a пред:

$('code#n1').wrap("
")

Достъп до създадения от вас елемент

В $() функцията връща jQuery обект. Това е полезно за последващи операции:

$el = $("p");
$('тяло').append($el);

Имайте предвид, че по конвенция jQuery програмистите често назовават jQuery променливи с водещ знак за долар. Това е просто схема за именуване и не е пряко свързана с $() функция.

Създаване на елементи с помощта на jQuery

Въпреки че можете да манипулирате DOM с помощта на естествени функции на JavaScript, jQuery го прави много по-лесно да го направите. Все още е много полезно да имате добро разбиране на DOM, но jQuery прави работата с него много по-приятна.

Скритият герой на уебсайтовете: Разбиране на DOM

Изучавате уеб дизайн и трябва да знаете повече за обектния модел на документ? Ето какво трябва да знаете за DOM.

Прочетете Следващото

За автора