jQuery: Ядро

Справочники

Рисунок jQuery: Ядро
x;z-index:1 }
jQuery: Ядро 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
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

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


jQuery: Ядро
Справочники
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

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

Мини-форум

№ 02010-10-12 08:29
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "jQuery: Ядро".
Гость
Учавствовать в обсуждении "jQuery: Ядро" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Посетители
Зарегистрированных посетителей не было.
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Какой JavaScript фреймворк вы изпользуете?
Всего ответов: 180
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 1
Гостей: 1
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2024 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz