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.6 :animated Selector
среда
Просто рабочий конспект

Актуален для элементов DOM, находящихся в состоянии анимации, активизированном функциями animate(), slideToggle()...

$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateObj() {
$("#mover").slideToggle('slow', animateObj);
}
animateObj();

Пример:



Такие живые кубики...
Подпишись на новости Javascript и AJAX по e-mail
posted by Sergey @ 23:47   0 comments
5.5 Примеры. Selectors. All selector (*)
Просто рабочий конспект


Найти все элементы, включая BODY, HEAD,... во всём документе.

var elementCount = $("*").css("border","3px solid #ceafff").length;
$("body").prepend("Найдено всего " + elementCount + " элементов");

Найти все дочерние элементы внутри документа начиная от конкретного объекта c id = curr_ID:

var elementCount = $("#curr_ID").find("*").length;

Эквивалентно :

var elementCount = $("#curr_ID *").length;


Замечание. Очень медленный селектор.

Поскольку это страничка Google Blogger, поэтому в расчёт идут ещё и скрытые элементы. Их будет несколько больше, чем видно визуально.

Ярлыки:

Подпишись на новости Javascript и AJAX по e-mail
posted by Sergey @ 03:12   0 comments
5.4 Selectors
вторник
Просто рабочий конспект
Исходя из концепции Трёх китов, уровень behavior строится следующим образом:

Создаются CSS-стили на все случаи жизни по классам.

А затем данным на странице динамически присваивается нужный класс в зависимости от происходящих событий.

Доступ к элементам DOMа как раз и позволяют получить замечательные селекторы - функции JQuery.

Кое-что из документации:
$(‘a[title]’) - выбрать все линки, у которых есть атрибут title

$(‘div:has(ol)’) - выбрать все DIV элементы, у которых есть элемент OL

$(‘tr:even’) -чётные строки таблицы.

$(‘tr:odd’) - нечётные строки таблицы.
Другой способ:  
$(‘tr’).filter(‘:odd’).addClass(‘odd’);

$(‘td:contains(“Some text”)’) – поле таблицы, содержащее текст “Some text”

При добавлении класса элементу JQuery сам проверяет, есть ли уже этот класс у элемента.

$('tr:not([th]):even').addClass('even') - чётные строки таблицы, кроме заголовка

$('td:contains("Henry")').next().addClass('highlight') - Следующий «сосед»

$('td:contains("Henry")').siblings().addClass('highlight') - все следующие «соседи»

Но что самое замечательное - так это цепочки !
В одной строке кода можно разместить любую длинную комбинацию:

$('td:contains("Henry")') . parent(). find('td:eq(1)').addClass('highlight'). end(). find('td:eq(2)'). addClass('highlight');

Супер!

Каждый селектор/выражение  возвращает jQuery объект:

var myTag = $('#my-element').get(0).tagName;

Вместо get(0) можно просто [0]:

var myTag = $('#my-element').[0].tagName;

Ярлыки: ,

Подпишись на новости Javascript и AJAX по e-mail
posted by Sergey @ 06:42   0 comments
5.3 Новый синтаксис JQuery. Изменения в последних версиях библиотеки.
Просто рабочий конспект

Разбирая примеры из книг по JQuery, столкнулся с тем, что кое-что не работает, как обещано.
Оказалось, что начиная с версии 1.3 были внесены изменения в синтаксис вызова функций.

Получилась такая таблица ( буду дополнять по ходу):

.СталоБылоО чём речь
1$('a[title]')$('a[@title]')все линки с атрибутом title
2$('div:has(ol)')$('div[ol]')все div, содержащие ol

Ярлыки: ,

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

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

Delivered by FeedBurner

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

Subscribe in a reader

Powered by FeedBurner

BLOGGER

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