Оцените презентацию от 1 до 5 баллов!
Тип файла:
ppt / pptx (powerpoint)
Всего слайдов:
36 слайдов
Для класса:
1,2,3,4,5,6,7,8,9,10,11
Размер файла:
689.77 kB
Просмотров:
61
Скачиваний:
0
Автор:
неизвестен
Слайды и текст к этой презентации:
№1 слайд![Lecture JQuery](/documents_6/6e36e747a183286087efb66c820bb7f0/img0.jpg)
Содержание слайда: Lecture 9
JQuery
Senior-lecturer: Sarsenova Zh.N.
№2 слайд![Converting Numbers to Strings](/documents_6/6e36e747a183286087efb66c820bb7f0/img1.jpg)
Содержание слайда: Converting Numbers to Strings
The global method String() can convert numbers to strings.
It can be used on any type of numbers, literals, variables, or expressions:
№3 слайд![The Number method toString](/documents_6/6e36e747a183286087efb66c820bb7f0/img2.jpg)
Содержание слайда: The Number method toString() does the same.
№4 слайд![jQuery jQuery is a JavaScript](/documents_6/6e36e747a183286087efb66c820bb7f0/img3.jpg)
Содержание слайда: jQuery
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming
The purpose of jQuery is to make it much easier to use JavaScript on your website.
№5 слайд![JQuery The jQuery library](/documents_6/6e36e747a183286087efb66c820bb7f0/img4.jpg)
Содержание слайда: JQuery
The jQuery library contains the following features:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities
Many of the biggest companies on the Web use jQuery, such as:
Google
Microsoft
IBM
Netflix
№6 слайд![Adding jQuery to Your Web](/documents_6/6e36e747a183286087efb66c820bb7f0/img5.jpg)
Содержание слайда: Adding jQuery to Your Web Pages
There are several ways to start using jQuery on your web site. You can:
Download the jQuery library from jQuery.com
Include jQuery from a CDN, like Google
Place the downloaded file in the same directory as the pages where you wish to use it.
№7 слайд![jQuery CDN Both Google and](/documents_6/6e36e747a183286087efb66c820bb7f0/img6.jpg)
Содержание слайда: jQuery CDN
Both Google and Microsoft host jQuery.
To use jQuery from Google or Microsoft, use one of the following:
Google CDN:
Microsoft CDN:
№8 слайд![jQuery Syntax The jQuery](/documents_6/6e36e747a183286087efb66c820bb7f0/img7.jpg)
Содержание слайда: jQuery Syntax
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
№9 слайд![Example this .hide - hides](/documents_6/6e36e747a183286087efb66c820bb7f0/img8.jpg)
Содержание слайда: Example
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
№10 слайд![The Document Ready Event This](/documents_6/6e36e747a183286087efb66c820bb7f0/img9.jpg)
Содержание слайда: The Document Ready Event
This is to prevent any jQuery code from running before the document is finished loading (is ready).
It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.
№11 слайд![The shorter method](/documents_6/6e36e747a183286087efb66c820bb7f0/img10.jpg)
Содержание слайда: The shorter method
№12 слайд![jQuery Selectors jQuery](/documents_6/6e36e747a183286087efb66c820bb7f0/img11.jpg)
Содержание слайда: jQuery Selectors
jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more.
№13 слайд![The element Selector The](/documents_6/6e36e747a183286087efb66c820bb7f0/img12.jpg)
Содержание слайда: The element Selector
The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
№14 слайд![Example](/documents_6/6e36e747a183286087efb66c820bb7f0/img13.jpg)
Содержание слайда: Example
№15 слайд![The id Selector The jQuery id](/documents_6/6e36e747a183286087efb66c820bb7f0/img14.jpg)
Содержание слайда: The #id Selector
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
№16 слайд![The .class Selector The](/documents_6/6e36e747a183286087efb66c820bb7f0/img15.jpg)
Содержание слайда: The .class Selector
The jQuery class selector finds elements with a specific class.
№17 слайд![More Examples of Jquery](/documents_6/6e36e747a183286087efb66c820bb7f0/img16.jpg)
Содержание слайда: More Examples of Jquery Selector
№18 слайд![jQuery Event Methods All the](/documents_6/6e36e747a183286087efb66c820bb7f0/img17.jpg)
Содержание слайда: jQuery Event Methods
All the different visitor's actions that a web page can respond to are called events.
№19 слайд![jQuery Syntax For Event](/documents_6/6e36e747a183286087efb66c820bb7f0/img18.jpg)
Содержание слайда: jQuery Syntax For Event Methods
№20 слайд![Example](/documents_6/6e36e747a183286087efb66c820bb7f0/img19.jpg)
Содержание слайда: Example
№21 слайд![Events mouseenter - The](/documents_6/6e36e747a183286087efb66c820bb7f0/img20.jpg)
Содержание слайда: Events
mouseenter()- The function is executed when the mouse pointer enters the HTML element:
mouseleave() - The function is executed when the mouse pointer leaves the HTML element:
mousedown()- The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element:
mouseup()- The function is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element:
hover() - The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.
focus()- The function is executed when the form field gets focus:
blur() - The blur() method attaches an event handler function to an HTML form field.
The function is executed when the form field loses focus:
№22 слайд![The on Method The on method](/documents_6/6e36e747a183286087efb66c820bb7f0/img21.jpg)
Содержание слайда: The on() Method
The on() method attaches one or more event handlers for the selected elements.
Attach a click event to a <p> element:
№23 слайд![Example](/documents_6/6e36e747a183286087efb66c820bb7f0/img22.jpg)
Содержание слайда: Example
№24 слайд![jQuery Effects - Hide and](/documents_6/6e36e747a183286087efb66c820bb7f0/img23.jpg)
Содержание слайда: jQuery Effects - Hide and Show
With jQuery, you can hide and show HTML elements with the hide() and show() methods:
Syntax:
№25 слайд![Example](/documents_6/6e36e747a183286087efb66c820bb7f0/img24.jpg)
Содержание слайда: Example
№26 слайд![Hide and Show with speed The](/documents_6/6e36e747a183286087efb66c820bb7f0/img25.jpg)
Содержание слайда: Hide and Show with speed
The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.
№27 слайд![jQuery toggle With jQuery,](/documents_6/6e36e747a183286087efb66c820bb7f0/img26.jpg)
Содержание слайда: jQuery toggle()
With jQuery, you can toggle between the hide() and show() methods with the toggle() method.
Shown elements are hidden and hidden elements are shown:
Syntax:
$(selector).toggle(speed,callback);
№28 слайд![jQuery Effects - Fading With](/documents_6/6e36e747a183286087efb66c820bb7f0/img27.jpg)
Содержание слайда: jQuery Effects - Fading
With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:
fadeIn() - is used to fade in a hidden element.
fadeOut() - is used to fade out a visible element.
fadeToggle() - toggles between the fadeIn() and fadeOut() methods.
fadeTo() - allows fading to a given opacity (value between 0 and 1).
№29 слайд![Example of Fading](/documents_6/6e36e747a183286087efb66c820bb7f0/img28.jpg)
Содержание слайда: Example of Fading
№30 слайд![jQuery Effects - Sliding The](/documents_6/6e36e747a183286087efb66c820bb7f0/img29.jpg)
Содержание слайда: jQuery Effects - Sliding
The jQuery slide methods slide elements up and down.
With jQuery you can create a sliding effect on elements.
jQuery has the following slide methods:
slideDown()
slideUp()
slideToggle()
Syntax:
$(selector).slideDown(speed,callback);
№31 слайд![Example of Sliding](/documents_6/6e36e747a183286087efb66c820bb7f0/img30.jpg)
Содержание слайда: Example of Sliding
№32 слайд![jQuery Animations - The](/documents_6/6e36e747a183286087efb66c820bb7f0/img31.jpg)
Содержание слайда: jQuery Animations - The animate() Method
The jQuery animate() method is used to create custom animations.
Syntax: $(selector).animate({params},speed,callback);
№33 слайд![Example of animate method](/documents_6/6e36e747a183286087efb66c820bb7f0/img32.jpg)
Содержание слайда: Example of animate() method
№34 слайд![scrollTop Description sets or](/documents_6/6e36e747a183286087efb66c820bb7f0/img33.jpg)
Содержание слайда: scrollTop()
Description: sets or returns the vertical scrollbar position for the selected elements.
When the scrollbar is on the top, the position is 0.
When used to return the position:
This method returns the vertical position of the scrollbar for the FIRST matched element.
$(selector).scrollTop() - Return vertical scrollbar position:
$(selector).scrollTop(position) - Set vertical scrollbar position:
№35 слайд![Example of scrollTop method](/documents_6/6e36e747a183286087efb66c820bb7f0/img34.jpg)
Содержание слайда: Example of scrollTop() method
№36 слайд![From w schools.com read about](/documents_6/6e36e747a183286087efb66c820bb7f0/img35.jpg)
Содержание слайда: From w3schools.com
read about JQuery