Все эффекты библиотеки jQuery описать я вам тут не смогу, тем не менее, разделю тогда на три статьи.

Перейду сразу к эффектам, постараюсь изложить кратко и понятно.

Важно : Чтобы jQ работал, необходимо данную библиотеку подключить.
Переходим по этой ссылке, скачиваем этот файл.
Заливаем себе в корень сайта и подключаем следующим образом:

1
2

<script  type="text/javascript" src="путь_к_скрипту_библиотекиJQ">
</script>

Теперь, когда jQ подключен, посмотрим что можно сделать с его функциями.

show( )

Показывает каждый выбранный элемент, если он скрыт.Ничего не произойдет если элемент не скрыт.
Элемент может быть скрыт в самом jQ, или же с помощью CSS (display: none).

1
2
3
4
5
6
7
8

<div id="hidden" style="display:none">Привет.Я скрытый текст</div>
<script type="text/javascript">
 function showdiv(){    
$("#hidden").show();
          }
 
 </script>
<input type="button" onclick="showdiv()" value="Показать скрытый див" />

Смотрим пример.

Так задержимся, метод show() имеет три аргумента: slow,normal,fast.Что это значит вам вероятно понятно.
Вот еще один пример, с использованием аргумента:

1
2
3
4
5
6
7
8

<div id="hiddens" style="display:none">Привет.Я скрытый текст, разворочиваюсь медленно!</div>
<script type="text/javascript">
 function showdivs(){    
$("#hiddens").show("slow");
          }
 
 </script>
<input type="button" onclick="showdivs()" value="Показать скрытый див" />

Смотрим пример.

hide( )

Задерживаться особо не буду.Противоположно методу show(), скрывает элементы на странице.
Покажу лишь пример.
Также имеет те три аргумента.

toggle( )

Совмещает в себе и hide() и show().Если элемент показан на странице, он его скроет.Еслит же элемент скрыт, он его покажет.
Так же может показать быстро,нормально или медленно.

1
2
3
4
5
6
7
8

<div id="toogle">Привет.Покажу пример использования Toogle().</div>
<script type="text/javascript">
 function toggled(){    
$("#toogle").toggle("slow");
          }
 
 </script>
<input type="button" onclick="toggled()" value="Показать/Скрыть div" />

Показываю пример.

На Заметку

1
2
3

$("#ourdiv").show(); /* jQ возьмет элемент с идом ourdiv и покажет*/
$(".ourclass").show();/* Возьмет и покажет элемент с классом ourclass*/
$("p").show(); /* Возьмет все теги p на странице и покажет их */

P.S Продолжение будет дальше.

Нет похожих публикаций.

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