Оцените презентацию от 1 до 5 баллов!
Тип файла:
ppt / pptx (powerpoint)
Всего слайдов:
19 слайдов
Для класса:
1,2,3,4,5,6,7,8,9,10,11
Размер файла:
1.30 MB
Просмотров:
76
Скачиваний:
0
Автор:
неизвестен
Слайды и текст к этой презентации:
№1 слайд
Содержание слайда: Lecture 8
Introduction to jQuery
№2 слайд
Содержание слайда: jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax(Asynchronous Javascript And Xml) much simpler with an easy-to-use API(application programming interface) that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax(Asynchronous Javascript And Xml) much simpler with an easy-to-use API(application programming interface) that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
№3 слайд
№4 слайд
№5 слайд
№6 слайд
№7 слайд
№8 слайд
Содержание слайда: click()
click()
The click() method attaches an event handler function to an HTML element.
The function is executed when the user clicks on the HTML element.
dblclick()
The dblclick() method attaches an event handler function to an HTML element.
The function is executed when the user double-clicks on the HTML element
№9 слайд
Содержание слайда: mouseenter()
mouseenter()
The mouseenter() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer enters the HTML element
mousedown()
The mousedown() method attaches an event handler function to an HTML element.
The function is executed, when the left mouse button is pressed down, while the mouse is over the HTML element
mouseleave()
The mouseleave() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer leaves the HTML element
№10 слайд
Содержание слайда: mousedown()
mousedown()
The mousedown() method attaches an event handler function to an HTML element.
The function is executed, when the left mouse button is pressed down, while the mouse is over the HTML element
mouseup()
The mouseup() method attaches an event handler function to an HTML element.
The function is executed, when the left mouse button is released, while the mouse is over the HTML element
№11 слайд
Содержание слайда: hover()
hover()
The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.
The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element
focus()
The focus() method attaches an event handler function to an HTML form field.
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
№12 слайд
Содержание слайда: jQuery hide() and show()
jQuery hide() and show()
The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the hide() or show() method completes
jQuery toggle()
With jQuery, you can toggle between the hide() and show() methods with the toggle() method.
№13 слайд
Содержание слайда: jQuery Fading Methods
jQuery Fading Methods
With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery Sliding Methods
With jQuery you can create a sliding effect on elements.
jQuery has the following slide methods:
slideDown()
slideUp()
slideToggle()
№14 слайд
Содержание слайда: jQuery Animations - The animate() Method
jQuery Animations - The animate() Method
The jQuery animate() method is used to create custom animations.
The required params parameter defines the CSS properties to be animated.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the animation completes.
№15 слайд
Содержание слайда: JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors.
JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors.
To prevent this, you can create a callback function.
A callback function is executed after the current effect is finished.
Typical syntax:
$(selector).hide(speed,callback);
№16 слайд
Содержание слайда: Get Content - text(), html(), and val()
Get Content - text(), html(), and val()
Three simple, but useful, jQuery methods for DOM manipulation are:
text() - Sets or returns the text content of selected elements
html() - Sets or returns the content of selected elements (including HTML markup)
val() - Sets or returns the value of form fields
Get Attributes - attr()
The jQuery attr() method is used to get attribute values.
№17 слайд
Содержание слайда: Set Content - text(), html(), and val()
Set Content - text(), html(), and val()
We will use the same three methods from the previous page to set content:
text() - Sets or returns the text content of selected elements
html() - Sets or returns the content of selected elements (including HTML markup)
val() - Sets or returns the value of form fields
A Callback Function for text(), html(), and val()
All of the three jQuery methods above: text(), html(), and val(), also come with a callback function. The callback function has two parameters: the index of the current element in the list of elements selected and the original (old) value. You then return the string you wish to use as the new value from the function.
№18 слайд
Содержание слайда: Add New HTML Content
Add New HTML Content
We will look at four jQuery methods that are used to add new content:
append() - Inserts content at the end of the selected elements
prepend() - Inserts content at the beginning of the selected elements
after() - Inserts content after the selected elements
before() - Inserts content before the selected elements
Remove Elements/Content
To remove elements and content, there are mainly two jQuery methods:
remove() - Removes the selected element (and its child elements)
empty() - Removes the child elements from the selected element
№19 слайд
Содержание слайда: jQuery Manipulating CSS
jQuery Manipulating CSS
jQuery has several methods for CSS manipulation. We will look at the following methods:
addClass() - Adds one or more classes to the selected elements
removeClass() - Removes one or more classes from the selected elements
toggleClass() - Toggles between adding/removing classes from the selected elements
css() - Sets or returns the style attribute