Место для вас

Основы jQuery - селекторы, фильтры и работа с формами

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

Селекторы


$('#sidebar'); // все с id == sidebar 
$('.post'); // все с class == post 
$('div'); // все div 
$('div.post'); // все div с class == post 
$('div span'); // все span внутри div 
$('div').find('span'); // все span внутри div 
$('div > span'); // все span внутри div, span - прямой потомком div 
$('div, span'); // все div и span 
$('span + img'); // все img после span 
$('#banner').prev(); // элемент перед id == banner 
$('#banner').next(); // элемент после id == banner 
$('*'); // всё $('p > *'); // все потомки p 
$('p').children(); // все потомки p 
$('p').parent(); // все непосредственные предки p 
$('p').parents(); // все предки p 
$('p').parents('div'); // все предки p, которые div 
$('p').next(); // следующий за p

 Фильтры 


$('div:first'); // первый div 
$('div:last'); // последний div 
$('div:not(.post)'); // div у которых нет класса post 
$('div:even'); // четные div 
$('div:odd'); // нечетные div 
$('div:eq(3)'); // div, 3-й по счету (индекс == 3) 
$('div:gt(3)'); // div с индексом > 3 
$('div:lt(3)'); // div с индексом < 3 
$(':header'); // все заголовки h1, h2, h3 и т.д. 
$('div:contains("Copyright")'); // div содержащие текст "Copyright" 
$('div:empty'); // пустые div 
$('div:has(p)'); // div содержащие p 
$('div').filter('.post') // div содержащие класс post 
$('div:hidden'); // скрытые div 
$('div:visible'); // видимые div 
$("div[class]"); // все div с атрибутом class 
$("div[title = 'title']"); // все div с атрибутом title == "title" 
$("div[title != 'title']"); // все div с атрибутом title не равным "title" 
$("div[title ^= 'ti']"); // все div с атрибутом title начинающимся с "ti" 
$("div[title $= 'le']"); // все div с атрибутом title заканчивающимся на "le" заканчивающимся на "le" 
$("div[title *= 'itl'"); // все div с атрибутом title содержащим "itl"

Работа с формами


$(":text"); // все input с типом == text 
$(":radio"); // все input с типом == radio 
$("input:enabled"); // все включенные элементы input 
$("input:checked"); // все отмеченные чекбоксы 
$("div[title = 'title']:visible:has(p)"); // div с атрибутом title == "title", видимый, содержащий теги p 
$("form select option:selected"); // выбранные элементы select 
$("form :radio[name=some]:checked").val(); // получение выбранного значения радиобатона с именем some 
$("form :checkbox:checked"); // выбор всех выбранных чекбоксов

Место для вас

Добавить коментарий

кликните на картинку,
чтоб обновить код

Что за сайт

Этот сайт представляет унифицированную базу, где инфа собрана в единое целое, а не разбросанна по многочисленным сайтам, записям на листах бумаги или головам людей; а так же доступна круглосуточно не зависимо от кого-либо или чего-либо.

Будь в курсе

Интересненько

Вверх