Основное назначение библиoтeки jQuery - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Основное назначение библиoтeки jQuery, слайд №1

Основное назначение библиoтeки jQuery, слайд №2

Основное назначение библиoтeки jQuery, слайд №3

Основное назначение библиoтeки jQuery, слайд №4

Основное назначение библиoтeки jQuery, слайд №5

Основное назначение библиoтeки jQuery, слайд №6

Основное назначение библиoтeки jQuery, слайд №7

Основное назначение библиoтeки jQuery, слайд №8

Основное назначение библиoтeки jQuery, слайд №9

Основное назначение библиoтeки jQuery, слайд №10

Основное назначение библиoтeки jQuery, слайд №11

Основное назначение библиoтeки jQuery, слайд №12

Основное назначение библиoтeки jQuery, слайд №13

Основное назначение библиoтeки jQuery, слайд №14

Основное назначение библиoтeки jQuery, слайд №15

Основное назначение библиoтeки jQuery, слайд №16

Основное назначение библиoтeки jQuery, слайд №17

Основное назначение библиoтeки jQuery, слайд №18

Основное назначение библиoтeки jQuery, слайд №19

Основное назначение библиoтeки jQuery, слайд №20

Основное назначение библиoтeки jQuery, слайд №21

Основное назначение библиoтeки jQuery, слайд №22

Основное назначение библиoтeки jQuery, слайд №23

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Основное назначение библиoтeки jQuery. Доклад-сообщение содержит 23 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Основное назначение библиoтeки jQuery Данная библиотека позволяет изменять содержимое HTML- документов путем манипулирования объектами модели, создаваемой браузерами в процессе обработки HTML-кода (так называемые DOM-манипуляции).

Слайд 2

Описание слайда:

Преимущества библиoтeки jQuery: 1.Средства jQuery необычайно выразительны. Эта библиотека позволяет добиться гораздо большего при намного меньшем объеме кода, чем в случае использования программных DOM-интерфейсов браузеров. 2.Meтоды Query применимы к целым группам элементов. Предлагаемый в DOM- модели стандартный подход, основанный на шаблонной цепочке действий “выбрать-повторить-изменить”, больше не требуется. Следствием этого является уменьшение количества циклов for в коде, а значит, и снижение вероятности появления в нем ошибок.

Слайд 3

Описание слайда:

3. Библиотека jQuery справляется с различиями в реализации DOM в различных браузерах (проблемы кросс-браузерности). Т.е. вы перестаете беспокоиться об особенностях поддержки того или иного средства, чем славится браузер Internet Explorer (IE). Достаточно всего лишь сформулировать свои пожелания, и библиотека самостоятельно обеспечит совместимость с конкретным браузером. 4. Библиотека jQuery имеет открытый исходный код. Если принципы работы какого-либо средства для меня не совсем ясны или получаемый результат не совпадает с ожидаемым, можно обратиться непосредственно к коду библиотеки.

Слайд 4

Описание слайда:

