jQuery: Встроенные функции

Справочники

Рисунок jQuery: Встроенные функции
jQuery: Встроенные функции jQuery: Встроенные функции
оценка: 4.2 из 5
оценок: 4

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

Заранее оговоримся. При использовании jQuery существуют 2 типа элементов: jQuery и DOMObject. Первый - это тип, с которым будут работать описанные ниже функции. Второй - это стандартный тип, который используется при доступе к элементам документа в обычном JavaScript.

Будем рассматривать следующие составные элементы ядра jQuery:

К содержанию.

function .each( function([index], [Element]) ): jQuery

Выполняет функцию, для каждого выбранного ядром элемента. Выполняемая в цикле функция может принимать 2 параметра: index и Element. Принудительное завершение цикла выполняется возвратом значения false. Если функция, выполняемая внутри цикла, вернет значение true, то выполнение функции остановится и итерация продолжится уже со следующего элемента.

  • index: number - номер элемента, для которого выполняется функция. Нумерация начинается с 0. Индекс 0 принимает самый первый найденный элемент набора.
  • Element: object || jQuery - элемент, для которого выполняется функция. Также, для получения элемента, для которого выполняется функция, можно использовать переменную this типа DOM-object.

Пример: для всех элементов DIV документа, если цвет текста элемента не зеленый, то скрипт меняет его на синий.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('div').each(function(){
          if(this.style.color!='green') this.style.color = 'blue';
        });
      });
    </script>
  </head>
  <body>
    <div style="color:red;">item 1</div>
    <div style="color:green;">item 2</div>
    <div style="color:blue;">item 3</div>
    <div style="color:white;">item 4</div>
    <div style="color:red;">item 5</div>
  </body>
</html>

Пример: для каждого третьего элемента DIV документа меняет цвет текста на красный.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('div').each(function(i){
          if((i+1) % 3==0) $(this).css('color','red');
        });
      });
    </script>
  </head>
  <body>
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div>item 5</div>
    <div>item 6</div>
  </body>
</html>

Пример: меняет фон каждой второй ячейки таблицы.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('table td').each(function(i,el){
          if((i+1) % 2==0) $(el).css('background-color','red');
        });
      });
    </script>
  </head>
  <body>
    <table width="200" border="1">
      <tr><td>cell 1|1</td><td>cell 1|2</td><td>cell 1|3</td></tr>
      <tr><td>cell 2|1</td><td>cell 2|2</td><td>cell 2|3</td></tr>
      <tr><td>cell 3|1</td><td>cell 3|2</td><td>cell 3|3</td></tr>
    </table>
  </body>
</html>

К содержанию.

function .size(): number

Возвращает количество элементов набора jQuery. Аналог свойства length, но работает медленее. Лучше пользоваться свойством length.

Пример: показывает в сообщении количество элементов SPAN с классом SEL в документе.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        alert($('span.sel').size());
      });
    </script>
  </head>
  <body>
    <span class="sel">span.sel</span>,
    <div class="sel">div.sel</div>,
    <span>span</span>,
    <span class="sel">span.sel</span>
  </body>
</html>

К содержанию.

properties .length: number

Возвращает количество элементов набора jQuery. Более быстрый аналог функции size().

Пример: показывает в сообщении количество элементов DIV в документе.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        alert($('div').length);
      });
    </script>
  </head>
  <body>
    <span class="sel">span.sel</span>,
    <div class="sel">div.sel</div>,
    <div>div</div>,
    <span class="sel">span.sel</span>
  </body>
</html>

К содержанию.

properties .selector: string

Это свойство возвращает исходное содержимое текущего селектора jQuery(). Используется, обычно, создателями дополнений jQuery.

Пример: выводит список селекторов.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('ul')
          .append('<li>' + $('ul').selector + '</li>')
          .append('<li>' + $('ul li').selector + '</li>')
          .append('<li>' + $('div#foo ul:not([class])').selector + '</li>');
      });
    </script>
  </head>
  <body>
    Селекторы: <ul></ul>
  </body>
</html>

К содержанию.

properties .context: object

Это свойство возвращает исходный елемент DOM, переданный ранее в jQuery(). Если контекст не был задан, то свойство возвращает весь документ. Используется, обычно, создателями дополнений jQuery.

