Реальный пиарJavaScriptJquery → jQuery основы

jQuery основы

jquery примеры

Этой публикацией я решил открыть цикл статей для тех, кто хочет овладеть фреймворком jQuery. Как всегда я буду стараться быть кратким и приводить как можно больше примеров. Последующие статьи, в принципе, можно рассматривать как вольный перевод документации c http://docs.jquery.com.

Итак, вы решили освоить jQuery, с чего начать? С JavaScript вы, конечно же, уже знакомы, иначе не решили бы. Что еще полезно знать для лучшего понимания этого волшебного фреймворка:

CSS селекторы (посмотреть можно здесь)
XPath (посмотреть можно здесь)
На первый взгляд связь не очевидна, но дело в том, что в основе функционирования jQuery лежит возможность легкого доступа к любому узлу xml дерева, коим и является html документ, а доступ этот осуществляется с помощью механизмов CSS и XPath. Поэтому если эти понятия вам знакомы, то считайте, что вы уже на 50% знакомы с jQuery, а если нет - все в ваших руках.

Итак, для начала неплохо бы научиться получать любой нужный нам элемент на странице или группу элементов, отобранную по определенному признаку: view source
01
$("div") // все div'ы на странице
02
$("div:first") // только первый div
03
$("div:last") // только последний
04
$("div:even") // все четные div'ы
05
$("div.myclass") // div имеющий class="myclass"
06
$("#mydiv") // элемент с id="mydiv", не обязательно div
07
$("input:text") // все элементы input с type="text"
08
$("input:checkbox:checked") // все чекбоксы с checked=true
09
$("div", "#myid") // все div'ы, находящиеся в контейнере с id="myid"
10
$("div.myclass img") // img, который находится в div'е с class="myclass"
11
$("div.myclass, div.my2") // div'ы имеющие class="myclass" и class="my2"
view source
01
$("div") // все div'ы на странице
02
$("div:first") // только первый div
03
$("div:last") // только последний
04
$("div:even") // все четные div'ы
05
$("div.myclass") // div имеющий class="myclass"
06
$("#mydiv") // элемент с id="mydiv", не обязательно div
07
$("input:text") // все элементы input с type="text"
08
$("input:checkbox:checked") // все чекбоксы с checked=true
09
$("div", "#myid") // все div'ы, находящиеся в контейнере с id="myid"
10
$("div.myclass img") // img, который находится в div'е с class="myclass"
11
$("div.myclass, div.my2") // div'ы имеющие class="myclass" и class="my2"
Список можно продолжать долго, но для этого существует документация (благо у jQuery она превосходная, с примерами и бес лишней писанины), а мы сейчас пытаемся понять суть вопроса. Пытливый взор сразу обратил внимание на конструкцию $() в каждом примере. Что это? Это функция: имя - $ (разве запрещено?), а в круглых скобках - параметры. Теперь становится понятным, для чего нужны CSS и XPath - их конструкции и выступают в качестве параметров для выборки.

Функция $ - это фундамент jQuery, она так или иначе, вызывается всеми его методами. Если это функция, то она может что-то возвращать. А возвращает она как раз массив элементов, выбранных из документа на основе заданных параметров, т.о. view source
1
var tmp = $("div"); // можно присвоить значение
2
alert(tmp.length) // и посмотреть количество элементов массива
view source
1
var tmp = $("div"); // можно присвоить значение
2
alert(tmp.length) // и посмотреть количество элементов массива
Элементами данного массива можно манипулировать: view source
1
$("div").not('.red') // все div'ы, кроме тех, у которых есть класс "red",
2
// т.е. не только class="red", но и class="myclass red"
3
$("span.green").add("span.gray") // в данном случае
4
// идентично $("span.green, span.gray"),
5
// но бывает, что без add не обойтись
6
$("div").filter(".red, :first") // выбирает все дивы, а потом выбирает
7
// из них первый и с классом red
view source
1
$("div").not('.red') // все div'ы, кроме тех, у которых есть класс "red",
2
// т.е. не только class="red", но и class="myclass red"
3
$("span.green").add("span.gray") // в данном случае
4
// идентично $("span.green, span.gray"),
5
// но бывает, что без add не обойтись
6
$("div").filter(".red, :first") // выбирает все дивы, а потом выбирает
7
// из них первый и с классом red
В данном примере кроме операций над выборкой элементов вы также познакомились с методами jQuery и способом их применения. Методы вызываются через точку и применяются к массиву, после которого они были вызваны. Методы возвращают новый или модифицированный массив. Количество вызовов методов не ограничено. view source
1
$("div") //вернул все div'ы
2
.not('.red') //отсек div'ы с классом red и вернул остальные
3
.add('span.green') //добавил к выборке span'ы c классом green
4
.addClass('myclass') //добавил класс myclass каждому элементу выборки
5
.removeAttr('title') //удалил атрибут title у каждого элемента выборки (если был)
view source
1
$("div") //вернул все div'ы
2
.not('.red') //отсек div'ы с классом red и вернул остальные
3
.add('span.green') //добавил к выборке span'ы c классом green
4
.addClass('myclass') //добавил класс myclass каждому элементу выборки
5
.removeAttr('title') //удалил атрибут title у каждого элемента выборки (если был)
Методы выполняются в порядке вызова (за исключением ajax методов, которые ожидают ответа сервера) слева направо. Это можно использовать для свободного перемещения по DOM дереву: view source
1
<table width="75%" border="1">
2
<tr>
3
<td>здесь текст</td>
4
<td>этот текст будет удален</td>
5
<td>а этот нет</td>
6
<td><a id="myid">del</a></td>
7
</tr>
8
</table>
view source
1
$("#myid").click(function (){
2
$(this).parent().prev().prev().empty();
3
});
view source
1
<table width="75%" border="1">
2
<tr>
3
<td>здесь текст</td>
4
<td>этот текст будет удален</td>
5
<td>а этот нет</td>
6
<td><a id="myid">del</a></td>
7
</tr>
8
</table>
view source
1
$("#myid").click(function (){
2
$(this).parent().prev().prev().empty();
3
}); здесь текст этот текст будет удален а этот нет del

Думаю, названия методов в предыдущем примере говорят сами за себя, подробнее они будут рассмотрены в соответствующей статье.

Ну вот, пожалуй, и все основы - выбрать нужный элемент (или группу) и произвести над ним нужные действия (читай применить нужный метод). Просто, как все гениальное! Основываясь на двух этих простых вещах jQuery имеет свой гибкий механизм обработки событий и ajax взаимодействия с сервером, весомый набор визуальных эффектов и многое другое. Все это я постараюсь осветить в последующих публикациях.


Источник: http://easywebscripts.net

Рекомендуем



jQuery - что это такое Широко бытовало мнение, что шаблонизация рациональна только средствами серверных языков программирования, но jQuery, благодаря развитому механизму обработки событий, позволил уже на уровне javascript отделить логику от представления


jQuery EasyTooltip plugin Во-первых, это мое стремление к простоте и красоте ибо они спасут мир, а когда я взглянул на исходный код нескольких существующих, то понял, что спасать мир придется долго


Сортировка в Java - легко! Теперь же мы можем сортировать и массивы простых типов и массивы объектов, написав относительно малый код, с помощью интерфейса Comparable