Javascript и AJAX. Изучение языков и web-технологий Javascript и AJAX. Изучение языков и web-технологий

Рабочий конспект изучения языков и web-технологий: Javascript и AJAX

 
Мистический роман
БЛИЗКАЯ ДАЛЬ
Татьяны Катушонок

Купить в магазинах:
Близкая даль
Близкая даль
Близкая даль
Близкая даль
Близкая дальБлизкая даль
Озарение души
Сборник стихов Татьяны Катушонок
Осознание красоты спасет мир
Web technologies and programming languages
Web технологии и языки
PHP
Изучаем PHP
Клиент-сервер
XML - XSLT
Изучаем XML
Преобразования
HTML
Изучаем HTML
Теги
Javascript и AJAX
Три кита
Основы языка
DOM
Прогулка по DOMу
Events and Listeners
Список событий
Events in JQuery
Google JQuery
Новый синтаксис JQuery
Selectors
Слайд-шоу

Примеры jQuery
All Selector(*)
:animated Selector




5.2 Learning JQuery. Примеры из книги через Google.
понедельник
Просто рабочий конспект
$() - базовая функция библиотеки. Сокращение от 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

Selectors

How to Get Anything You Want

Selected 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() {...});

Этим гарантируется, что код будет  выполняться только после загрузки всей страницы.

Ярлыки: ,

Подпишись на новости Javascript и AJAX по e-mail
posted by Sergey @ 01:20   0 comments
Близкая даль
Подпишись на новости Javascript и AJAX письмом:

Напишите ваш e-mail :

Delivered by FeedBurner

Предыдущий пост
Архив
Линки
Статистика

Subscribe in a reader

Powered by FeedBurner

BLOGGER

© Javascript и AJAX. Изучение языков и web-технологий