Пример: выводит список переданных в jQuery() контекстов: документа и имени элемента BODY.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('ul')
          .append('<li>' + $('ul').context + '</li>')
          .append('<li>' + $('ul', document.body).context.nodeName + '</li>');
      });
    </script>
  </head>
  <body>
    Контекст: <ul></ul>
  </body>
</html>

К содержанию.

function .eq( index ): jQuery

Эта функци получает элемент с индексом index из выборки элементов jQuery(). Нумерация элементов в выборке начинается с 0. Если элемент с индексом index отсутствует, то функция возвращает пустой объект jQuery.

  • index: number - номер элемента, который нужно получить.

Пример: меняет содержимое второго элемента P в документе.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('p').eq(1).html('Этот параграф поменялся!');
      });
    </script>
  </head>
  <body>
    <p>Параграф №1</p>
    <p>Параграф №2</p>
    <p>Параграф №3</p>
  </body>
</html>

К содержанию.

function .get(): array

Функция преобразует выборку элементов jQuery() в массив, который содержит эти элементы.

Пример: заменяет текст в элементах DIV через массив.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        arr=$('div').get();
        for(var i = 0; i < arr.length; i++){
          arr[i].innerHTML = 'item '+i;
        }
      });
    </script>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>

К содержанию.

function .get( index ): object

Возвращает элемент из выборки jQuery с индексом index. Результатом работы функции является обычный DOM-объект. Функция эквивалентна выражению jQuery()[index].

  • index: number - номер элемента выборки, который нужно получить.

Пример: меняет содержимое второго элемента DIV.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        obj=$('div').get(1);
        obj.innerHTML = 'Содержание изменено!';
      });
    </script>
  </head>
  <body>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </body>
</html>

К содержанию.

function .index( Element ): number

Возвращает индекс элемента Element внутри выборки jQuery(). В случае, если в функцию был передан jQuery объект, возвращает только номер первого элемента (то есть, 0). Нумерация элементов в выборке jQuery начинается с 0. Если элемент отсутствует в выборке, то функция возвращает -1.

  • Element: object | jQuery - элемент, индекс которого нужно получить из выборки jQuery().

Пример: меняет содержимое второго элемента DIV.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('div').click(function(){
          index=$('div').index(this)+1;
          $('span').html(index);
        });
      });
    </script>
  </head>
  <body>
    Был щелчок по DIV №<span></span>
    <div>DIV №1</div>
    <div>DIV №2</div>
    <div>DIV №3</div>
  </body>
</html>

К содержанию.

function .data( key ): data

Возвращает данные, которые хранятся в DOM-элементе с ключом key. Функция может вернуть любое значение: строковое, числовое, DOM-элемент, jQuery() объект. В случае, если в DOM-элементе нет сохраненных данных по ключу key, функция возвращает значение undefined.

  • key: string - ключ, по которому производится поиск данных в элементе.

К содержанию.

function .data( key, data ): jQuery

Сохраняет в элементе данные data с ключом key. Данные могут быть любого типа, включая jQuery(). Если объект jQuery() содержит более одного элемента выборки, то значение будет прописано в каждом из них. В случае, если функции передаются данные типа JavaScript, то это значаение будет разделено между всеми элементами выборки jQuery().

  • key: string - ключ, под которым будут сохранены данные в элемент.
  • data: data - Данные, которые нужно сохранить в элементе. Может иметь любой тип.

К содержанию.

function .removeData( key ): jQuery

Удаляет из элемента, или набора элементов, данные, ранее сохраненные с ключом key.

  • key: string - ключ данных, которые нужно удалить из элемента.

Пример: добавляет, получает и удаляет данные разного типа из элемента DIV.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('button').click(function(e) {
          var value;
          switch ($('button').index(this)) {
            case 0 :
              value = $('div').data('blah');
              break;
            case 1 :
              $('div').data('blah', 'Привет');
              value = 'Сохранено!';
              break;
            case 2 :
              $('div').data('blah', 86);
              value = 'Сохранено!';
              break;
            case 3 :
              $('div').data('blah', $('pre'));
              value = 'Сохранено!';
              break;
            case 4 :
              $('div').removeData('blah');
              value = 'Удалено!';
              break;
          }
          $('span').text(value);
        });
      });
    </script>
  </head>
  <body>
    <div>Элемент DIV</div>
    <pre>Элемент для сохранения как jQuery().</pre>
    <button>Получить ключ "blah" из DIV</button><br>
    <button>Установить ключу "blah" значение "Привет"</button><br>
    <button>Установить ключу "blah" значение 86</button><br>
    <button>Установить ключу "blah" значение jQuery()</button><br>
    <button>Удалить ключ "blah" из div</button><br>
    <p>Значение ключа "blah": <span>?</span></p>
  </body>
