Форум PHP программистов > jQuery

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: jQuery - это... (FAQ раздела)

inpost

19.01.2012 - 00:05

jQuery - это не движок, и не система, это библиотека функций, то есть набор сдельных функций на языке JavaScript (далее js) для того, чтобы выполнять простые и средней сложности вещи ещё проще.
Одна из главных причин создания - упрощение создания кроссбраузного кода. Дело в том, что JS для каждого из браузеров имеет свои функции для выполнения одного и того же отрезка кода, и те функции, которые работают в одном браузере, не работают в другом. Разработчики были вынуждены лепить объемную схему: if(ИЕ) elseif(FireFox) elseif(Opera) elseif(Chrome) и т.д. jQuery библиотека позволила упростить данный код. Итого, чтобы получить один объект, необходимо написать 5-10 строк, в свою очередь на jQuery данную вещь делать стало проще, многое умещается в одну строчку.

Подключается библиотека простой строчкой в <head>:

<script type="text/javascript" src="/jquery-1.6.1.min.js"></script>

Важный момент стоит учесть, что библиотека jQuery использует свой набор переменных и имён функций в связи с чем может возникнуть ошибка в работе с данной библиотекой, если вы пользуетесь другими конкурентоспособными библиотеками, например MooTools.

jQuery не единственная библиотека в своём роде, просто была популяризирована некоторыми авторами на территории СНГ. Её конкурентами можно назвать другую библиотеку MooTools .

Не смотря на огромную популярность jQuery, всё же воздержитесь от её использования на сайтах, где она не нужна. Дело в том, что библиотека подгружается браузером, а это лишние ~70kb кода, а так же этот же объем забивает память компьютера-клиента (человека, который зашел на ваш сайт). Если ваш сайт маленький, и JS используется в одном простом месте, реализуйте код на чистом JS, без jQuery, это позволит вам выиграть в гонке за производительностью. Удачным примером неправильного использования библиотеки есть "сайты-визитки" на Joomla & WordPress (не все!), которые подгружают по 15-20 различных библиотек, а потом тормозят (включая прокрутку экрана) на среднестатистических компьютерах и браузерах.

Официальный сайт jQuery: http://jquery.com , там же есть и документация и примеры кода на английском языке.
Другие полезные ссылки: google.ru - содержит 90% ответов на ваши вопросы.
(жду помощи в сообщениях)

___тема раскрыта не полностью, есть есть желание помощь - пишите в комментах, вопросы по работе c jQuery задавайте в этом разделе, но не в этом теме! Прошу прощения, если удалил ваше сообщение за офф-топ___

_____________
Обучаю веб-программированию качественно и не дорого: http://school-php.com
Фрилансер, принимаю заказы: PHP, JS, AS (видео-чаты). Писать в ЛС (Личные сообщения на phpforum).

Игорь_Vasinsky

19.01.2012 - 00:31

Выбор элемента DOM с помощью jQuery

Как известно, jQuery - это фреймворк, написанный на JS

если ранее вы использовали чистый JS, то наверника пользовали такую конструкцию для выбора элемента DOM по ID

document.getElementById('myId');

jQuery же по большей своей мере - это "обёртка" JS и основная его задача - это упрощение работы и сокращение кода.

Вышеизложенный вариант JS можно написать на jQuery так:

$("#myId");

Есть небольшая разница в названиях зарезервированных имён функций между JS и JQ, на примере обычного инпута (текстового поля)

JS

document.getElementById("myInput").value;

$("myInput").val();

кроме этого и назначение атрибута происходит маленько по другому:

JS

document.getElementById("myInput").value = "какой-то текст";

$("myInput").val("какой- то текст");

Аналогично и innerHTML -JS и html() -JQ

$("selector") - именно такой синтаксис используется у jQuery (по началу можно путаться с $, так как в JS он не используется) но если вы работаете с PHP (а в нём с этого знака начинается имя переменной - вы сразу увидите паралель).

Любой код на jQuery заключается в такую конструкцию:

$(dociment).ready(function(){
//далее код
});

делается это для того, чтобы запретить запускаться скрипту до полной загрузки (ready) всего документа (document). Почему? Всё просто jQuery это же ведь фреймворк JS, а столо быть он тоже работает с DOM документа - вот и представьте - если документ загрузился не полностью - а скрипт уже обратился к одному из его элементов... - произойдёт ошибка и остановка всех JS в документе.

Подробнее про "выбор элемента DOM по селектору" на оф. сайте http://jquery-docs.ru/Selectors/

_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker

m4a1fox

19.01.2012 - 00:40

Спасибо за оперативность :) Как-то себе писал что б не забыть




###Создание выборок из элементов форм<!--begin--!>###
:input - выберет все элементы которые влияют на ввод данных в форме
:text - выберет поля которые созданы как <input type="text"...>
:password - поля ввод, которые созданы как <input type="password"...>
:radio - поля ввод, которые созданы как <input type="radio"...>
: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 - поля ввод, которые созданы как <input type="checkbox" checked...>
:selected - поля выбор, которые созданы как <option name="value" selected...>
###Создание выборок из элементов форм<!--end--!>###

###Объекты событий<!--begin--!>###

Методы:
preventDefault() - предотвратить стандартное поведение объекта

Свойства:
pageX       - отступ по оси Х от края браузера
pageY       - отступ по оси Y от края браузера
screenX     - отступ по оси Х от края монитора
screenY     - отступ по оси Y от края монитора
altKey      - проверка на нажатие клавиши alt. Если нажата - TRUE иначе FALSE
ctrlKey     - проверка на нажатие клавиши ctrl. Если нажата - TRUE иначе FALSE
shiftKey    - проверка на нажатие клавиши shift. Если нажата - TRUE иначе FALSE
target      - принимает значение всех элементов. Пример использования ($('#div_for_img').click(function(eventObject) {
                                                                          var myObject = eventObject.target;
                                                                          alert(myObject.alt);
                                                                      }))
###Объекты событий<!--end--!>###

###События в JQuery<!--begin--!>###
hover(function1, function2)     - наведение и отвод мыши с объекта в одной функции 
toggle(function1, function2)    - переключатель
###События в JQuery<!--end--!>###

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

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

Быстрый ответ:

Здесь расположена полная версия этой страницы.