Установка библитеки jQueгy 1. Скачать фреймворк с домашней странице проекта ( и подключить в коде Данный способ хорош для работы в offline, или при медленном соединении синтернетом 2. С использованием CDN (Content Delivery Network или Content Distribution Network, CDN):

Слайд 5

Описание слайда:

Можно проверить, подгрузилась ли библиотека, и если нет, то подгрузить с собственного сайта. Для этого можно добавить: window.jQuery || document.write('') Доступ к вoзмoжнocтям Доступ к вoзмoжнocтям библиотеки jQueгy осуществляется с помощью функции библиотеки jQuery $(), которую мы будем называть просто функцией $(). Эта функция служит точкой входа в мир jQuery, а символ $ является удобным коротким псевдонимом пространства имен jQuery. Т.е $() = jQuery ()

Слайд 6

Описание слайда:

Вариант вызова

Слайд 7

Описание слайда:

Манипулирование объектами Общее правило- манипулировать DOM объектами, можно только после того как объекты были загружены. Т.е. если у вас есть фрагмент кода 3D Printers shop ….. То обратиться к заголовку h1 вы можете в конце документа или после строк, формирующих h1.

Слайд 8

Описание слайда:

3D Printers shop $("h1").css("color","red"); ……….

Слайд 9

Описание слайда:

3D Printers shop ……….. $("h1").css("color","red");

Слайд 10

Описание слайда:

Отсрочка выполнения функции до момента готовности DOM Отсрочка выполнения функции до момента готовности DOM В предыдущем примере элемент script был помещен в конце документа, чтобы браузер успел создать все объекты в DOM до того, как начнет выполняться код JavaScript. Библиотека jQuery предлагает способ решения этой проблемы. Ожидание завершения построения DOM $(document).ready(function () { // ...выполняемый код... });

Слайд 11

Описание слайда:

В этом сценарии мы передаем объект document функции $() в качестве аргумента и вызываем метод ready(), передавая ему функцию, которую хотим выполнить после окончания загрузки и готовности DOM к работе. Можете поместить этот элемент script в любое место документа, будучи уверенным в том, что jQuery не допустит преждевременного выполнения функции. В этом сценарии мы передаем объект document функции $() в качестве аргумента и вызываем метод ready(), передавая ему функцию, которую хотим выполнить после окончания загрузки и готовности DOM к работе. Можете поместить этот элемент script в любое место документа, будучи уверенным в том, что jQuery не допустит преждевременного выполнения функции. Добавьте код Most Popular Description click me Использование альтернативной нотации При желании можете передать свою функцию в качестве параметра непосредственно $-функции jQuery. При таком способе записи вызова результат будет тем же, что и в случае вызова $ (document) ready (). $(function() { $("#pcl").css("color", "blue"); });

Слайд 12

Описание слайда:

Выбор элементов В Javascript: Выбор элементов В Javascript: getElementById(id) – поиск по id="…" getElementsByName(name) – поиск по name="name" getElementsByClassName(class) – поиск по class="class" getElementsByTagName(tag) – поиск по тегу querySelectorAll(selector) – поиск по произвольному CSS селектору

Слайд 13

Описание слайда:

Для выбора элементов в jQuery используют селекторы Селекторы в jQuery разделены на следующие категории: основные селекторы; иерархические селекторы; основные фильтры; фильтры для выбора дочерних элементов; фильтры для указания видимости элементов; фильтры по контенту; селекторы элементов форм; селекторы атрибутов.

Слайд 14

Описание слайда:

Основные селекторы (Базовые селекторы) Основные селекторы (Базовые селекторы) 1. Селектор * Соответствует любому элементу. Возвращает: Массив элементов. Использование $("*") var elementCount = $("*").length - возвращает число элементов 2. Селектор E Выбирает все элементы с именем тега E. Возвращает: Массив элементов. $("div").css("border", "9px solid red");

Слайд 15

Описание слайда:

3. Селектор .C 3. Селектор .C Выбирает все элементы с именем класса C. Возвращает: Массив элементов. $(". descr " ).css( "border", "3px solid red" ); 4. Селектор #id Выбирает элемент с указанным идентификатором (атрибутом id). $("#myDiv").css("border","3px solid red" ); 5. Множественный селектор ("selector1, selector2, selectorN") $( "div, span, p.myClass" ).css( "border", "3px solid red" );

Слайд 16

Описание слайда:

Некоторые свойства и методы объекта jQuery each(функция) -Выполняет указанную функцию для каждого из выбранных элементов get(индекс)-Получает объект HTMLElement с указанным индексом index(HTMLElement)-Производит поиск указанного объекта HTMLElement среди набора выбранных элементов и возвращает его индекс,если находит его index(jQuery) -Аналогичен предыдущему методу, но возвращает индекс первого из элементов, содержащихся в указанном объекте jQuery index(селектор)-Возвращает индекс первого найденного элемента в объекте jQuery, вычисляемый относительно элементов соответствующих селектору length Возвращает число элементов в объекте jQuery toArray()Возвращает объекты HTMLElement, содержащиеся в объекте jQuery, в виде массива

Слайд 17

Описание слайда:

Для примера, var fp=$("p").get(0) возвращает HTMLElement объект Для примера, var fp=$("p").get(0) возвращает HTMLElement объект Создание объектов jQuery из DOM-объектов Объекты jQuery можно создавать, передавая объект или массив объектов HTMLElement функции $() в качестве аргумента. $(document).ready(function() { var elems = document.getElementsByTagName("p"); console.log($(elems)); $(elems).mouseenter(function(e) { $(this).css("border","1px red solid" ); }) .mouseout(function(e) { $(this).css("border", "none"); }) } )

Слайд 18

Описание слайда:

Итерирование функции по DOM-объектам Метод each() позволяет определить функцию, которая будет выполнена для каждого из DOM-объектов, содержащихся в объекте jQuery $(document).ready(function() { $('ul > li').each( function(index){ $(this).append(''+index+''); }) });

Слайд 19

Описание слайда:

2. Иерархические селекторы 2. Иерархические селекторы Дочерний селектор (“parent > child”) Выбирает всех непосредственных потомков (детей) заданного родителя Селектор потомков (“ancestor descendant”) Выбирает все элементы, которые являются потомками данного родителя Селектор (“prev + next”) Выбирает все элементы next, которым непосредственно предшествует элементы prev Селектор (“prev ~ siblings”) Выбирает все братские элементы, следующие после заданного элемента prev на том же уровне вложенности

Слайд 20

Описание слайда:

3. Селекторы атрибутов 3. Селекторы атрибутов Данная группа селекторов позволяет выбрать элементы по их атрибутам Селектор [name=”value”] Выбирает все элементы с атрибутом с именем name, значение которого точно совпадает c заданным значение value $(function(){ var inp=$("input[name='t1']"); inp.on("click",function(event) { alert($(this).val()); alert(event.target.value);} ); } ) 1 1 2 3

Слайд 21

Описание слайда:

Селектор [name|=”value”] Выбирает все элементы с заданным атрибутом, значение которого либо совпадает со значение value, либо со строкой, в которой начальная часть строки value, а затем следует дефис Some text Some other text will not be outlined $( "a[hreflang|='en']" ).css( "border", "3px dotted green" );

Слайд 22

Описание слайда:

Селектор [name^=”value”] Селектор [name^=”value”] Выбирает все элементы с заданным атрибутом, значение которого начинается с подстроки value. Селектор [name*=”value”] Выбирает все элементы с заданным атрибутом, значение которого содержит подстроку value. Селектор [name~=”value”] Выбирает все элементы с заданным атрибутом, значение которого содержит заданное слово, разделенное пробелами. Селектор [name$=”value”] Выбирает все элементы с заданным атрибутом, значение которого заканчивается заданным словом. Селектор [name!=”value”] Выбирает все элементы, которые либо не имеют заданного атрибута, либо значение его не совпадает с указанным значением. Множественный [name=”value”][name2=”value2″] Множественный селектор