jQuery: Встроенные функции
Справочники
jQuery: Встроенные функцииПродолжим изучение фреймворка jQuery. В прошлом материале мы рассмотрели ядро jQuery. Сегодня рассмотрим функции, которые напрямую привязаны к ядру. При помощи ядра мы получали элементы DOM и преобразовывали их в тип jQuery. При помощи встроенных функций мы будем манипулировать полученными DOM-элементами.
Заранее оговоримся. При использовании jQuery существуют 2 типа элементов: jQuery и DOMObject. Первый - это тип, с которым будут работать описанные ниже функции. Второй - это стандартный тип, который используется при доступе к элементам документа в обычном JavaScript.
Будем рассматривать следующие составные элементы ядра jQuery:
- function .each( function([index], [Element]) ): jQuery
- function .size(): number
- properties .length: number
- properties .selector: string
- properties .context: object
- function .eq( index ): jQuery
- function .get(): array
- function .get( index ): object
- function .index( Element ): number
- function .data( key ): data
- function .data( key, data ): jQuery
- function .removeData( key ): jQuery
- function .queue( name ): array of functions
- function .queue( [name], callback( next ) ): jQuery
- function .queue( [name], queueArray ): jQuery
- function .dequeue( [name] ): jQuery
- function jQuery.fn.extend( object ): jQuery
- function jQuery.extend( object ): jQuery
- function jQuery.noConflict(): jQuery
- function jQuery.noConflict( extreme ): jQuery
function .each( function([index], [Element]) ): jQuery
Выполняет функцию, для каждого выбранного ядром элемента. Выполняемая в цикле функция может принимать 2 параметра: index и Element. Принудительное завершение цикла выполняется возвратом значения false. Если функция, выполняемая внутри цикла, вернет значение true, то выполнение функции остановится и итерация продолжится уже со следующего элемента.
- index: number - номер элемента, для которого выполняется функция. Нумерация начинается с 0. Индекс 0 принимает самый первый найденный элемент набора.
- Element: object || jQuery - элемент, для которого выполняется функция. Также, для получения элемента, для которого выполняется функция, можно использовать переменную this типа DOM-object.
Пример: для всех элементов DIV документа, если цвет текста элемента не зеленый, то скрипт меняет его на синий.
<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 документа меняет цвет текста на красный.
<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>
Пример: меняет фон каждой второй ячейки таблицы.
<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 в документе.
<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 в документе.
<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.
Пример: выводит список селекторов.
<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.
<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 в документе.
<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 через массив.
<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.
<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.
<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.
<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.
Пример: возвращает количество функций в очереди, которые ожидают своего выполнения в данный момент.
<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.
<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().
Пример: заменяет текущий набор функций выборки элементов новым набором.
<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.
Пример: создает пользовательскую функцию и удаляет ее, одновременно выполняя.
<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(), которые ставят галочки на всех элементах набора и снимают их.
<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.
<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 и передает управление переменной $ другим скриптам.
<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.
<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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
jQuery: Встроенные функции
Справочники
Скрипты, инструкции, справочники
Для работы понадобится jQuery.
| Категория: | Справочники |
| Просмотрено: | 13083 |
| Рейтинг: | 4.2/4 |
| Дата добавления: | 2010-10-13 08:02, Среда |
| Добавил: | Szen |
| Теги: | jQuery справка |
Рекомендуем
Дополнительно к jQuery: Встроенные функции
Мини-форум
| № 0 | 2010-10-13 08:02 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "jQuery: Встроенные функции". |
| Гость |
