Доска объявлений
| Главная » Доска объявлений » Core (ядро) |
| jQuery [5] | Number [3] |
| Array<Element> [1] | Element [1] |
| Object [1] | Boolean [0] |
| String [0] |
| В разделе объявлений: 11 Показано объявлений: 1-11 |
removeData(name)
Категория: jQuery
Удаляет данные с соответствующим именем из элемента
$("#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, чтобы мы могли визуально видеть, что данные удалены.
После того, как Вы нажали кнопку "Удалить данные", попробуйте их вставить. Вставки не произойдет, значит данные действительно удалены.
HTML:
<div id="example_data">
<p>Регион: <span></span></p>
<p>Город: <span></span></p>
</div>
<button id="example_insertData">Вставить данные</button>
<button id="example_removeData">Удалить данные</button>
data(name, value)
Категория: jQuery
data(name, value)
Сохраняет данные в элементе под определенным именем.
$(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.
HTML:
<div id="example_data">
<p>Регион: <span></span></p>
<p>Город: <span></span></p>
</div>data(name)
Категория: Object
data(name)
Получает данные "хранящиеся" в элементе под соответствующим именем.
$(document).ready(function() {
$("#example_data").data("city", "Оренбург");
$("#example_data span").text($("#example_data").data("city"));
});Вторая строка - сохраняем данные в элемент #example_data под именем "city" со значением "Оренбург"
Третья строка - Получаем city из элемента #example_data и вставляем в виде текста в элемент span.
HTML:
<div id="example_data">
<p>Город: <span></span></p>
</div>length
Категория: Number
length
Подсчитывает количество элементов.
В примере подсчитываем количество div-ов. В отличии от size()работает побыстрее
var kol_vo_div = $('div').length;
alert ("Здесь " + kol_vo_div + " div-ов"); get(index)
Категория: Element
get(index)
Предоставляет получить доступ к единственному элементу 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);
});
});HTML:
<p><em>Кликайте на любой элемент страницы</em></p>
<div id="example_data">
<p>параграф</p>
<h4>Заголовок h4</h4>
<span></span>
</div>get()
Категория: Array<Element>
get()
Предоставляет доступ ко всем выбранным элементам 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.
HTML:
<div id="example_data">
<div>див 1</div>
<div>див 2</div>
<div>див 3</div>
Перевернуто - <span></span>
</div>index(element)
Категория: Number
index(subject)
Ищет элемент и возращает его индекс. Если ничего не найдено - вернет "-1" .
В примере по клику на элементы с классом .example1, индекс элемента заносим в переменную index2. Для наглядности простым alert-ом выводим получившиеся значение.
$(".example1").click(function(){var index2 = $(".example1").index(this);alert("индекс дива " + index2)}); eq(index)
Категория: jQuery
eq(position)
Позволяет обратиться к одному единственному элементу из набора , используя его индекс. Нумерация индексов начинается с нуля.
В примере оборачиваем внутреннее содержание (wrapInner) второго элемента (индекс=1) с классом .example тегом <h2>
$(".example1").eq(1).wrapInner("<h2></h2>"); $(elems)
Категория: jQuery
$(elems)
"Обертывает" jQuery-функциональностью один или несколько элементов DOMа.
Рассмотрим на примере:
$(element).css("color", "red");
$(formo4ka.elements).hide();Первая строка находит element (элемент с #element) и устанавливает для всего содержания красный цвет.
Вторая строка скрвыает элементы внутри формы. Заметьте, что элементы не относящиеся "напрямую" к форме (например теги р)скрываться не будут.
size()
Категория: Number
size()
Подсчитывает количество элементов.
В примере подсчитываем количество div-ов.
var kol_vo_div = $('div').size();
alert ("Здесь " + kol_vo_div + " div-ов"); $(expr, [context])
Категория: jQuery
jQuery Function
$(expr, [context])
Здесь expr - строка, выражение для поиска; context(необязательный параметр) - элемент DOM, документ, либо jQuery употребляемый в контексте
В примере находим все теги p, являющиеся дочерними по отношению к div:
$("div > p").css("color", "red"); Посмотрите пример в действии и его исходный код
Теперь рассмотрим пример с импользованием параметра context:
$("input", document.forms[1]).css("border", "2px solid red"); Здесь находим элементы input и, с помощью контекстного выражения, говорим что искать надо во второй форме (индекс 1 соответствуем второй форме на странице), найденным элементам добавляем красную рамку.
Еще один пример с импользованием параметра context:
$("input", form3).css("border", "2px solid blue"); Здесь находим элементы input и, с помощью контекстного выражения, говорим что искать надо в форме, которая имеет id=forms3, найденным элементам добавляем синюю рамку. Обратите внимание, что идентификатор forms3в контексте пишется без кавычек и знака "#".
Сайт оптимизтрован для просмотра в брузерах:Firefox & Opera при разрешении экрана 1280x1024 пикселя.
