Shoora
5/3/2019 - 6:12 AM
study jquery
study jquery
JQuery
Методы
=====================
.on('click',function(){});// обработчик событий
.eq(0);// взятие элемента по индексу
.text("string") - вставляем текстовое содержимое в нужный элемент
.change() - обработчик на изменение состояния элеменна
Может быть вызван принудительно....
$(this).change(function(){}).change();
.append() - добавляет контент внутрь элемента-ов набора. Добавляемый контент будет следовать за
уже существующим подобен применению appendChild()
Свойства
=====================
.length - количество элементов в наборе
.hover() - аналогично в css
Приведение типов
=====================
String(...) - приведение к строке
Базовые фильтры
=======================
:even - выбор четных элементов (четные индексы, 0,2,4,6...)
:odd - выбор нечетных
:eq(index) - выбор из массива по эндексу
:gt(index) - выбор элементов индекс которых больше указанного в скобках (greate then)
:lt(index) - все элементы индекс которых мешьше указанного (less then)
:first - первое совпадение
:last - последнее совпадение
:first-child - первый дочерний элемент набора
:last-child - последний дочерний элемент набора
:only-child - выбор элемента содержащего только один дочерний элемент
:nth-child(n) - выбор n-го дочернего элемента
:nth-child(even) - выбор всех четных дочерних элементов
:nth-child(odd) - выбор нечетных дочерних элементов
:nth-child(3n+1) - 3*n(где n это индекс, увеличивающийся на 1) 1,4,7,10,13...
:header - выбор всех заголовков на странице от h1 - h6 $(:header)...
:animated - выбор элементов в которых происходит анимация
Фильтры контента
============================
Позволяют ориентироваться на само содержимое элемента
:contains("text") - выбор элементов содержащих "text"
:empty - выбор всех элементов в кот. отсутствует содержимое
:has() - выбор элементов, которые содержат указанный в параметрах элемент :has(tag)
Дополнительные фильтры атрибутов
==================================
$("img[alt~='new']") - выбираем картинки с атрибутом включающем в себя слово new (должно быть разделено пробелами)
$("a[target!=_blank]") - исключаем ссылки с атрибутом
Фильтры форм
===================
:button - выбор всех кнопок на странице
:checkbox - выбор всех чекбоксов на странице
:checked - выбор отмеченных элементов чекбоксы или радиокнопки
:disabled - выбор неактивных в данный момент элементов
:enabled - выбор активных элементов
:file - выбор элементов формы с типом file (для прикрепления файла) <input type="file"> - позволит прикрепить файл
Работа с интервалами
======================
var timer = setInterval(choose, 1500); - функция choose будет запускаться каждые 1,5 сек.
Манипулирование атрибутами
==========================
attr() - возвращает или изменяет значение атрибутов у выбранных элементов страницы
если несколько атрибутов, вернет значение только первого
attr("class","Class1") - аналог addClass("Class1") - если классы уже есть не заменит а добавит
.attr({attr1:val1, attr2:val2}) - установит несколько атрибутов сразу для выбранных элементов (JSON объект)
Например:
$("div").attr(// JSON объект.. ключ -> знаение
{
style:"color:red; font-size:22pt",
title:"JQuery6 Attr Test"
}
);
.attr(attrname,function(index,value)) - будет присвоено значение возвращенное пользовательской функцией
если ничего не вернет, значение атрибута не будет установлено или изменено.
знаения будут присвоены для всех элементов в наборе index - позиция элемента в наборе
value - текущее значение
removeAttr() - просто удаляет указанный атрибут
Работа с классами
==================
addClass()
removeClass('nameClass') - удалит указанный класс из выбранного набора элементов
removeClass() - удалит все классы у выбранных элементов
removeClass("class1 class2 class3") - удалит указанные набор указанный классов
hasClass() - наличие класса у элемента возвращает true или false
Если проверяем группу элементов, то метод hasClass() вернет ответ только
по первому элементу набора
toggleClass() - добавляет или удаляет класс по принципу переключателя
toggleClass("class1, class2,...") - можно работать с группой классов
toggleClass("class1, class2...", switch); - только добавляет или только удаляет классы,
в зависимости от параметра switch, если switch = true : добавляет, если false удаляет
.prop() - возвращает или изменяет значение свойств выбранного элемента
var i = ... .prop("style"); считываем значение style элемента
.prop(свойство элемента, знаение свойства) - устанавливаем свойства
.prop( propName, function(index, value){}) - позиция элемента в наборе и значение свойства
var test = $('...').prop('checked'); - вернет true или false ?
removeProp() - удаляет свойства у выбранных элементов (не рекомендуется использовать к свойствам изначально
прописанным в коде, может вызвать ошибки работы браузера) Не рекомендуется использовать для свойств инпутов:
checked, disabled...
val() - позволяет получить или задать значение элемента - ов форм. Возвращает значение value
Если выбрано несколько элементов, то значение будет возвращено только первого
В случае элемента формы <select multiple="multiple"> - вернет массив всех выбранных элемментов
Работа со стилями
==========================
var w = $("div").css("width"); - получю строку со значением ..."330", например
Высота
=========
height() - высота выбранного элемента без учета внутренних отступов и толщины рамки
innerHeight() - высота элемента с учетом внутренних отступов (padding)
outerHeight() - высота с учетом внутренних отступов и рамки
outerHeight(true) - внутренние отступы, рамка и маржены все учитывается
height(400) - задаем высоту элемента (высота контента может быть в итоге меньше: учитываются пэддинги и маржины)
Ширина
=========
width() - возвращает ширину первого из выбранных элементов страницы без учета отступов и рамки
innerWidth() - с учетом внутренних отступов
outerWidth() - с учетом пэддингов и толщины рамки
outerWidth(true) - пэддинги, рамка и маржины включаются
width(400) - задает ширину элементу
Позиционирование
=================
Все элементы, к которым применяется метод offset() становятся автоматически position: relative !
Используя этот метод мы получаем позиционирование только первого элемента набора
offset() - возвращает координаты выбранного элемента относительно начала страницы. Можно изменять координаты элемента.
offset(value) - изменяем координаты элемента (value должно быть объектом с двумя свойствами {top:newTop, left:newLeft})
var element = $("div").offset(); получаем объект с двумя свойствами top, left
Теперь используя свойства полученного объекта, можно влиять на исходный элемент. (применяя начальные его значения element.left, element.top)
.position() - возвращает координаты выбранного элемента относительно ближайшего родителя, у которого задан тип позицианирования
relative, absolute или fixed
===========================================================================
Работа с деревом DOM : Фильтры
В виде методов использовать удобнее, чем в виде фильтров типа $('div:eq(0)') так как методы можно применять,
если набор элементов был присвоен переменной var varible = ... Varible.eq()...
.eq(index) - сокращает число совпавших элементов до одного, принимая в параметры позицию-индекс элемента в наборе
.not(selector) - удаляет элементы соответствующие выражению - параметру из набора..
$("div").not('.wrapper'); c классом wrapper отфильтруются..
$('li').not(':eq(2)') - будет исключен третий элемент из набора
.filter(function) - удаляет все элементы кот. Не удовлетворяют требованиям функции из набора.
Функция вызывается для каждого элемента набора. Если для энного элемента набора функция возвращает true,
мы выбираем этот элемент, если false, отфильтровываем. Эта функция получает доступ к элементу через $(this)
Через index функция будет получать порядковый номер обрабатываемого элемента
$("p").filter(function(index){
if($(this).attr("align") && index == 0_){ // Если содержит аттрибут align и является первым
return true;
}
}).css();...
nabor.filter(".test").css(); - отбираем с классом test
nabor.filter(":odd").css(); - отбираем только элементы с нечетным индексом
.is(selector) - Проверяет текущий набор эл-тов на соответствие выражению-параметру, возвращает true если
хотя бы один элемент соответствует.
.is(":first-child")
.is(".blue,.red")
.is(":contains('Test')")
.slice(index начального эл-та включительного , index - конечного эл-та не включительного)
- выделяет подмножество из набора совпавших элементов.
$("p").slice(0,3) - отберет с первого по третий параграф (не включительно, т.е 1 и 2)
$("p").slice(2,4) - начиная с элемента с индексом 2 до элемента с индексом 3 включительно
$("p").slice(3) - начиная с эл. С индексом 3 и до конца набора.
$("p").slice(3, -3) - начиная с эл инд 3 до третьего индекса с конца не включительно
============================
Перемещение по DOM дереву
.add(выражение) - добавляет в уже существующий набор доп.набор элементов, которые удовлетворяют указанному выражению.
.add("span") - добавляет к выборке набор span - ов
.find(выражение) - отыскивает дочерние эл.которые удовлетворяют указанному выражению. Ищет только дочерние элементы
"теги" в отличие от метода .contents()
$("p").find("span").css()... - находим все параграфы и ищем в них элементы span
.contents() - поиск всех дочерних узлов в наборе совпавших элементов (включая текстовые) или в содержимом документа,
если он является фреймом. Текстовые узлы: nodeType == 3
Превратим текстовые узлы внутри #content в параграфы
$("#content").contents().filter(function(){
return this.nodeType === 3;
}).wrap("<p></p>");
! Пробельный символ либо перенос строки считается как текстовый узел, поэтому
в вышеприведенном примере могут появится пустые параграфы
.children() - получает набор элементов, содержащий всех непосредственных уникальных потомков для каждого совпавшего элемента.
Без параметров вернет набор всех дочерних элементов.
.children("p") - вернет все дочерние параграфы
.sibling() - получает набор элементов, содержащий все уникальные родственные элементы для набора совпавших элементов,
которые находятся на одном уровне вложенности с текущим и имеют одного общего родителя
.andSelf() - Добавление предыдущего набора к текущему набору
.end() - отменяет последнее деструктивное действие.
.parent(выражение) - получает прямого родителя элемента
.parents(выражение) - получает набор элементов, сожержащий уникальных родителей для совпавших элементов
кроме корневого элемента.
.closest() - Получает набор, содержащий ближайшие родительские элементы, которые удовлетворяют указанному селектору,
включая начальный элемент.
.offsetParent() - Возвращает коллекцию Jquery с "родителем" по позиционированию первого совпавшего элемента.
Будет возвращен родитель со свойством position relative absolute fixed
.next() - Получает набор элементов, содержащий уникальные последующие родственные элементы для всех элементов
существующего набора.
.prev() - Получает набор элементов, содержащий уникальные предыдущие родственные элементы для всех элементов
существующего набора.
.nextAll() - Поиск всех родственных элементов после текущего элемента
.prevAll() - Поиск всех родственных эл.перед текущим.
.nextUntil( селектор ) - поиск всех родственных элементов после текущего элемента до указанного селектора
.prevUntil( селектор ) - поиск всех родственных элементов перед текущим элементом до указанного селектора
Урок 4, 40 мин.30 сек.