КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

Начинаем работу с jQuery

Подключаем библиотеку jquery

jQuery - это библиотека полезных функций, написанная на языке javascript. Она пракически незаменима для создания сайтов и очень проста в использовании. Главным козырем её является функция $ возвращающая обьекты jquery для дальнейшей работы с ними. Первым делом нужно скачать и, внимание, ПОДКЛЮЧИТЬ jQuery к нашему HTML или PHP файлу до всех остальных скриптов, указав правильный путь к ней. Чаще всего яваскрипт-файлы помещают в папку js в корне сайта, и тогда путь к ней выглядит следующим образом:
<script src="js/jquery-1.11.1.min.js"></script>
Желательно использовать последнюю версию библиотеки. Если используются устаревшие плагины, то можете и старыми версиями пользоваться, но у них могут быть крутые отличия, например метод toggle был изменён и больше не является событием (как, например, click), а метод live() вообще удалили.

Открываем консоль

Тут всё просто: жмём F12 и выбираем консоль. Это нам понадобится для просмотра ошибок

Делаем "обёртку" кода

Это так называемая конструкция DOM-Ready. Одна из наиболее популярных ошибок. Если ваш скрипт расположен/подключен в теге , то его нужно обязательно заключить в такой код:
$(document).ready(function(){
   // тут весь ваш код
});
// или сокращенная запись
$(function(){
   // тут весь ваш код
});
смысл этой конструкции в том, что скрипт срабатывает только тогда, когда уже построено дерево элементов страницы, иначе скрипт выполнится когда ему ещё не с чем будет работать (вхолостую). Интерпретатор кода выполняет код сверху вниз, вот сами и думайте, что получится.. Если же нам нужно чтобы код выполнился после полной загрузки страницы, его нужно обернуь в
$(window).on('load', function(){
// тут код
});
// или в яваскрипт аналогичный
window.onload = function(){
// здесь творим
}

Делаем jQuery-выборку элементов для дальнейшей работы

Выборка элементов здесь строится так же как и в CSS:
$('#moto_table tr:even'); - фильтр четных
$('#moto_table tr:odd'); - фильтр нечетных
$('img:not(#div_for_img img)'); - фильтр отрицания. Все кроме..
$('div:has(fieldset)'); - фильтр по содержанию тэгов
$('p:contains(мотоцикл)'); - фильтр по содержанию текста
$('#div_for_img img:first'); - фильтр - только первый элемент
$('#div_for_img img:last'); - фильтр - только последний элемент
$('div:hidden'); - фильтр невидимых
$('div:visibility'); - фильтр видимых элементов
$('img[src*=moto]'); - выборка по вхождению в значение атрибута
$('img[src$=.jpg]'); -  выборка по окончанию значения атрибута
$('a[href^=http]'); - выборка по началу значения атрибута
$('img[width=200]'); - выборка по точному значению атрибута
$('#div_for_img > img'); - выбор дочерних тэгов
$('#main_h1 + p'); - выборка следующего тэга.
$('#div_for_img img'); - выборка по вложенным селекторам.
$('.maindiv'); - выборка по названию класса.
$('#main_h1'); - выборка по идентификатору элемента.
$('p'); - выборка по названию тэга.

Создание выборок из элементов форм

:input - выберет все элементы, которые влияют на ввод данных в форме
:text  - поля ввода, которые созданы как <input type="text"..
:password - поля ввода, которые созданы как <input type="password"..
:radio - поля ввода, которые созданы как <input type="text"..
:checkbox - поля ввода, которые созданы как <input type="checkbox"..
:submit - поля ввода, которые созданы как <input type="submit"..
:image - поля ввода, которые созданы как <input type="image"..
:reset - поля ввода, которые созданы как <input type="reset"..
:button - поля ввода, которые созданы как <input type="button"..
:file - поля ввода, которые созданы как <input type="file"..
:hidden - поля ввода, которые созданы как <input type="hidden"..
:checked - отбирает отмеченные на данный момент поля checkbox и radio
:selected - отбирает выбранный в текущий момент элемент списка

События jQuery, отслеживаемые браузером

mouseover - наведение мыши на объект
mouseout - увод мыши с объекта
click - клик мышью по объекту
dblclick - двойной клик мышью по объекту
mousemove - перемещение курсора мыши
mousedown - момент нажатия кнопки мыши
mouseup - момент отпускания кнопки мыши
submit - момент отправки формы обработчику
focus - момент получения фокуса объектом (работает и для ссылок)
blur - момент потери фокуса объектом (работает и для ссылок)
change - изменение объекта формы
reset - сброс формы
keypress - нажатие клавиши на клавиатуре
keydown - момент нажатия клавиши, до момента отпускания
keyup - момент отпускания клавиши
load - полная загрузка страницы
resize - изменение размеров окна браузера
scroll - прокрутка страницы
unload - уход со страницы

Свойства:

pageX - координата по X от края браузера
pageY - координата по Y от края браузера
screenX - координата по X от края экрана
screenY - координата по Y от края экрана
altKey - была ли нажата клавиша alt в момент нуступления события
shiftKey - была ли нажата клавиша shift в момент нуступления события
ctrlKey - была ли нажата клавиша ctrl в момент нуступления события
target - объект, отреагировавший на событие

Методы jQuery

Метод remove() - удаляет элемент из DOM дерева, 
но позволяет сохранить его для дальнейшего использования.
Метод clone() - клонирует выбранный элемент.
Метод get() - позволяет получить доступ к конкретному 
элементу в выборке.
Метод size() - возвращает кол-во элементов в выборке.
Метод each() - перебор каждого элемента выборки. 
$(this) - текущий элемент при переборе.
Метод append() - - Добавляем контент внутрь выбранного
 элемента после всего остального кода.
Метод prepend() - Добавляем контент внутрь выбранного
 элемента до всего остального кода.
Метод after() - Добавляем контент после выбранного элемента.
Метод before() - Добавляем контент до выбранного элемента.
Метод animate() - Плавное изменение css свойств элемента (анимация).
Метод css() - Получить/Изменить значение css свойств элемента
Метод removeClass() - Удалить класс у элемента(ов) набора
Метод addClass() - Добавить класс к элементу(ам) набора
Метод removeAttr() - Удаление атрибута
Метод attr() - Получение или изменение значения атрибута
Метод slideDown() - Появление элемента 
(по направлению от верха к низу)
Метод slideUp() - Исчезновение элемента 
(по направлению от низа к верху)
Метод fadeTo() - Изменение прозрачности
 элемента до опр. значения за опр. время
Метод fadeIn() - Плавное появление
Метод fadeOut() - Плавное исчезновение
Метод html() - Получение и изменение HTML кода
Метод width() - Узнать/Изменить значение ширины объекта
Метод height() - Узнать/Изменить значение высоты объекта
Метод show() - Показать элемент
Метод hide() - Спрятать элемент
Метод text() - Получение и изменение текста
Далi буде..
2014.12.31 1581

Укменские хакеры впервые решили выйти в сеть. Десятерых из них убило сразу. 220 вольт - это вам не шутки.
Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


    Яндекс.Метрика Яндекс.Метрика