Так как если мы можем получить какие-то данные, то, определенно, можем и назначить их, поэтому объединим эти две структуры.
Для начала, рассмотрим некоторую логику работы этих свойств.
У каждого метода есть название, например 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();Это основные моменты, с которыми вы будете постоянно сталкиваться. Далее мы разберемся как работать с событиями.