🗊Презентация Introduction to jQuery

Lecture 8 Introduction to jQuery

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.

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

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

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

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

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.

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()

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.

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);

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.

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.

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

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