Приветствую своих читателей, сегодняшний пост будет на тему Jquery. jQ не единственная библиотека Javascript, но одна из самых популярных.

Этот будет цикл постов на эту тему. Что-то вроде jquery для начинающих. Один пост у меня уже был посвящен на эту тему, там вы можете немного ознакомиться с jQ - Эффекты jQuery.

Для начала

Как самый первый шаг для работы с этой библиотекой (подчеркиваю библиотекой, это не какой-то отдельный язык, все тот же javascript), нужно будет скачать jquery.
Далее на самом официальном сайте jquery.com можете смотреть свежие версии библиотеки.

Затем

Затем нужно будет подключить файл. Загрузить его в корень сайта, и затем подключите следующим образом:

1

<script src='путь/к/файлу' type='text/javascript'></script>

Проверим

Теперь чтобы проверить заработало ли, создадим див:

1

<div id='test'></div>

И напишем такой скрипт:

1

$("#test").text("test");

Если в диве с id test появился нужный текст, значит все работает правильно.

Наверное, уже понятно, что с помощью .text можно задать нужный текст элементу.

Как обратиться к элементу?

В jQuery в отличии от DOM JS обращаться к элементам быстрее:

1
2
3

$("#test") // обращение к дивам
$("div") // обращение к тегу
$(".test") // обращение к классу

Jquery CSS

Теперь, о том как править css свойства с помощью jquery.
Как самый просто пример для начала, изменим тот же div с id test.

1

$("#test").css("background-color","#ccc");

Для начала указываем свойство, затем значение для этого свойства.

Теперь как узнать значение свойства какого-то элемента?

1
2

var color = $("#test").css("background-color");
$("#test").html("The color is " + color);

Тут же как раз и познакомились с методом .html(). С помощью него также можно дополнять элементы.

Удалить все поэлементы выбранного элемента

Это сделать достаточно просто с помощью следующего кода:

1

$("#test").empty();

Получить и изменить значение input

Тут есть разница между html и val. К примеру, если вспомнить DOM:

1

<textarea id='someid'>some text</textarea>

То обратиться к этому коду можно по разному:

1
2
3
4
5
6
7
8

//first 
function ont(){
var a = document.getElementById('someid').value;
}
//second
function check(){
var b = document.getElementById('someid').innerHTML;
}

Затем сделаем кнопку:

1
2

<input type='button' onclick='ont();' value='Проверить 1 функцию' />
<input type='button' onclick='check();' value='Проверить 2 функцию' />

Зайдите сюда, далее напечатайте какой-нибудь текст в это поле, понажимайте по кнопкам и увидите разницу.

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

1

$("#someid").val("vv");

Я решил сделать цикл постов на эту тему, так что на этом все. Чтобы не пропустить следующие записи на тему jQ, не забудьте подписаться.

Рекомендую еще почитать

Вы, можете добавить эту статью, в один из следующих сервисов: