Главная » Доска объявлений (11) |
Core (ядро) [11] | Selectors (селекторы) [0] |
Attributes (атрибуты) [0] | Manipulation (манипуляции) [0] |
Traversing (пересечения) [0] | Events [0] |
CSS [0] | Utilities [0] |
Effects [0] | Ajax [0] |
Удаляет данные с соответствующим именем из элемента
$("#example_data").data("geo", { region: 56, city: "Оренбург" });$("#example_insertData").click(function(){$("#example_data span:first").text($("#example_data").data("geo").region);
$("#example_data span:last").text($("#example_data").data("geo").city); });
$("#example_removeData").click(function(){
$("#example_data").removeData("geo"); $("#example_data span").empty(); });
Первая строка - сохраняем данные в элемент #example_data.
Вторая - пятая строки - По клику на #example_insertData вставляем данные в соответствующие элементы span
Шестая - девятая строки :
строка 7 - удаляем данные с именем geo из элемента #example_data
строка 8 - Очищаем содержание тегов span, чтобы мы могли визуально видеть, что данные удалены.
После того, как Вы нажали кнопку "Удалить данные", попробуйте их вставить. Вставки не произойдет, значит данные действительно удалены.
<div id="example_data">
<p>Регион: <span></span></p>
<p>Город: <span></span></p>
</div>
<button id="example_insertData">Вставить данные</button>
<button id="example_removeData">Удалить данные</button>
Сохраняет данные в элементе под определенным именем.
$(document).ready(function() {$("#example_data").data("geo", { region: 56, city: "Оренбург" });
$("#example_data span:first").text($("#example_data").data("geo").region);
$("#example_data span:last").text($("#example_data").data("geo").city);
});
Первая строка - сохраняем данные в элемент #example_data. Данные сохраняем под именем geo. В этом примере geo - маcсив, в region заносим значение 56, в city - "Оренбург". Как видно значения могут иметь любой формат.
Вторая строка - В первый spanвставляем текст, который содержит данные, полученные из элемена #example_data.
Третья строка - В последний spanвставляем текст, который содержит данные, полученные из элемена #example_data.
<div id="example_data">
<p>Регион: <span></span></p>
<p>Город: <span></span></p>
</div>
Получает данные "хранящиеся" в элементе под соответствующим именем.
$(document).ready(function() {
$("#example_data").data("city", "Оренбург");
$("#example_data span").text($("#example_data").data("city"));
});
Вторая строка - сохраняем данные в элемент #example_data под именем "city" со значением "Оренбург"
Третья строка - Получаем city из элемента #example_data и вставляем в виде текста в элемент span.
<div id="example_data">
<p>Город: <span></span></p>
</div>
Подсчитывает количество элементов.
В примере подсчитываем количество div-ов. В отличии от size()работает побыстрее
var kol_vo_div = $('div').length;
alert ("Здесь " + kol_vo_div + " div-ов");
Посмотрите пример в действии и его исходный код
Предоставляет получить доступ к единственному элементу DOM по его индексу и работать с ним напрямую, без использования jQuery. Функция $(this).get(0) эквивалентна использованию квадратных скобок при работе над самим объектом jQuery, например $(this)[0].
В примере возвращаем имя тега, по которому кликнули:
$(document).ready(function() {
$("*", document.body).click(function (element) {
// полчаем все элементы документа, котор. находятся
// между <body></body>
element.stopPropagation();
//Предотвращает распространение события на другие объекты
var domEl = $(this).get(0);
$("#example_data span:first").text("вы кликнули на - " + domEl.tagName);
});
});
<p><em>Кликайте на любой элемент страницы</em></p>
<div id="example_data">
<p>параграф</p>
<h4>Заголовок h4</h4>
<span></span>
</div>
Предоставляет доступ ко всем выбранным элементам DOM. Этим целесообразно пользоваться, когда Вам необходимо работать над самими элементами DOM вместо использования встроенных функций jQuery.
Пример: Выбираем все элементы #example_data div в документе, полученный набор элементов (массив) вытягиваем в строку и переворачиваем ее c помощью стандартного метода reverse в javascript:
$(document).ready(function() {
function reverse_func(element) {
var arr = []; // создаем пустой массив
for (var i = 0; i < element.length; i++) {
// запускаем цикл, где будем проходить по индексам // элементов от 0 до element.length. В нашем примере // element.length подсчитывает количество выбранных элементов
arr.push(element[i].innerHTML);
// получаем содержание элемента[индекс] // и добавляет полученную запись в конец массива
}
$("#example_data span").text(arr.join( ));
// вытягиваем массив в строку
}
reverse_func($("#example_data div").get().reverse() );// Запускаем написанную функцию. Результат работы будет строка,
// которую ф-ей reverse перевернем
});
Прим.: методы и свойства join, reverse, innerHTML, length являются стандартными в js.
<div id="example_data">
<div>див 1</div>
<div>див 2</div>
<div>див 3</div>
Перевернуто - <span></span>
</div>
Ищет элемент и возращает его индекс. Если ничего не найдено - вернет "-1" .
В примере по клику на элементы с классом .example1, индекс элемента заносим в переменную index2. Для наглядности простым alert-ом выводим получившиеся значение.
$(".example1").click(function(){var index2 = $(".example1").index(this);alert("индекс дива " + index2)});
Посмотрите пример в действии и его исходный код
Позволяет обратиться к одному единственному элементу из набора , используя его индекс. Нумерация индексов начинается с нуля.
В примере оборачиваем внутреннее содержание (wrapInner) второго элемента (индекс=1) с классом .example тегом <h2>
$(".example1").eq(1).wrapInner("<h2></h2>");
Посмотрите пример в действии и его исходный код
"Обертывает" jQuery-функциональностью один или несколько элементов DOMа.
Рассмотрим на примере:
$(element).css("color", "red");
$(formo4ka.elements).hide();
Первая строка находит element (элемент с #element) и устанавливает для всего содержания красный цвет.
Вторая строка скрвыает элементы внутри формы. Заметьте, что элементы не относящиеся "напрямую" к форме (например теги р)скрываться не будут.
Подсчитывает количество элементов.
В примере подсчитываем количество div-ов.
var kol_vo_div = $('div').size();
alert ("Здесь " + kol_vo_div + " div-ов");
Посмотрите пример в действии и его исходный код