Jquery Selectors
❮ Назад Дальше ❯
| Селектор | Примере | Выбирает |
|---|---|---|
| * | $(«*») | Все элементы |
| #id | $(«#lastname») | Элемент с |
| .class | $(«.intro») | Все элементы с |
| .class,.class | $(«.intro,.demo») | Все элементы с классом «intro» или «demo» |
| element | $(«p») | Все элементы < p > |
| el1,el2,el3 | $(«h2,div,p») | Все элементы < h2 >, < div > и < p > |
| :first | $(«p:first») | Первый элемент < p > |
| :last | $(«p:last») | Последний элемент < p > |
| :even | $(«tr:even») | Все элементы, даже < TR > |
| :odd | $(«tr:odd») | Все нечетные < TR > элементы |
| :first-child | $(«p:first-child») | Все элементы < p >, являющиеся первыми дочерними элементами родительского элемента |
| :first-of-type | $(«p:first-of-type») | Все < p > элементы, являющиеся первыми элементами < p > родительского элемента |
| :last-child | $(«p:last-child») | Все элементы < p >, являющиеся последним дочерним элементом родительского элемента |
| :last-of-type | $(«p:last-of-type») | Все элементы < p >, являющиеся последним элементом < p > родительского элемента |
| :nth-child(n) | $(«p:nth-child(2)») | Все < p > элементы, являющиеся вторым дочерним элементом родительского элемента |
| :nth-last-child(n) | $(«p:nth-last-child(2)») | Все < p > элементы, являющиеся вторым дочерним элементом родительского элемента, считая от последнего дочернего элемента |
| :nth-of-type(n) | $(«p:nth-of-type(2)») | Все < p > элементы, являющиеся вторым < p > элементом родительского элемента |
| :nth-last-of-type(n) | $(«p:nth-last-of-type(2)») | Все < p > элементы, являющиеся вторым < p > элементом родительского элемента, считая от последнего дочернего объекта |
| :only-child | $(«p:only-child») | Все элементы < p >, являющиеся единственным дочерним элементом родительского элемента |
| :only-of-type | $(«p:only-of-type») | Все элементы < p >, являющиеся единственными дочерними элементами своего типа родительского объекта |
| parent > child | $(«div > p») | Все элементы < p >, являющиеся прямым дочерним элементом элемента < div > |
| parent descendant | $(«div p») | Все элементы < p >, являющиеся потомками элемента < div > |
| element + next | $(«div + p») | Элемент < p >, который находится рядом с каждым элементом < div > |
| element ~ siblings | $(«div ~ p») | Все элементы < p >, являющиеся братьями и сестрами элемента < div > |
| :eq(index) | $(«ul li:eq(3)») | Четвертый элемент в списке (индекс начинается с 0) |
| :gt(no) | $(«ul li:gt(3)») | Элементы списка с индексом больше 3 |
| :lt(no) | $(«ul li:lt(3)») | Элементы списка с индексом менее 3 |
| :not(selector) | $(«input:not(:empty)») | Все входные элементы, которые не являются пустыми |
| :header | $(«:header») | Все элементы заголовка < h2 >, < h3 >. .. |
| :animated | $(«:animated») | Все анимированные элементы |
| :focus | $(«:focus») | Элемент, который в данный момент имеет фокус |
| :contains(text) | $(«:contains(‘Hello’)») | Все элементы, содержащие текст «Hello» |
| :has(selector) | $(«div:has(p)») | Все элементы < div >, имеющие элемент < p > |
| :empty | $(«:empty») | Все пустые элементы |
| :parent | $(«:parent») | Все элементы, являющиеся родительскими для другого элемента |
| :hidden | $(«p:hidden») | Все скрытые < p > элементы |
| :visible | $(«table:visible») | Все видимые таблицы |
| :root | $(«:root») | Корневой элемент документа |
| :lang(language) | $(«p:lang(de)») | Все < p > элементы со значением атрибута lang, начинающимся с «de» |
| [attribute] | $(«[href]») | Все элементы с атрибутом href |
| [attribute=value] | $(«[href=’default. =’Tom’]») | Все элементы со значением атрибута Title, начинающимся с «Tom» |
| [attribute~=value] | $(«[title~=’hello’]») | Все элементы со значением атрибута Title, содержащим определенное слово «hello» |
| [attribute*=value] | $(«[title*=’hello’]») | Все элементы со значением атрибута Title, содержащим слово «hello» |
| :input | $(«:input») | Все входные элементы |
| :text | $(«:text») | Все входные элементы с type=»text» |
| :password | $(«:password») | Все входные элементы с type=»password» |
| :radio | $(«:radio») | Все входные элементы с type=»radio» |
| :checkbox | $(«:checkbox») | Все входные элементы с type=»checkbox» |
| :submit | $(«:submit») | Все входные элементы с type=»submit» |
| :reset | $(«:reset») | Все входные элементы с type=»reset» |
| :button | $(«:button») | Все входные элементы с type=»button» |
| :image | $(«:image») | Все входные элементы с type=»image» |
| :file | $(«:file») | Все входные элементы с type=»file» |
| :enabled | $(«:enabled») | Все включенные входные элементы |
| :disabled | $(«:disabled») | Все отключенные входные элементы |
| :selected | $(«:selected») | Все выбранные входные элементы |
| :checked | $(«:checked») | Все проверенные входные элементы |
❮ Назад Дальше ❯
1.
Начало работы с jQuery: действие веб-страницыГлава 1. Начало работы с jQuery: действие веб-страницы
Вы хотите большего для своих веб-страниц. У вас есть HTML и CSS за плечами, и вы хотите добавить скрипты в свой набор навыков, но вы не хотите тратить свою жизнь на написание строк и строк сценария. Вам нужна библиотека сценариев, позволяющая изменять веб-страницы на лету. И раз уж мы хотим, может ли он хорошо работать с AJAX и PHP? Может ли он в 3 строки кода сделать то, что большинство клиентских языков делают в 15? Желаемое? Ни за что! Вам нужно познакомиться с jQuery.
Вам нужна мощная веб-страница
Вы уже знаете, как создавать великолепные веб-страницы с помощью чистых, действительных HTML и CSS. Но статические веб-страницы уже не подходят — людям нужна адаптивная веб-страница. Им нужны действия, анимация, взаимодействие и множество крутых эффектов.
HTML и CSS хороши, но…
Старый добрый HTML и CSS хороши для придания вашей странице структуры и стиля.
Если у вас есть визуализированная HTML-страница, она есть, но это статический .
Что делать, если вы хотите изменить внешний вид страницы, добавить или удалить что-то с нее? Вам либо нужно проделать какую-нибудь безумную CSS-гимнастику, либо просто загрузить новую страницу. И это может стать уродливым быстро. Почему? Потому что все, что вы на самом деле делаете с HTML и CSS, — это контролируете, как отображается страница.
Браузер запрашивает веб-страницу с сервера, когда кто-то вводит веб-адрес в адресную строку браузера.
Сервер находит запрошенные файлы и отправляет их в браузер.
Браузер отображает обработанную HTML-страницу на основе файла, отправленного с сервера.
…нужна сила скрипта
Чтобы изменить веб-страницы на лету , без перезагрузки, вам нужно поговорить с вашим браузером. Как вам это удается? С тегом HTML, известным как Начать бесплатную пробную версию Содержание Вы только что начали работать над интересным проектом. Вайрфреймы и макеты готовы, и у вас также есть представление об общей функциональности. Вы решили включить в этот проект динамические элементы с помощью jQuery. Допустим, этот элемент будет простым слайдером изображений с элементами управления — стрелками влево и вправо — чтобы посетители могли переключаться между изображениями по своему желанию. У вас есть два варианта. Во-первых, используйте какой-нибудь плагин, который соответствует вашим потребностям. Во-вторых, создайте необходимый код самостоятельно. Прежде чем мы начнем, я хочу отметить, что выбор второго пути почти всегда мудрее. Если у вас нет необходимых навыков, это может быть даже лучше. Этот путь заставит вас использовать два самых важных условия для обучения — концентрацию и практику. Используя эти два условия, вы сможете научиться чему угодно в любое время. В любом случае, вернемся к туториалу... Мы собираемся два внешних актива. Сначала будет таблица стилей CSS, которая называется normalize. Эта таблица стилей позаботится об унификации визуальной стороны всех элементов в браузерах. Во-вторых, потрясающий шрифт. Нам нужно включить этот шрифт, потому что мы собираемся использовать две иконки для элементов управления в слайдере — левый и правый угол (стрелка). Нормализация таблицы стилей: Отличный шрифт: Демонстрация Codepen: Сначала мы собираемся создать структуру с содержимым для слайдер. Весь слайдер будет заключен в div с классом «обертка». Внутри будут вложены три элемента — 9Тег 0402 i , ненумерованный список и еще один тег i . Первый тег и будет иметь следующие классы — «fa fa-angle-left js-control-left». Первый класс предназначен для соединения тега со шрифтом awesome, второй — для выбора конкретного значка, а последний класс — для jQuery. Список будет иметь класс «слайдер» и содержать три элемента списка с классом «слайд». Первый слайд также будет иметь класс «js-active». Для контента вы можете использовать любой контент, который вы хотите. Я выбрал разделение слайдов на две части через два теги div с классом «бит-2». Первая половина будет содержать два заголовка — h3 , Простой слайдер jQuery с элементами управления Pt1
Сегодня познакомимся со вторым. Активы
//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css
//cdnjs.cloudflare.com/ajax/libs/font-awesome /4.2.
0/css/font-awesome.min.css https://codepen.io/d3v3r0/pen/NPWKay
HTML
Вместо скучного lorem ipsum давайте использовать эсперанто. Вторая половина будет содержать изображение. Для этих изображений мы будем использовать элемент img . Не забудьте включить атрибут alt .
Второй тег i и последний HTML-элемент будут выглядеть так же, как и первый, за исключением того, что второй класс будет «fa-angle-right», а для jQuery — «js-control-right».
HTML:
<я> <ул><дел><дел> Никита
Специализация: очистка и обслуживание веб-браузера
Samtempe espereble kun at, eviti scivolema malantaŭa nun jh. Trioleto mezurunuo fratineto hop ut. Rilativo frazetvorto jo tre, mi des tiom mekao frazenkondukilo. Proto bedaŭrinde ed tet, oj finnlando daralbajdo dividostreko poa. Сен-градо-франхо-фи.
Гермин
Специализация: Ускорение работы компьютера за счет устранения беспорядка
Ido intere neutrala infinitivo lo, aĥ tempismo malantaŭa nv.
Sen u tiuj ablativa, kuo ti povi movi alternativdemando, mis pluaripti indikativo nu. Vo gibi simil suplemento poe, cento sekse pre ul. Hoj dato negi do, nj ism dura liva.
75em , а для h3 1.25em . Контроллеры (углы) будут иметь размер шрифта , установленный на 4em . Эти значения основаны на наблюдениях, за ними нет никакой системы.
обертка {
маржа: авто;
ширина: 700 пикселей;
}
.бит-2 {
отображение: встроенный блок;
ширина: 49%;
вертикальное выравнивание: сверху;
} 
25s;
}
.fa:hover {цвет: #0086b3; }
.fa-угол-левый {
поле-справа: .5em;
поле слева: .25em;
}
.fa-угол-вправо {
поплавок: справа;
поле-справа: .25em;
} 