Последние обновления

jQuery для начинающих


Описание темы отсутсвует
Тема создана:
Ответов: 1
Просмотров: 837
Последний ответ:
SeoMagic
Посетитель
50 10 0

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

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

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

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

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

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

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

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

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

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

В jQuery в отличии от DOM JS обращаться к элементам быстрее:
$("#test") // обращение к дивам
$("div") // обращение к тегу
$(".test") // обращение к классу

Jquery CSS
Теперь, о том как править css свойства с помощью jquery.

Как самый просто пример для начала, изменим тот же div с id test.

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

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

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

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

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

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

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

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

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

<textarea id='someid'>some text</textarea>[/code]
То обратиться к этому коду можно по разному:
[code]//first 
function ont(){
var a = document.getElementById('someid').value;
}
//second
function check(){
var b = document.getElementById('someid').innerHTML;
}

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

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

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

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

$("#someid").val("vv");
Отредактировано автором в
MrBoriska
Посетитель
11 3 0

Познавательная статья) Продолжайте в том же духе.

Ух, ну и красиво я оформил подсветку кода  :)
Отредактировано Destroy (Администратор) в
Зарегистрируйтесь или авторизуйтесь что бы писать