jQuery Academy · Урок

Манипуляции с DOM в jQuery — 1

Манипуляции с DOM в jQuery

Урок 1 из 111 шагов

«Манипуляции с DOM в jQuery — 1» — бесплатный урок jQuery Academy на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 1 уроков всего.

Введение в методы

Здравствуйте!

До сих пор мы изучили, для чего используется jQuery и как применять селектор.

Теперь рассмотрим методы, позволяющие изменять DOM.

Метод text

Метод text()

Мы используем метод text(), чтобы получить содержимое элемента HTML.

Используйте $ (selector).text(), чтобы прочитать содержимое элемента.

Кроме того, метод text используется для обновления содержимого элемента. Достаточно передать новое содержимое методу text в качестве аргумента.

<h1 id="hello">Hello Coddy</h1>		
<h2 id="target"></h2>

<script>
$(document).ready(function(){

/*
With the $ ('# hello') statement, 
we selected the element with hello id 
and set the element's content related
to the text method of this object to 
the variable named result.
*/
var result =  $('#hello').text();

/* 
We find the element with the 
target id in the DOM and assign the value 
of the result variable to the 
text method of this object. 
*/

$('#target').text(result);

/*
As a result, we have assigned 
the value of the h1 element 
to the h2 element.
*/
});
</script>

Вопрос

Метод html

Метод html()

Следующий метод — html(). 

Как можно понять из его названия, он возвращает весь элемент, а не только содержимое выбранного элемента.

Определим ниже пример элемента HTML.

Определены два элемента HTML с идентификаторами base и target. Затем, как только DOM загружен, 

всё содержимое HTML элемента base скопировано и добавлено в элемент с идентификатором target.

<div id="base">
    <p>Hello Coddy</p>
    <p>I'm p element</p>
  </div>		

<div id="target"></div>

<script>

/* 
Callback will run as son as 
the DOM is loaded
*/
$(document).ready(function(){
     //copy the base element HTML
     var baseHTML =  $('#base').html();
     /* update target element 
     by using baseHTML value
     */
     $('#target').html(baseHTML);
})
</script>

Выбор по атрибуту

Метод attr()

Мы используем атрибуты, чтобы задавать дополнительные свойства элементов HTML.

Часто при написании кода JavaScript нам требуется получить значения этих атрибутов.

В таких случаях используется метод attr.

Изучим этот метод на примере ниже.

<a  href="https://www.coddykit.com"  
       target="_blank"
       title="CoddyKit Web App" class="base">
     Go CoddyKit
</a>		
<br/>
<span id="link-title"></span>

<script>

/*
Callback will run as son 
as the DOM is loaded
*/
$(document).ready(function(){

     //Read link's title attribute
     var linkTitle =  $('a').attr('title');

     /* update target element content 
         by using linkTitle value
     */
     $('#link-title').text(linkTitle);
})
</script>

Атрибут

Процесс установки новых атрибутов похож на методы text() и html(), которые мы изучили ранее.

Передав аргумент методу attr(), который мы используем для чтения, мы можем определить новый атрибут для целевого элемента.

/* 
The target attribute of the element with 
my-link id has been passed the _blank value.
*/
// Mock for Judge0 Node environment
const element = { attr: function(name, value) { console.log(`Setting ${name} to ${value} for #my-link`); } };
const $ = (selector) => element;
$('#my-link').attr('target', '_blank');

removeAttr

Метод removeAttr()

Мы научились добавлять атрибуты; 

теперь рассмотрим, как удалить существующий атрибут.

Для этого мы воспользуемся методом removeAttr().

Рассмотрим наш пример.

/*
All elements
with tag a have been deleted.
*/
// Simulated DOM for Node.js
const elements = [
  { tag: 'a', target: '_blank' },
  { tag: 'a', target: '_self' },
  { tag: 'p' }
];
elements.forEach(el => {
  if (el.tag === 'a') delete el.target;
});
console.log(JSON.stringify(elements));

Метод val

Метод val()

Формы незаменимы в современных веб-приложениях. Мы будем использовать метод val(), чтобы считывать данные, введённые пользователями в элементы формы.


<input type="text" id="name" 
           name="yourname" 
           value="CoddyKit" />
  <p>
   Your name: <span id="target"></span>
 </p>
<script>

/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){

//copy the input elemens value
var yourName =  $('#name').val();

/* update target element 
    text by using yourName value
*/
  $('#target').text(yourName);
})

</script>

Предупреждение

На уроке по обработке событий мы узнаем, как отслеживать каждое введённое значение и отображать его в элементе span.

Дополнительная информация

Чтобы обновить значение поля ввода, как Вы, вероятно, догадались, мы передаём аргументы методу val.

const $ = (selector) => ({
  val: (value) => console.log(`Set ${selector} to ${value}`)
});
$('#name').val('New value')

Поздравляем

Поздравляем 🎉

Мы начали изучать манипуляции с DOM 

В следующем разделе мы продолжим изучать манипуляции с DOM в jQuery.

Манипуляции с DOM в jQuery — 1 — иллюстрация 11
Можно начать бесплатно

Изучай JavaScript с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
22
Уроки
48

Часто задаваемые вопросы

Урок «Манипуляции с DOM в jQuery — 1» бесплатный?

Да — полный текст урока «Манипуляции с DOM в jQuery — 1» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 1 уроков всего.

Чему я научусь в уроке «Манипуляции с DOM в jQuery — 1»?

Манипуляции с DOM в jQuery Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать jQuery Academy?

Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 1.

Сколько времени занимает урок «Манипуляции с DOM в jQuery — 1»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке jQuery Academy?

Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

← Назад к jQuery Academy