JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
Downloading jQuery file from jQuery website.
Referring to jQuery file through Content Delivery Networks.
Google CDN
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>
</script>
Microsoft CDN
<script src=“http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js”>
</script>
2. Why Study JavaScript?
JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
3. <html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button"
onclick='document.getElementById("demo").innerHTML = "Hello
JavaScript!"'>Click Me!</button>
</body>
</html>
6. What is jQuery?
• jQuery is a fast, small, cross-platform and feature-rich JavaScript library. It is
designed to simplify the client-side scripting of HTML.
• It makes things like HTML document traversal and manipulation, animation,
event handling, and AJAX very simple with an easy-to-use API that works on a lot
of different type of browsers.
• The main purpose of jQuery is to provide an easy way to use JavaScript on your
website to make it more interactive and attractive. It is also used to add animation.
7. jQuery:
• jQuery is a lightweight, "write less, do more", JavaScript library.
• The purpose of jQuery is to make it much easier to use JavaScript on your website.
• jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them
into methods that you can call with a single line of code.
• jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM
manipulation.
The jQuery library contains the following features:
• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities
8. Why jQuery?
• There are lots of other JavaScript libraries out there, but jQuery is probably the
most popular, and also the most extendable.
Many of the biggest companies on the Web use jQuery, such as:
• Google
• Microsoft
• IBM
• Netflix
9. jQuery Install
• Downloading jQuery file from jQuery website.
• Referring to jQuery file through Content Delivery Networks.
Google CDN
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>
</script>
Microsoft CDN
<script src=“http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js”>
</script>
10. jQuery Syntax:
• The jQuery syntax is tailor-made for selecting HTML elements and
performing some action on the element(s).
• Basic syntax is: $(selector).action( )
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
14. #id Selector
• The jQuery #id selector uses the id attribute of an HTML tag to find the specific
element.
• An id should be unique within a page, so you should use the #id selector when you
want to find a single, unique element.
• To find an element with a specific id, write a hash character, followed by the id of
the HTML element:
19. The .class Selector
• The jQuery .class selector finds elements with a specific class.
• To find elements with a specific class, write a period character,
followed by the name of the class:
$(".test")
Example
• When a user clicks on a button, the elements with
class="test" will be hidden:
23. What are Events?
• All the different visitors' actions that a web page can respond to are called events.
• An event represents the precise moment when something happens.
Examples:
• moving a mouse over an element
• selecting a radio button
• clicking on an element
24. jQuery click() with Examples
• The click() is an inbuilt method in jQuery that starts the click event or attach a
function to run when a click event occurs.
Syntax:
• $(selector).click(function);
31. 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:
35. 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:
38. 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:
41. mousedown()
• The mousedown() method attaches an event handler function to an HTML
element.
• The function is executed, when the left, middle or right mouse button is pressed
down, while the mouse is over the HTML element:
44. mouseup()
• The mouseup() method attaches an event handler function to an HTML element.
• The function is executed, when the left, middle or right mouse button is released,
while the mouse is over the HTML element:
47. 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:
53. blur
• The jQuery blur event occurs when element loses focus. It can be generated by via
keyboard commands like tab key or mouse click anywhere on the page.
62. jQuery Fading Methods
• jQuery we can fade an element in and out of visibility.
jQuery has the following fade methods:
• fadeIn()
• fadeOut()
• fadeToggle()
63. jQuery fadeIn() Method
• The jQuery fadeIn() method is used to fade in a hidden element.
Syntax:
$(selector).fadeIn(speed,callback);
64. • 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 fading
completes.
67. jQuery fadeOut() Method
• The jQuery fadeOut() method is used to fade out a visible element.
Syntax:
$(selector).fadeOut(speed,callback);
68. • 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 fading
completes.
70. jQuery fadeToggle() Method
• The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut()
methods.
• If the elements are faded out, fadeToggle() will fade them in.
• If the elements are faded in, fadeToggle() will fade them out.
75. jQuery slideDown() Method
• The jQuery slideDown() method is used to slide down an element.
Syntax:
$(selector).slideDown(speed,callback);
76. • 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 sliding
completes.
• The following example demonstrates the slideDown() method:
80. jQuery slideUp() Method
• The jQuery slideUp() method is used to slide up an element.
Syntax:
$(selector).slideUp(speed,callback);
81. • 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 sliding
completes.
• The following example demonstrates the slideUp() method:
85. jQuery slideToggle() Method
• The jQuery slideToggle() method toggles between the slideDown()
and slideUp() methods.
• If the elements have been slid down, slideToggle() will slide them up.
• If the elements have been slid up, slideToggle() will slide them down.
87. • The optional speed parameter can take the following values: "slow",
"fast", milliseconds.
• The optional callback parameter is a function to be executed after the
sliding completes.
• The following example demonstrates the slideToggle() method:
93. • 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.
• The following example demonstrates a simple use of the animate()
method; it moves a <div> element to the right, until it has reached a
left property of 250px:
95. position property:
• The position property specifies the type of positioning method used
for an element (static, relative, absolute, fixed, or sticky).