</html>

К содержанию.

function .queue( name ): array of functions

Возвращает массив очереди выполняемых функций набора элементов jQuery(). Под индексом массива 0 хранится функция, которая на данный момент стоит первая в очереди на выполнение.

  • name: string - необязательный параметр. Через нее передается имя функции в очереди. Значение по-умолчанию - fx.

Пример: возвращает количество функций в очереди, которые ожидают своего выполнения в данный момент.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('#show').click(function(){
          var n = $('div').queue('fx');
          $('span').text('Длинна очереди: ' + n.length);
        });
        function runIt(){
          $('div').show('slow');
          $('div').animate({left:'+=200'}, 2000);
          $('div').slideToggle(1000);
          $('div').slideToggle('fast');
          $('div').animate({left:'-=200'}, 1500);
          $('div').hide('slow');
          $('div').show(1200);
          $('div').slideUp('normal', runIt);
        }
        runIt();
      });
    </script>
    <style type="text/css">
      div {margin:3px; width:100px; height:100px; position:absolute; left:100px; top:100px; background:green; display:none;}
      span {color:red;}
    </style>
  </head>
  <body>
    <button id="show">Показать длинну очереди</button>
    <span></span>
    <div></div>
  </body>
</html>

К содержанию.

function .queue( [name], callback( next ) ): jQuery

Добавляет функцию callback() с аргументом next в конец очереди функций каждого набора элементов.

  • name: string - необязательный параметр. Через нее передается имя функции в очереди. Значение по-умолчанию - fx.
  • callback( next ): function - функция, которая должна быть добавлена в конец очереди.

Пример: добавляет функцию в конец очереди на выполнение набора элементов jQuery.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $(document.body).click(function(){
          $('div').show('slow');
          $('div').animate({left:'+=200'},2000);
          $('div').queue(function(){
            $(this).addClass('newcolor');
            $(this).dequeue();
          });
          $('div').animate({left:'-=200'},500);
          $('div').queue(function(){
            $(this).removeClass('newcolor');
            $(this).dequeue();
          });
          $('div').slideUp();
        });
      });
    </script>
    <style type="text/css">
      div {margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none;}
      div.newcolor {background:blue;}
    </style>
  </head>
  <body>
    Щелкни мышью здесь...
    <div></div>
  </body>
</html>

К содержанию.

function .queue( [name], queueArray ): jQuery

Заменяет текущую очередь функций набора элементов jQuery() новым набором функций queueArray.

  • name: string - необязательный параметр. Через нее передается имя функции в очереди. Значение по-умолчанию - fx.
  • queueArray: array of functions - массив функций, которым будет заменен текущий набор функци выборки элементов jQuery().

Пример: заменяет текущий набор функций выборки элементов новым набором.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('#start').click(function(){
          $('div').show('slow');
          $('div').animate({left:'+=200'},5000);
          $('div').queue(function(){
            $(this).addClass('newcolor');
            $(this).dequeue();
          });
          $('div').animate({left:'-=200'},1500);
          $('div').queue(function(){
            $(this).removeClass('newcolor');
            $(this).dequeue();
          });
          $('div').slideUp();
        });
        $('#stop').click(function(){
          $('div').queue('fx', []);
          $('div').stop();
        });
      });
    </script>
    <style type="text/css">
      div {margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none;}
      div.newcolor {background:blue;}
    </style>
  </head>
  <body>
    <button id="start">Старт</button>
    <button id="stop">Стоп</button>
    <div></div>
  </body>
</html>

К содержанию.

function .dequeue( [name] ): jQuery

Удаляет функцию, поставленную в очередь. При этом, удаляемая функция выполняется.

  • name: string - необязательный параметр. Через нее передается имя функции в очереди. Значение по-умолчанию - fx.

Пример: создает пользовательскую функцию и удаляет ее, одновременно выполняя.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('button').click(function(){
          $('div').animate({left:'+=200px'}, 2000);
          $('div').animate({top:'0px'}, 600);
          $('div').queue(function(){
            $(this).toggleClass('red');
            $(this).dequeue();
          });
          $('div').animate({left:'10px', top:'30px'}, 700);
        });
      });
    </script>
    <style type="text/css">
      div {margin:3px; width:50px; position:absolute; height:50px; left:10px; top:30px; background-color:yellow;}
      div.red {background-color:red;}
    </style>
  </head>
  <body>
    <button>Старт</button>
    <div></div>
  </body>
