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

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

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





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



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

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





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

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

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

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

или



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

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

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



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

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

$(' ')

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



отворите .јар датотеке виндовс 10

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

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

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

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

$('
  • one
  • two
  • three
')

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

$(' my hometown')

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

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

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';
$(' ', { src: photo });

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

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

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

$('body').append($('

Hello, world

'));
$(document.body).append($el);

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

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

$('p.last').after('

A new paragraph

')
$('ul li:first').before('
  • new item
    • ')

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

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

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

    $('#old').replaceWith('

    New paragraph

    ');

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

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

    $('code#n1').wrap('
    ')
    Приступање елементу који сте креирали
     
    Тхе $ () функција враћа јКуери објекат. Ово је корисно за следеће операције:
    $el = $('p');  
    $('body').append($el);
    Имајте на уму да, према конвенцији, програмери јКуери често именују јКуери променљиве са водећим предзнаком долара. Ово је једноставно шема именовања и није директно повезана са $ () функција.
     
    Креирање елемената помоћу јКуери -ја
     
    Иако ДОМ -ом можете манипулисати коришћењем изворних ЈаваСцрипт функција, јКуери то чини много лакшим. И даље је веома корисно добро разумети ДОМ, али јКуери чини рад са њим много пријатнијим.
      Објави    Објави      Твеет      Емаил      Скривени херој веб локација: Разумевање ДОМ -а  
    Учите веб дизајн и требате знати више о Објектном моделу документа? Ево шта треба да знате о ДОМ -у.
    Прочитајте следеће       Повезане теме  
       
    • Програмирање
      •  
    • Веб Девелопмент
      •  
    • јКуери
      •  
      О аутору   Бобби Јацк(Објављено 58 чланака)      
    Бобби је ентузијаст технологије који је скоро две деценије радио као програмер софтвера. Одушевљен је играњем игара, ради као уредник рецензија у магазину Свитцх Плаиер, и уроњен је у све аспекте издаваштва на мрежи и веб развоја.
    Више од Боббија Јацка
    Претплатите се на наш билтен
     
    Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!
    Кликните овде да бисте се претплатили