jQuery – простые примеры взаимодействия с DOM
- By Юрий
- 10 July, 2013
- No Comments
- Просмотр: 6561
Добрый день уважаемые читатели блога 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. Если вам понравилась статья то вы можете просмотреть рекламму, а я хоть тогда с чем-то выпью кофе;-) Спс!
Обновил статью: Юрий
Leave a Reply