1. Функция $(document).ready()
Для того, чтобы событие выполнилось на вашей странице, вы должны вызвать его из функции $(document).ready().
Первый способ
$(document).ready(function() { //document ready });
Более короткая запись
$(function(){ //document ready });
Каждая операция внутри $(document).ready() выполняется сразу после того, как страница закончит загружаться и перед тем как содержимое страницы будет показано.
2. Селекторы jQuery
- #id – выбирает единственный элемент с id.
$(function(){ $("#box").css("color", "green"); });
- .class – выбирает все элементы с определеным классом, например, класс .box.
$(function(){ $(".box").css("color", "green"); });
- elements – вы можете выбрать все элементы с выбранным именем. В нижеприведенном примере текст во всех элементах span перекрасится в зеленый цвет.
$(function(){ $("span").css("color", "green"); });
Такое же действие вы можете произвести для разных элементов, перечислив их через запятую или указав определенный класс.
$(function(){ $("span, p").css("color", "green"); $("h1.yellow, h2.yellow,").css("background", "#FFFF00"); });
3. Иерархические селекторы (parent and child)
- parent child – выбирает все элементы, являющиеся потомками child для определенного элемента родителя parent.
$(function(){ $("h1 a").css("text-decoration", "underline"); });
Все ссылки a, которые находятся в заголовке h1 будут подчеркнуты.
- parent > child – выбирает всех наследников родителя.
$(function(){ $("#main > * ").css("color", "#ccc"); });
Текст всех элементов исключительно в блоке #main будет серого цвета.
- prev + next – данный селектор сработает только для элементов, которые будут располагаться сразу же за указанным элементом.
$(function(){ $("label input").css("border", "1px solid #ccc"); });
В данном примере всем input, которые расположены за label добавится рамка серого цвета.
4. Селекторы форм.
Думаю, следующая часть селекторов может быть также часто используемой при создании сайтов.
:input – выбираются все элементы input.
:text – выбираются все элементы input типа text.
:password – выбираются все элементы input типа password.
:radio – выбираются все элементы input типа radio.
:checkbox – выбираются все элементы input типа checkbox.
:submit – выбираются все элементы input типа submit.
:reset – выбираются все элементы input типа reset.
:button – выбираются все элементы input типа button.
:image – выбираются все элементы input типа image.
:file – выбираются все элементы input типа file.
:hidden – выбираются все элементы input типа hidden или просто скрытые.
Продолжение следует…