</html>

К содержанию.

function jQuery.fn.extend( object ): jQuery

Добавляет к jQuery набор элементов. Используется для добавления новых методов в jQuery. Функция пользуется успехом у писателей плагинов для jQuery.

  • object: object - объект, через котрый добавляется метод к jQuery().

Пример: добавляет метод check и uncheck для набора элементов jQuery(), которые ставят галочки на всех элементах набора и снимают их.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      jQuery.fn.extend({
        check: function(){
          return this.each(function(){ this.checked = true; });
        },
        uncheck: function(){
          return this.each(function(){ this.checked = false; });
        }
      });
      $(function(){
        $('#check').click(function(){
          $('input[type="checkbox"]').check();
        });
        $('#uncheck').click(function(){
          $('input[type="checkbox"]').uncheck();
        });
      });
    </script>
  </head>
  <body>
    <label><input type="checkbox"> Крыжек 1</label><br>
    <label><input type="checkbox"> Крыжек 2</label><br>
    <label><input type="checkbox"> Крыжек 3</label><br>
    <label><input type="checkbox"> Крыжек 4</label><br>
    <button id="check">Отметить</button>
    <button id="uncheck">Снять отметку</button>
  </body>
</html>

К содержанию.

function jQuery.extend( object ): jQuery

Расширяет возможности базового jQuery добавлением новых пользовательских функций. Функция добавляется непосредственно к jQuery, а не набору элементов. Используется, в основном, писателями плагинов к jQuery.

  • object: object - объект, через котрый добавляется функция к jQuery.

Пример: добавляет фукции min и max к базовому jQuery.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      jQuery.extend({
        min: function(a, b){ return a < b ? a : b; },
        max: function(a, b){ return a > b ? a : b; }
      });
      $(function(){
        $('#min').click(function(){
          $('span').text( $.min( $('#num1').val(), $('#num2').val() ) );
        });
        $('#max').click(function(){
          $('span').text( $.max( $('#num1').val(), $('#num2').val() ) );
        });
      });
    </script>
  </head>
  <body>
    <input type="text" id="num1" value="5">
    и <input type="text" id="num2" value="8">
    <p>Результат: <span>?</span>
    <p><button id="min">Минимальное</button>
    <button id="max">Максимальное</button>
  </body>
</html>

К содержанию.

function jQuery.noConflict(): jQuery

Используется для передачи контроля над переменной $ библиотеке, которая объявила ее раньше. Используется для предотвращения конфликтов с библиотеками, который тоже используют переменную $ для своих целей. После выполнения данной функции объект $() как jQuery работать не будет. Нужно будет пользоваться переменной jQuery().

Функцию нужно выполнять после подключения jQuery, но раньше библиотек, использующих символ $.

Пример: назначает объектам jQuery переменную jq и передает управление переменной $ другим скриптам.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      jq = jQuery.noConflict();
      jq(document).ready(function(){
        jq('button').click(function(){
          jq('p').hide();
        });
      });
    </script>
  </head>
  <body>
    <p>Этот текст скроется по нажатию на кнопку</p>
    <button>Скрыть</button>
  </body>
</html>

К содержанию.

function jQuery.noConflict( extreme ): jQuery

Возвращает контроль над переменными $ и jQuery их изначальным владельца. Использовать очень осторожно!!! После вызова этой функции jQuery работать не будет! Использовать только в очень конфликтных ситуациях.

  • extreme: boolean - установить значение true для отмены всех переменных jQuery.

Пример: отменяет все переменные jQuery и назначает основной переменной метод dom.jq.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      var dom = {};
      dom.jq = jQuery.noConflict( true );
      dom.jq(document).ready(function(){
        dom.jq('button').click(function(){
          dom.jq('p').hide();
        });
      });
    </script>
  </head>
  <body>
    <p>Этот текст скроется по нажатию на кнопку</p>
    <button>Скрыть</button>
  </body>
</html>

К содержанию.

Основные свойства и функции на этом закончились. В следующем материале мы рассмотрим селекторы, которые используются в jQuery.

Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




jQuery: Встроенные функции
Справочники
Скрипты, инструкции, справочники


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

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

Мини-форум

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

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

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



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