jQuery – простые примеры взаимодействия с DOM

Добрый день уважаемые читатели блога Oracle Application Express (Oracle APEX)!

Сегодня мы рассмотри простой пример jQuery по работе c DOM.  Любой документ HTML структурирован в соответствии с объектной моделью документа, или DOM.  DOM состоит из каждого элемента на странице, в иерархической виде отражает дерево. Любой документ известной структуры с помощью DOM может быть представлен в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текстовый, графический или любой другой объект. Узлы связаны между собой отношениями “родительский-дочерний”.

Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.

Допустим у нас есть следующая HTML структура:

<link rel="stylesheet" type="text/css" href="stylesheet.css"/>

<script type=”text/javascript” src=”script.js”></script>

<body>        <div></div>       </body>

CSS:

div {
height:100px;
width:100px;
background-color:#FF0000;
border-radius:5px;
}

SCRIPT.JS:

$(document).ready(function() {
$('div').fadeOut(1000);
});

Давайте разберемся поподробнее, что выполняет каждая часть кода:

  • $() – функция, которая определяет с каким элементом мы хотим взаимодействовать. Допустим, чтобы манипулировать с тегом <p> достаточно воспользоваться следующим кодом $(‘p’).
  • $(document) – говорит нам о том, что все манипуляции мы будем осуществлять в этом самом документе.
  • .ready() – функция или основное действие, в JQuery. Это словно: “Эй, я собираюсь делать некие вещи, как только документ HTML готов!”. Все, что находится в скобках .ready() -  JQuery событие, которое происходит, как только HTML документ готов(т.е. загружены все элементы документа).
  • .ready(function() – данная часть функции выполняется, когда объектная модель готова к использованию.
  • $(‘div’).fadeOut(1000); – тело функции, которое определяет элемент для взаимодействия $(‘div’) – “<div></div>”
  • .fadeOut(1000); – функция применимая к этому элементу .fadeOut() – функция которая делает невидимыми все элементы набора, затем устанавливает CSS свойство display в «none». 1000 – скорость работы функции.

 

Нажмите на объект для демонстрации примера

P.s. Если вам понравилась статья то вы можете просмотреть рекламму, а я хоть тогда с чем-то выпью кофе;-) Спс!

Обновил статью: Юрий

Категории: jQuery

Добавить комментарий