Как пользоваться JQuery?

Как пользоваться JQuery?

JQuery – замечательная библиотека JavaScript, которая делает программирование с JavaScript еще легче. В этой инструкции я расскажу как пользоваться этой библиотекой и покажу несколько примеров использования JQuery.

Инструкция

Уровень сложности: Несложно

1 шаг

Для того чтобы начать работать с JQuery, нужно его сначала подключить. Для этого нужно вставить этот код в head область вашего сайта.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Или его можно просто скачать по этой ( http://code.jquery.com/jquery-latest.js ) ссылке, и сохранить в директорию вашего сайта. Тогда чтобы подключить его, нужен следующий код.
<script type="text/javascript" src="jquery-latest.js"></script>

2 шаг

Итак. JQuery мы подключили, теперь можно переходить к примерам.
Первый пример – это установка html кода или просто текста для объектов div.
Нужно создать объект div, с id=“mytest” к примеру.

А в скрипте прописать.
$(“#mytest”).html(‘Hello, <b>JQuery</b>!’);

В результате чего, у нас на странице появится надпись: “Hello, JQuery!”. Причем слово “JQuery” будет выделено жирным шрифтом.

3 шаг

Второй пример. Изменение классов объектов.
Для начала напишем стиль.
<style>
.test_class{
color: blue;
}
.test_class2{
color: red;
}

</style>

Затем пропишем html код страницы.
<div id="mytest" class="test_class">Hello world!</div>

И сам JS.
<script> $("#mytest").removeClass('test_class').addClass('test_class1'); </script> В следствии чего, текст приобретет красный цвет. Так как был убран класс “test_class” и выставлен “test_class1”.

4 шаг

А еще можно с помощью JQuery отправлять POST и GET запросы, к PHP скриптам.
Вот пример.
<script> jQuery.post("/test.php", { act: 'test'}, function (data) { alert(data); }); </script>

В следствии выполнения этого кода, будет отправлен POST запрос к скрипту test.php, и отправлены POST данные “act=test”.

Обсуждение

145_micro
Рейтинг
  1. +
  2. 0
c00ler (23:38 05.07.2011)

поэксперементирую со своим сайтом) заслуженный +

451_micro
Рейтинг
  1. +
  2. 0
ДИРОЛ (01:22 06.07.2011)

Кое как разобрался, автору плюс..молодец

Ваш комментарий

Запросить инструкцию

Не нашли нужную пошаговую инструкцию?
Возможно, что кто-то из посетителей сайта сможет помочь. Оставьте запрос прямо сейчас, если Вы уверены, что эта тема ещё не освещена на нашем проекте!

Рейтинг
  1. +
  2. 1
2
2453