Закрыть
Войти
Подождите...
Собирается информация...
Восстановить пароль
Логин или пароль введены не верно!
Подождите...
Идет авторизация.
Вход
Логин или пароль введены не верно!
Забыли пароль?
или войти через вконтакте

Получение и изменение данных

Открыть содержание
JavaScript

Так как если мы можем получить какие-то данные, то, определенно, можем и назначить их, поэтому объединим эти две структуры. 

Для начала, рассмотрим некоторую логику работы этих свойств. 

У каждого метода есть название, например val - работа с значением input-а. 

Если мы хотим получить значение, то пишем название метода и круглые скобки: 

 .val()

Есть свойства, которые позволяют получать определенные значения, такие как attr (работа с атрибутом). Мы можем получать значения определенных атрибутов: 

.attr('id')

В этом случае, мы прописываем в кавычках то, что хотим получить. В этом примере мы получим значение атрибута id. 

Обязательно необходимо значение записывать в какую-то переменную, иначе зачем это делать?)

var value=$('input').val();
var id=$('input').attr('id');

Если мы хотим передать значение, то пишем метод и в фигурных скобках передаем значение, которое хотим передать. 

.val('Значение')
.attr('name','Значение')

В случае с атрибутом, мы в скобках первым параметром передаем атрибут, который хотим изменить, а вторым значение, которое хотим назначить. 


На самом деле, это все функции и в скобках мы передаем параметры для работы этой функции. 

То есть, функция attr() принимает два параметра. И если второй параметр пустой, то она работает на получение данных, иначе на назначение. 

Теперь, когда понятно как это работает, разберем все методы и как они работают в режиме получения или назначения данных: 

1) val()

Работает со значением input-ов, то есть с их атрибутом value

Получение: 

var value=$('input').val();

Назначение: 

$('input').val('Значение');

2) attr()

Работает с атрибутами. 

Получение: 

var value=$('.object').attr('атрибут');

Назначение: 

$('.object').attr('атрибут','значение');

3) css()

Работает с css-свойствами. 

Получение: 

var value=$('.object').css('css-свойство');

Назначение: 

$('.object').css('css-свойство','значение');

Если вы хотите сразу передать несколько значений css-свойств, то логика немного меняется и мы передаем в функцию css() массив.

$('.object').css({
  'css-свойство-1','значение-1',
  'css-свойство-2','значение-2',
  'css-свойство-3','значение-3',
});

4) html()

Например, у нас есть вот такой html: 

<div class='object'>
  <b>Текст</b>
  <p>Текст</p>
  <div>Текст</div>
</div>

Вы можете получить html-код внутри .object или назначить свой код.

Получение: 

var html=$('.object').html();

Назначение: 

$('.object').html('<div class="my_code">Мой HTML-код</div>');

Хочу обратить внимание, что если вы открываете и закрываете код одинарными ( ' ) кавычками, то внутри необходимо использовать двойные ( " ). 

Внимание! Если вы хотите форматировать вставляемый код, то перенос строки необходимо экранировать: 

$('.object').html('<div class="my_code">\
  Мой HTML-код\
</div>');

Там, где происходит перенос строки, необходимо поставить знак \. Иначе js будет выдавать ошибку. 

5) append(), prepend()

Если у вас уже есть какой-то html-код и вы хотите его дополнить, то используйте эти методы: 

apppend() - вставляет код в конец документа. 

Например, у вас есть такой код: 

<div class='object'>
  <b>Текст</b>
  <p>Текст</p>
  <div>Текст</div>
</div>

 То после выполнения этого скрипта: 

$('.object').append('<!--html-код-->');

результат будет следующий: 

<div class='object'>
  <b>Текст</b>
  <p>Текст</p>
  <div>Текст</div>
</div>
<!--html-код-->

prepend() - работает наоборот и вставляет код в начало документа. 

$('.object').prepend('<!--html-код-->');

Теперь результат будет выглядеть вот так: 

<!--html-код-->
<div class='object'>
  <b>Текст</b>
  <p>Текст</p>
  <div>Текст</div>
</div>

6) text()

Работает в точности как html, только получает и назначает ТОЛЬКО текст. 

Если вы попробуете получить text() из этого html-кода: 

<div class='object'>
  <b>Текст</b>
  <p>Текст</p>
  <div>Текст</div>
</div>

то результат будет такой: "Текст Текст Текст". 

То есть он отбросит все html-теги и получит ТОЛЬКО текст. 

7) addClass(), removeClass()

Для работы с классами есть еще два раздельных метода, которые позволяют добавить объекту класс или удалить его.  

Добавление: 

$('.object').addClass('Название_класса');

Удаление: 

$('.object').removeClass('Название_класса');

P.S. 

Для получение значения class можно использовать метод .attr('class')

P.S.S

Для назначения или получения ID объекта, опять же, используйте attr('id') / attr('id','Значение').

8) remove()

Ну и на финалочку мы просто удалим объект со страницы. 

$('.object').remove();

Это основные моменты, с которыми вы будете постоянно сталкиваться. Далее мы разберемся как работать с событиями.

Предыдущий урок Следующий урок
Политика конфиденциальности   Пользовательское соглашение