Научите како да направите елемент у јКуери-ју

Креирање новог елемента је један од најосновнијих задатака које можете да постигнете помоћу јКуери ЈаваСцрипт библиотеке. Користећи јКуери, задатак је много једноставнији од еквивалентног приступа са моделом објекта документа (ДОМ). Такође ћете га сматрати флексибилнијим и изражајнијим што више користите јКуери.

Да бисте служили сврси, мораћете да додате свој елемент на веб страницу. Научите како да додате нову ставку листе или замените пасус новим садржајем користећи јКуери.

Шта је јКуери?

јКуери библиотека је колекција ЈаваСцрипт код са два основна циља:

• Поједностављује уобичајене ЈаваСцрипт операције.
• Он се бави проблемима унакрсне компатибилности ЈаваСцрипт-а између различитих претраживача.

Други циљ се бави грешкама, али се такође бави разликама у имплементацији између претраживача. Оба циља су мање неопходна него што су била, пошто се претраживачи временом побољшавају. Али јКуери и даље може бити вредан алат.

Шта је елемент?

Елемент се понекад назива и ознака. Иако се ова два често користе наизменично, постоји суптилна разлика. Ознака се односи на литерал или

 укључите у ХТМЛ датотеку да бисте означили текстуални садржај. Елемент је објекат иза сцене који представља означени текст. Замислите елемент као ДОМ пандан ХТМЛ ознакама.

Како направити нови елемент користећи јКуери

Као и већина јКуери операција, креирање елемента почиње са функцијом долар, $(). Ово је пречица до језгра јКуери() функција. Ова функција има три различите сврхе, а то су:

• Одговара елементима, обично онима који већ постоје у документу
• Ствара нове елементе
• Покреће функцију повратног позива када је ДОМ спреман

Када проследите стринг који садржи ХТМЛ као први параметар, ова функција ће креирати нови елемент:

$("")

Ово враћа посебан јКуери објекат који садржи колекцију елемената. У овом случају, постоји један објекат који представља елемент "а" који смо управо креирали.

Стринг мора изгледати као ХТМЛ да би се ова радња разликовала од одговарајућих елемената. У пракси, то значи да низ мора да почиње са а <. Не можете додати обичан текст у документ користећи овај метод.

Важно је разумети да ово не додаје елемент вашем документу, већ само ствара нови елемент спреман за додавање. Елемент је „невезан“, заузима меморију, али заправо није део завршне странице – још увек.

Додавање сложенијег ХТМЛ-а

Функција долара заправо може створити више од једног елемента. У ствари, може да направи било које стабло ХТМЛ елемената које желите:

$("

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

Такође можете користити овај формат за креирање елемента са атрибутима:

$('')

Како поставити атрибуте на нови елемент

Можете креирати нови јКуери елемент и поставити његове атрибуте без потребе да сами правите цео ХТМЛ стринг. Ово је корисно ако динамички генеришете вредности атрибута. На пример:

фото = нови датум().гетХоурс() > 12? "афтерноон.јпг": "морнинг.јпг";
$("", { срц: фотографија });

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

Када креирате нови елемент, можете га додати у документ на неколико различитих начина. јКуери документација окупља ове методе заједно под категорија „манипулација“..

Додај као дете постојећег елемента

$("тело").аппенд($("
Здраво Свете
"));
$(доцумент.боди).аппенд($ел);

Можете користити овај метод, на пример, да додате нову ставку листе на крај листе.

Додајте га као брат или сестру постојећег елемента

$("п.последњи").после("
Нови пасус
")
$("ул ли: фирст").бефоре("
Нова ставка
")

Ово је добар избор ако, на пример, желите да додате нови пасус усред два друга.

Замените постојећи елемент

Можете заменити постојећи елемент за новокреирани користећи замени са() метод:

$('#олд').реплацеВитх("
Нови параграф
");

Омотајте постојећи елемент

Ово је прилично редак случај употребе, али можда бисте желели да приложите постојећи елемент у нови. На пример, можда имате а код елемент који желите да умотате у а пре:

$('цоде#н1').врап("
")

Приступ елементу који сте креирали

Тхе $() функција враћа јКуери објекат. Ово је корисно за накнадне операције:

$ел = $("п");
$('тело').аппенд($ел);

Имајте на уму да, по конвенцији, јКуери програмери често именују јКуери променљиве са водећим знаком долара. Ово је једноставно шема именовања и није директно повезана са $() функција.

Креирање елемената помоћу јКуери-ја

Иако можете да манипулишете ДОМ-ом користећи изворне ЈаваСцрипт функције, јКуери то чини много лакшим. И даље је веома корисно добро разумети ДОМ, али јКуери чини рад са њим много пријатнијим.

Скривени херој веб локација: разумевање ДОМ-а

Учите веб дизајн и желите да знате више о моделу објеката документа? Ево шта треба да знате о ДОМ-у.

Реад Нект

О аутору