jQuery: Ядро

Справочники

x;z-index:1 }

jQuery: Ядро

оценка: 5.0 из 5

оценок: 4

Начинаю небольшой экскурс по функционалу популярного фреймворка jQuery. В этой статье я опишу само ядро jQuery, его аргументы, и как им пользоваться. Сам по себе jQuery - это Java-скрипт, который значительно облегчает работу с элементами DOM страницы и дает возможность свободно манипулировать ими. Написав всего пару строк вы получите такую функциональность, которую достигли бы десятью, а то и пятидесятью строками обычного JavaScript-кода. В дополнение, код, написанный с использованием jQuery, будет кроссплатформенным, и не будет зависеть от того, какой браузер установлен у пользователя.

Официальный сайт jQuery: http://jquery.com/. На момент написания статьи последняя версия jQuery находится тут: http://code.jquery.com/jquery-latest.min.js.

Для того, чтобы подключить jQuery к странице, нужно в теле HEAD прописать следующий код:

Code

Лучший вариант - не переносить скрипт 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-стиля.

Code

<html>
  <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".

Code

<html>
  <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.

Code

<html>
  <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.

Code

<html>
  <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.

Code

<html>
  <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-елементов документа.

Code

<html>
  <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.

Категория:	Справочники
Просмотрено:	7473
Рейтинг:	5.0/4
Дата добавления:	2010-10-12 08:29, Вторник
Добавил:	Szen
Теги:	jQuery справка

Опечатка

Дополнительно к jQuery: Ядро

Мини-форум

№ 0	2010-10-12 08:29
Szen	Здесь вы можете задать вопрос или оставить комментарий по теме "jQuery: Ядро".
	Цитата Гость