Просто рабочий конспект
$() - базовая функция библиотеки. Сокращение от jQuery()
Например:
$('p')
$('#item_id')
$('.data_class') В скобках - любой селектор.
Мощь используемых селекторов - объединяет в себе CSS и xPath.
Ещё варианты.
Поиск элементов:
$( selector, [ context ] )
где selector - A string containing a selector expression
context - A DOM Element, Document, or jQuery to use as context
$( element )
$( elementArray )
$( jQuery object )
$()
Создание элементов:
$( html, [ ownerDocument ] )
где html - A string of HTML to create on the fly (HTML, not XML).
ownerDocument - A document in which the new elements will be created
$( html, props )
где props - An map of attributes, events, and methods to call on the newly-created element.
$( callback ) - Executes the function when the DOM is ready to be used
Аналогично $(document).ready()
На заметку - хорошая шпаргалка по JQuery 1.4
Кстати, Google предоставляет jquery блоггеру.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
...some code here...
</script> Проверим:)
Возьмём живьём пример из книги "Learning JQuery" by Jonathan Chaffer and Karl Swedberg.
Правда, примеры в книге написаны для версии 1.2.6. и чтобы использовать свежую версию 1.4.1, надо просто убрать собаку '@' в выражениях типа:
$('a[@href^="mailto:"]') , т.е. получим :
$('a[href^="mailto:"]') (это изменение сделали начиная с версии 1.3).
А вот как выглядит результат примера:
2 SelectorsHow to Get Anything You WantSelected ShakeSpeare Plays- Comedies
- As You Like It
- All's Well That Ends Well
- A Midsummer Night's Dream
- Twelfth Night
- Tragedies
- Hamlet
- Macbeth
- Romeo and Juliet
- Histories
Shakespeare Table | Title | Category | Year Published |
| As You Like It | Comedy | |
| All's Well that Ends Well | Comedy | 1601 |
| Hamlet | Tragedy | 1604 |
| Macbeth | Tragedy | 1606 |
| Romeo and Juliet | Tragedy | 1595 |
| Henry IV, Part I | History | 1596 |
| Henry V | History | 1599 |
Ух-ты! Всё работает!..
Google также предоставляет свежую версию JQuery 1.4.1.
Еще написано, что можно прописывать google.load("jquery", "1.4.1"), но всё работает и без этого. Пока не знаю , где надо использовать этот метод...
А вот какие интересные штучки в коде.
Выбор элементов списка заданного id и условие :not
$(document).ready(function() {
$('#selected-plays > li').addClass('horizontal');
$('#selected-plays li:not(.horizontal)').addClass('sub-level');});
Добавление класса всем линкам mailto и pdf
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
$('a[href*="mysite.com"]').addClass('mysite');
Выделение чётных и нечётных строк таблицы
$('#example_table th').parent().addClass('table-heading');
$('#example_table tr:not([th]):even').addClass('even');
$('#example_table tr:not([th]):odd').addClass('odd');
$('#example_table td:contains("Henry")').siblings().addClass('highlight');
Везде используется функция:
$(document).ready(function() {...});
Этим гарантируется, что код будет выполняться только после загрузки всей страницы.Ярлыки: google jquery, jquery Подпишись на новости Javascript и AJAX по e-mail |
