Week 14_Lesson 2

JavaScript with jQuery Examples

• This presentation covers JavaScript and jQuery examples, specifically focusing on jQuery effects and HTML/CSS methods.
• The material is intended for educational use at Yeungjin University.
• External use is prohibited due to copyright restrictions.

Learning Content and Objectives

• Learning Contents: jQuery Effect Methods, jQuery HTML&CSS Methods
• Learning Objectives: Understand and use jQuery Effect Methods. Understand and use jQuery HTML&CSS Methods.

jQuery Effect Methods (1)

• jQuery Hide and Show Methods:
  • hide(): Hides selected elements.
  • show(): Shows selected elements.
  • toggle(): Toggles between hiding and showing selected elements.

jQuery Effect Methods (2)

• Example of hide()/show() Methods:
  • The example includes JavaScript code demonstrating the hide() method and speed parameter. This code hides a paragraph element with a specified duration.
  • The example includes buttons, to hide and show specific elements via JQuery.

jQuery Effect Methods (3)

• Example of toggle() Methods:
  • The example demonstrates how jQuery can be used to toggle elements between visibility states. This example demonstrates how to show and hide elements using the toggle() function.

jQuery Fade Methods (1)

• Description of jQuery Fade Methods: Lists jQuery methods for creating animation effects.
  • fadeIn(): Fades elements in (opacity transitions)
  • fadeOut(): Fades elements out.
  • fadeTo(): Fades elements to a specified opacity.
  • fadeToggle(): Toggles between fadeIn() and fadeOut().

jQuery Fade Methods (2)

• Example of fadeIn(): Illustrates the usage of the fadeIn() method with different speed parameters. This code demonstrates how to fade-in elements using jQuery with various time durations.

jQuery Fade Methods (3)

• Example of fadeOut(): Demonstrates the usage of the fadeOut() method with different speed parameters. This example shows the use of fadeOut() to fade elements out.

jQuery Fade Methods (4)

• Example of fadeToggle(): Demonstrates fadeToggle with different speed parameters. This example shows the use of fadeToggle to toggle the visibility of elements by fading them in and out.

jQuery Slide Methods (1)

• jQuery Slide Methods:
  • slideDown(): Slides elements down.
  • slideUp(): Slides elements up.
  • slideToggle(): Toggles between slideDown() and slideUp().

jQuery Slide Methods (2)

• Example of slideDown() Method: This example demonstrates how to use the slideDown() method with an animation speed, to create a sliding effect as the element slides-down.

jQuery Slide Methods (3)

• Example of slideUp() Method: Demonstrates the slideUp() method with a speed parameter to show a sliding up element animation.

jQuery Slide Methods (4)

• Example of slideToggle() Method: Demonstrates the slideToggle() method with a speed parameter.

jQuery Animate and Stop Methods (1)

• Description of jQuery Animate and Stop Methods:
  • animate(): Runs a customized animation.
  • stop(): Stops any running animation.

jQuery Animate and Stop Methods (2)

• Example of jQuery animate(): Illustrates animating multiple properties simultaneously (e.g., position, opacity, size) using the animate method. Demonstrates animation of changes to properties of an element such as color, size, opacity etc.

jQuery Animate and Stop Methods (3)

• Example of Stop() Method: Demonstrates the stop() method, without parameters, to interrupt any active animation. Shows how an animation can be halted with jQuery.

jQuery HTML&CSS Methods (1)

• Get and Set Content and Attributes:
  • Lists and describes methods to manage HTML and CSS elements and content.
  • text(): Retrieves or sets text content.
  • html(): Retrieves or sets HTML content.
  • val(): Retrieves or sets values of input elements.
  • attr(): Sets or returns attributes.

jQuery HTML&CSS Methods (2)

• Example of text() Method: Example showing retrieving text content of elements.

jQuery HTML&CSS Methods (3)

• Example of text() Method: Example showing setting text content of elements.

jQuery HTML&CSS Methods (4)

• Example of html() Method: Returns HTML content of an element

jQuery HTML&CSS Methods (5)

• Example of html() method: Shows how to set HTML content of specified elements

jQuery HTML&CSS Methods (6)

• Example of jQuery val() Method: Return the value attribute value. Illustrates retrieving input values using JQuery.

jQuery HTML&CSS Methods (7)

• Example of jQuery val() Method: Shows how to set the values of a text input using jQuery

jQuery HTML&CSS Methods (8)

• Example of jQuery attr() Method: Demonstrates returning values from specified attributes using JQuery in cases where value is not in an inputfield.

jQuery HTML&CSS Methods (9)

• Example of jQuery attr() Method: Shows how to set attributes using jQuery

jQuery Add and Remove Elements (1)

• jQuery Add and Remove Elements:
  • append(): Inserts content at the end of elements.
  • prepend(): Inserts content at the beginning.
  • after(): Inserts after an element.
  • before(): Inserts before an element
  • remove(): Removes elements.
  • empty(): Removes child elements.

jQuery Add and Remove Elements (2)

• Example of append(): Illustrates appending content to the end of HTML elements.

jQuery Add and Remove Elements (3)

• Example of append(): Inserts HTML-Elements to the end of HTML-Elements.

jQuery Add and Remove Elements (4)

• Example of prepend(): Illustrates placing content at the beginning of existing HTML elements.

jQuery Add and Remove Elements (5)

• Example of prepend(): Example of inserting specified HTML content to the starting of HTML elements.

jQuery Add and Remove Elements (6)

• Example of before(): Demonstrates inserting content before specified HTML Elements

jQuery Add and Remove Elements (7)

• Example of after(): Example and uses of the after() method for inserting content after specified elements.

jQuery Add and Remove Elements (8)

• Example of remove(): Removes selected elements

jQuery Add and Remove Elements (9)

• Example of empty(): Removes children from the specified HTML elements.

jQuery Get and Set CSS Classes (1)

• jQuery Get and Set CSS Classes: Describes methods for manipulating CSS classes.
  • addClass(): Adds class(es) to selected elements
  • removeClass(): Removes class(es)
  • toggleClass(): Toggles class(es)
  • css(): Sets or retrieves CSS styles.

jQuery Get and Set CSS Classes (2)

• Example Stylesheet: Provides a stylesheet containing the CSS classes that will be referenced in subsequent examples.

jQuery Get and Set CSS Classes (3)

• Example of addClass(): Shows adding class attributes to different multiple elements.

jQuery Get and Set CSS Classes (4)

• Example of removeClass(): Demonstrates removing specific class attributes from different elements

jQuery Get and Set CSS Classes (5)

• Example of toggleClass(): Illustrates how toggleClass can add or remove classes to selected items.

jQuery Get and Set CSS Classes (6)

• Example of css() Method: Shows how to return specific CSS properties for different HTML elements.

jQuery Get and Set CSS Classes (7)

• Example of css() Method: Illustrates how using the css() method can change CSS properties across elements.

Learning Summary

• jQuery Effect Methods: Summary of the usage of jQuery hide()/show(), fadeIn()/fadeOut(), and slideUp()/slideDown() for manipulating visibility and animation.
• jQuery HTML&CSS Methods: Summary of how jQuery enables manipulation of HTML/CSS content, attributes, and values