jQuery: Ядро
Справочники
jQuery: ЯдроНачинаю небольшой экскурс по функционалу популярного фреймворка jQuery. В этой статье я опишу само ядро jQuery, его аргументы, и как им пользоваться. Сам по себе jQuery - это Java-скрипт, который значительно облегчает работу с элементами DOM страницы и дает возможность свободно манипулировать ими. Написав всего пару строк вы получите такую функциональность, которую достигли бы десятью, а то и пятидесятью строками обычного JavaScript-кода. В дополнение, код, написанный с использованием jQuery, будет кроссплатформенным, и не будет зависеть от того, какой браузер установлен у пользователя.
Официальный сайт jQuery: http://jquery.com/. На момент написания статьи последняя версия jQuery находится тут: http://code.jquery.com/jquery-latest.min.js.
Для того, чтобы подключить jQuery к странице, нужно в теле HEAD прописать следующий код:
Лучший вариант - не переносить скрипт jQuery на свой хост, а использовать ссылку на официальный сайт. Так как jQuery - один из популярных фреймворков, и его используют многие сайты, то это гарантирует, что браузер его закеширует. В случае, если пользователь уже был на странице, где используется jQuery с официального сайта, переходя на ваш сайт jQuery уже не будет подтягиваться, а будет взят из кеша. Если же вы перенесете фреймворк к себе на хост, то jQuery будет загружен снова.
А теперь пройдемся по функционалу ядра jQuery. Для обращения к его функциям могут использоваться 2 варианта:
- ключевое слово jQuery
- ключевой символ $
Оба этих обращения идентичны. Символ $ удобен для краткости, а ключевое слово jQuery нужно в случае, если символ $ уже используется другой функцией.
function jQuery( selector, [ context ] ): jQuery
Осуществляет поиск элементов, соответствующих CSS-селектору selector внутри элемента context.
- selector: string - CSS селектор для выбора элементов.
- context: object || jQuery - необязательный параметр. Содержит элемент, в котором нужно осуществлять поиск. Если не указано, происходит поиск по всему документу.
Пример: поиск всех дочерних элементов P относительно элемента DIV во всем документе, и добавление им CSS-стиля.
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div > p').css('color','#ff0000');
});
</script>
</head>
<body>
<p>Один
<div><p>Два</div>
<p>Три
</body>
</html>
Пример: поиск всех текстовых элементов INPUT в первой форме, и установка им значения "OK".
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input:text',document.forms[0]).val('OK');
});
</script>
</head>
<body>
<form action="/do1.php" id="form1">
<input type="text" value="">
<input type="text" value="1">
<input type="checkbox" value="checkbox">
</form>
<form action="/do2.php" id="form2">
<input type="text" value="">
<input type="text" value="2">
<input type="radio" value="radio">
</form>
</body>
</html>
function jQuery( HTML, [ Document ] ): jQuery
На лету создает DOM-элементы страницы из HTML строки и преобразует их в тип jQuery.
- HTML: string - HTML строка с создаваемыми элементами. Не может содержать DOM-элементы: HTML, HEAD, BODY, TITLE, META, элементы заголовка.
- Document: Document - необязательный параметр. Содержит документ, в котором будут созданы DOM-элементы.
Пример: добавляет параграф P с содержимым в конец елемента DIV.
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('<p>Элементы <b>DOM</b></p>').appendTo('div');
});
</script>
</head>
<body>
<div>Содержание:</div>
</body>
</html>
function jQuery( element ): jQuery
Получает елемент или элементы DOM и преобразует их в jQuery массив для последующей манипуляции ими.
- element: object || jQuery - элемент DOM, элементы DOM или jQuery объект, которым нужно манипулировать.
Пример: скрывает все найденные в документе элементы DIV.
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document.getElementsByTagName('div')).hide();
});
</script>
</head>
<body>
<div>Пункт 1</div>
<p>Пункт 2</p>
<div>Пункт 3</div>
</body>
</html>
Пример: скрывает все найденные в документе элементы P.
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$($('p')).hide();
});
</script>
</head>
<body>
<div>Пункт 1</div>
<p>Пункт 2</p>
<div>Пункт 3</div>
</body>
</html>
function jQuery( callback ): jQuery
Является сокращенным аналогом от $(document).ready(). То есть функция callback выполняется только по окнчании загрузки всех DOM элементов документа.
- callback: function - функция, которая будет выполнена только после полной загрузки DOM элементов документа браузером.
Пример: выводит окно с сообщением после загрузки DOM-елементов документа.
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
alert('Страница загружена!');
});
</script>
</head>
<body>
Пример.
</body>
</html>
На этом первая часть статьи окончена. Удачи в свершениях!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
jQuery: Ядро
Справочники
Скрипты, инструкции, справочники
Для работы понадобится jQuery.
| Категория: | Справочники |
| Просмотрено: | 7601 |
| Рейтинг: | 5.0/4 |
| Дата добавления: | 2010-10-12 08:29, Вторник |
| Добавил: | Szen |
| Теги: | jQuery справка |
Рекомендуем
Дополнительно к jQuery: Ядро
Мини-форум
| № 0 | 2010-10-12 08:29 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "jQuery: Ядро". |
| Гость |
