Разработка интернет-приложений. Лекция 4.

Разработка интернет-приложений. Лекция 4.
Разработка интернет-приложений. Лекция 4.

Лекция 4. JavaScript-библиотеки. Библиотека jQuery

На страницу урока →

HTML, CSS и JavaScript предлагает весь спектр возможностей создания и динамического управления содержимым и оформлением веб-страниц. При этом хорошая идея – использовать готовые библиотеки «многоразовых» кусков кода для упрощения разработки и повышения качества результатов.

JavaScript-библиотека – набор классов и функций на языке JavaScript, оформленный в виде отдельного модуля, подключаемого к документу HTML.

Фреймворк (JavaScript-фреймворк, CSS-фреймворк) – программная платформа, позволяющая создавать веб-приложения из готовых компонент.

Библиотека — алгоритмы и отдельные визуальные элементы

Фреймворк — структура и внешнее оформление веб-приложения

Библиотеки — работа с графикой, мультимедиа, данными. Кроссбраузерная совместимость, адаптация для мобильных устройств. Создание интерфейса приложений и мн. др.

 

Примеры:

https://github.com/d3/d3/wiki/Gallery
http://dmitrybaranovskiy.github.io/raphael/
http://jqueryui.com/themeroller/
http://getbootstrap.com/examples/theme/

 

Подробный список:

https://github.com/bebraw/jswiki/wiki

 

Иконочные шрифты:

http://fontawesome.io

 

jQuery

Библиотека JavaScript, обеспечивающая удобное взаимодействие JavaScript и HTML:

– простой доступ к любым элементам страниц на основе селекторов CSS

– работа с атрибутами и содержимым элементов страниц

– эффекты анимации при изменении элементов

– удобные средства для работы с AJAX

 

«Чистый» JavaScript:

...
elem = document.getElementById("id1")
...
...
elements = document.getElementsByClassName("class1");
    for (var i = 0; i < elements.length; i++) {
       elements[i] ...
    }
...

 

Библиотека jQuery:

(Всё гораздо проще… см. далее.)

 

Подключение библиотеки

Способ 1. Подключить локальный файл

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

Предварительно скачать с официального сайта: http://jquery.com/download/

 

Способ 2. Подключить файл из Интернета

<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

CDN – Content Delivery Network (сеть доставки контента).

https://developers.google.com/speed/libraries/

http://www.asp.net/ajax/cdn

https://cdnjs.com/

Привет, мир!

<script type="text/javascript">
    $(document).ready(function(){
        $("body").append("Привет, мир!");
        ...
    });
    ...
</script>
<script type="text/javascript">
    $(function(){
        $("body").append("Привет, мир!");
        ...
    });
    ...
</script>

Безопасное окружение

<script type="text/javascript">
    (function($){
        ...
        ...
        ...
    })(jQuery);
</script>
<script type="text/javascript">
    (function($){
        $(function(){
            $("body").append("Привет, мир!");
            ...
        });
        ...
    })(jQuery);
</script>

Доступ к элементам

Прямой выбор

$("#id1")
$(".class1")
$("div.class1")
$(".class1.class2")
$("h2")
$("h1, h2")
$("*")

Выбор из контекста

$("div p")
$("div .class1")
$("#id1 .class1")
$(".class1 .class2")

Соседи

$("h1 + p")        // выбор всех элементов p, перед которыми есть h1
$("#elem ~ p")     // выбор всех элементов p, расположенных после элемента c id=elem
$("#elem").prev()
$("#elem").next()

Родственные связи

$("div > p")
$("div > *")
$("p").parent()
$("p").parents()
$("div").children()
$("div:last-child")
$("div:first-child")

Выбор по атрибутам HTML

$("input[type='button']")
$("input[name='name1']")
$("a[href*='ya.ru']")

 

http://anton.shevchuk.name/book/code/css.selectors.html

Работа с атрибутами

Атрибуты CSS

css(property)
css(property, value)
css({key: value, key:value})

Примеры:

alert( $("#id1").css("color") )
$("#id1").css("color", "red")
$("#id1").css({"color":"red", "font-size":"14px", "margin-left":"10px" })

http://anton.shevchuk.name/book/code/css.html

Классы CSS

hasClass(className)
addClass(className)
removeClass(className)
toggleClass(className)

Примеры:

$("#id1").addClass("new-class")
$("#id1").removeClass("old-class")
$("#id1").toggleClass("active")

http://anton.shevchuk.name/book/code/css.html

Атрибуты HTML

attr(attrName)
attr(attrName, attrValue)
removeAttr(attrName)

Примеры:

<a href="http://ya.ru" title="Search system" id="id1">Поиск информации</a>
...
alert( $("id1").attr("title") )
$("id1").attr("href", "http://google.com")

Свойства элементов

tagName
nodeName
nodeType
ownerDocument
selectedIndex
defaultChecked
defaultSelected
prop(propName)
prop(propName,  propValue)
removeProp(propName)

Примеры:

<img src="pic.png" id="id1">
...
alert( $("id1"). prop ("tagName") ) // будет выведено img

Размеры и перемещение

offset()
position()
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
scrollLeft()
scrollTop()

http://anton.shevchuk.name/book/code/height.html

Анимация

Скрыть/показать

hide()
show()
toggle()
slideUp()
slideDown()
slideToggle()
fadeIn()
fadeOut()
fadeToggle()

Примеры:

$("id1").hide()
$("id1").hide("slow") // 600 мс
$("id1").show ("fast") // 200 мс
$("id1").show (400) // 400 мс
$("id1").hide ("fast",  function(){
    alert("Элемент скрыт");
})

Функция обратного вызова – callback-функция

http://anton.shevchuk.name/book/code/hide.html

http://anton.shevchuk.name/book/code/slide.html

Произвольная анимация

animate()

Примеры:

$("id1").animate({ 
    "top":"400px", 
    "height":"100px",
    "width":"200px"
}, swing)

http://anton.shevchuk.name/book/code/animate.easing.html

Изменение дерева объектов

Создание элемента

$myDiv = $('<div id="id1" class="class1"></div>')
$myDiv = $('<div>', {'id':' id1', 'class':'class1'})
$myDiv = $('<div>').attr({'id':' id1', 'class':'class1'})

 

Добавление элемента

После:

after(new_elem)
insertAfter(old_elem)

Пояснение:

$("после чего добавляем").after("что добавляем")
$("что добавляем").insertAfter("после чего добавляем")

Перед:

before(new_elem)
insertBefore(old_elem)

В конец:

append(new_elem)
appendTo(old_elem)

В начало:

prepend(new_elem)
prependTo(old_elem)

 

Изменение элемента

Замена:

replaceWith(new_elem)
replaceAll(old_elem)

Пояснение:

$("что-то находим").replaceWith("на что меняем")
$("что вставляем").replaceAll("вместо чего")

Обёртки:

wrap(new_elem)
wrapAll(new_elem)
wrapInner(new_elem)
unwrap()

 

Копирование и удаление

clone()
detach()
empty()
remove()
html()
text()

События

change, click, dblclick, resize, scroll, select, submit, 
focus, blur, focusin, focusout, 
keydown, keypress, keyup, 
load, unload, 
mousedown, mouseup, mousemove, mouseenter, mouseleave, mouseover, mouseout, 
touchstart, touchend,  touchmove, touchcancel

http://anton.shevchuk.name/book/code/events.mouse.html

$("#id1").on("click", function(){
    ...
});
$("#id1").click(function(event){
    alert("Hello!");
})

С отменой действия по умолчанию:

$("#id1 a").click(function(event){
    alert("Hello!");
    event.preventDefault();
})

С отменой действия по умолчанию и «всплытия»:

$("#id1 a").click(function(event){
    alert("Hello!");
    event.preventDefault();
    event.stopPropagation();
})
$("#id1 a").click(function(event){
    alert("Hello!");
    return false;
})

 

Ссылки на объект

this – объект, на котором выполняется обработчик
target – объект, на котором произошло событие

 

Принудительный вызов и отмена

$("#id1").trigger("click");
$("#id1").unbind("click");

Дальнейшее изучение jQuery

 

– обработка форм

– AJAX

– jQuery UI

– виджеты

– плагины jQuery

– др.

Источники

http://anton.shevchuk.name/jquery-book/

http://jquery-docs.ru/

http://jquery.page2page.ru

 

 

Контрольная работа по предыдущей лекции

Вопрос: Чем отличаются блочные и строковые элементы HTML?

 

Опубликовано: 13.10.2015 г.