jquery presentation

by Jason & Sarah

What is jQuery?

• jQuery is a JavaScript Library.
• jQuery greatly simplifies JavaScript programming.

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

$(this).hide() - hides current element.

$("p").hide() - hides all paragraphs.

$("p.test").hide() - hides all paragraphs with class="test".

$("#test").hide() - hides the element with id="test".

jQuery in Action

The best way to understand the potential of jQuery is to see it for yourself!

Examples of jQuery

IU Athletics

Practice jQuery

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

PowerPoint-style slideshows in HTML and jQuery

SLaks/jqPresentation

Folders and files.

Repository files navigation

#jqPresentation

jqPresentation is a jQuery plugin that creates PowerPoint-style slideshows from web pages.

• Reads semantic, standards-compliant HTML
• Supports jQuery UI animations
• Tracks current position in the address bar for browser navigation support
• Press Up or Down to navigate by one item
• Press Page Up or Page Down to navigate by one slide
• Press Home or End to jump the the beginning or the end of the entire presentation
• Use the scroll wheel to navigate by one item (requires mousewheel plugin)

#Dependencies

• hashchange plugin

##Optional:

• jQuery UI effects (for additional item animations)
• mousewheel plugin (for scroll wheel navigation)

#Instructions Use the following markup:

Tag names don't matter; use whatever elements you like. The contents of each slide also don't matter; slides can hold whatever you like. By convention, all slides should have an <h1> containing a slide title; the standard ( blue ) theme integrates the slide title into the slide design.

To create sequential animations within slides, add class="Item" to elements in the slide. All Item s will be hidden when the slide is first entered, and will appear one by one as you navigate forwards. After creating your markup, call

If you add an ID to a slide or item, navigating to YourPage#YourID will automatically jump to that point.

If you use the SyntaxHighlighter script , you must include the following compatibility hack for jQuery:

You may also want my SyntaxHighlighter theme to match my standard blue presentation theme.

#Item Animations You can apply different animations to items by setting the data-animation attribute (case-insensitive). jqPresentation includes two animations: fade and slideDown . If jQuery UI is present, all of its effects are also available as animations.

You can create a custom animation like this:

The effect name must be lower case. elem is a jQuery object containing a single element to animate, and callback must be called after the animation is complete.

A sample custom animation can be found at the end of the Introducing jQuery presentation .

#License Dual licensed under the MIT and GPL licenses, just like jQuery

• JavaScript 100.0%

• My presentations

Auth with social network:

Download presentation

We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!

Presentation is loading. Please wait.

What is jQuery?.

Published by Morris Owen Modified over 6 years ago

Similar presentations

Presentation on theme: "What is jQuery?."— Presentation transcript:

JQUERY/AJAX ALIREZA KHATAMIAN DELARAM YAZDANSEPAS.

Computer Information System Information System California State University Los Angeles Jongwook Woo CIS 461 Web Development I JQuery Part I Jongwook Woo,

CS428 Web Engineering Lecture 15 Introduction to Jquery.

JQuery. What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversing and manipulation event handling.

Philly.NET Hands-On jQuery + Plug-ins Bill Wolff, Rob Keiser.

1 Using jQuery JavaScript & jQuery the missing manual (Second Edition)

Anatomy of an App HTML, CSS, jQuery, jQuery Mobile CIS 136 Building Mobile Apps 1.

Fundamentals, DOM, Events, AJAX, UI Doncho Minkov Telerik Corporation

Definition from Wikipedia.  The Prototype JavaScript Framework  implemented as a single file of JavaScript code  named prototype.js (

M. Taimoor Khan Courtesy: Norman White.

PhpXperts What is jQuery Javascript Library Fast and concise Simplifies the interaction between HTML and JavaScript.

Nguyen Ich Cuong.  Course duration: 45’  Purpose: Present Introduction to JQuery  Targeted attendees: NICorp Trainee  Tests/quiz: Yes - 10’

JQUERY | INTRODUCTION. jQuery  Open source JavaScript library  Simplifies the interactions between  HTML document, or the Document Object Model (DOM),

13. jQuery See the official documentation at  See the terse API documentation at

Mr. Justin “JET” Turner CSCI 3000 – Fall 2015 CRN Section A – TR 9:30-10:45 CRN – Section B – TR 5:30-6:45.

Jquery Nasrullah. Jquery jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn.

INTRODUCTION TO HTML5 Using jQuery with HTML5. Introducing jQuery  Although it is not a part of any W3C or WHATWG specification, jQuery performs an important.

Animation & Effects Using JQuery. What is jQuery? jQuery is a lightweight, JavaScript library. The purpose of jQuery is to make it much easier to use.

JQuery Youn-Hee Han

CHAPTER 5 jQuery อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.

About project

© 2024 SlidePlayer.com Inc. All rights reserved.

• jQuery Presentation Plugin: Say NO to Keynote!
• Share this page
• Post this page

Trevor Davis , Former Front-End Development Technical Director

Article Category: #Code

Posted on March 24, 2010

I think I’m going to stop using Keynote & Powerpoint forever.

At Viget, we get the opportunity to present a topic to the rest of the company; we call them Lab Shares. This gives us all the chance to work on our presentation skills and to help educate others. I’m giving my presentation next week and will talk about CSS3 transforms and transitions. Obviously, I will be providing a lot of code samples and examples, so if I were to use Keynote, I would be going back and forth between the browser and Keynote. Yeah, no thanks.

So, I wrote this small jQuery plugin that gives you an interface in a browser to give a presentation. If you are getting antsy, take a look at a demo or download it from github .

You can navigate the presentation by using the left & right arrows, the previous & next links, and the individual page links. The plugin is very basic, and here is an example of the markup:

Then, make sure you include the jQuery library and my presentation plugin, and then you can call it like this:

And that’s it. There are a few options you can pass in that are documented on github , but most people probably won’t need them.

So check out the demo and download it . Let me know if there is anything you think I can add to the plugin in the comments.

Related Articles

Some Thoughts after a Major Ruby on Rails Upgrade

Setting up a Python Project Using asdf, PDM, and Ruff

Danny Brown

Craft 5: What It Means For Super Table Page Builders

The viget newsletter.

Nobody likes popups, so we waited until now to recommend our newsletter, featuring thoughts, opinions, and tools for building a better digital world. Read the current issue.

Subscribe Here (opens in new window)

• What is JavaScript – All You Need To Know About JavaScript
• JavaScript Tutorial for Beginners : A Complete Guide
• What is a JavaScript Variable and How to declare it?
• What are JavaScript Operators and its Types?
• What are JavaScript Methods and How to use them?
• What is indexOf in JavaScript and how does it work?
• What is a JavaScript Class and how to use it?
• forEach Loop in JavaScript: One Stop Solution for beginners
• What are Events in JavaScript and how they are handled?
• What is Try Catch in JavaScript and how it works?
• How To Implement JavaScript Trim Method?
• Java vs JavaScript: What are the differences?
• What are JavaScript Reserved Words and Keywords?
• What is the JavaScript MVC Architecture and How does it Work?
• Top 10 Most Popular JavaScript Frameworks
• How to Create an Alert in JavaScript?
• TypeScript vs JavaScript: What are the differences?
• Important JavaScript Functions You Need to Know About
• What are the top 20 Javascript String Functions and how to use them?
• How to submit a form in JavaScript?
• Removing Elements From An Array In JavaScript
• How to Build a JavaScript Calculator?
• How To Best Utilize Onclick In JavaScript?
• Splice Array in JavaScript: All you need to know Array.Splice() Method
• How to Implement JavaScript Date Methods?
• String Concatenation In JavaScript: All you need to know about String concat()
• Event Bubbling and Event Capturing In JavaScript: All you need to know
• How to Implement String Length in JavaScript
• Unshift JavaScript : Know How to Use Unshift() Method in Array
• What is SetInterval in JavaScript and How Does it Work?
• Advanced JavaScript Tutorial: The Best Guide to Advanced Aspects
• jQuery Tutorial – A Complete Guide For Beginners
• Angular Routing: A Complete Guide for Beginners

Interview Questions

• Top 90+ JavaScript Interview Questions and Answers for 2024
• JavaScript Projects- Know How to Build Your Own Web Application

Programming & Frameworks

Jquery tutorial – what is jquery and how to learn it.

All good things come in small packages and so does jQuery. jQuery is a tiny JavaScript library that transforms the web into an entertaining experience. It is one of the most popular JavaScript libraries. In this jQuery Tutorial blog, you’ll learn the importance and basic fundamentals of jQuery.

I’ll be covering the following topics:

What is JavaScript?

• Why use jQuery?

What is jQuery?

Install jquery.

• The Document Object Model(DOM)

jQuery Selectors

Jquery methods, jquery events, jquery effects.

JavaScript is the language of the web, it is used to make the web look alive by adding motion to it. To be more precise, it’s a scripting language that let’s you implement complex and beautiful things/design on web pages. When you notice a web page doing more than just sit there and gawk at you, you can bet that the web page is using JavaScript.

Features of JavaScript:

• It makes web pages more interactive by adding motions and graphics
• It is an Interpreted language which means that you don’t require a compiler to run JavaScript
• JavaScript is mainly a client-side scripting language

If you want to learn more about JavaScript, check out this video:

JavaScript Tutorial For Beginners | Edureka

This video explains the fundamentals of JavaScript with relevant examples.

Why use jQuery? 

We’re all aware that there are 100s of JavaScript frameworks and libraries out there, but why is jQuery useful?

Here’s a list of features that make jQuery so effective:

• For starters, jQuery makes it extremely easy to manipulate the DOM. In order to make a web app more interactive, web developers manipulate the DOM & jQuery makes it very easy to do that
• The community of its users is more diverse than any other JavaScript library. It provides detailed documentation which is all a developer needs
• jQuery has 1000s of plugins available for free, which improve the user experience. One such example is the AJAX (Asynchronous JavaScript And XML)  which develops a responsive and feature rich site
• jQuery provides cross-browser support which lets you run your code on different browsers without worrying about dependency issues

jQuery is an efficient & fast JavaScript Library created by John Resig in 2006. The motto of jQuery is write less, do more, which is very apt because it’s functionality revolves around simplifying each and every line of code. Below is a list of jQuery key features:

• Simplifies JavaScript : It simplifies DOM manipulation and event handling for rapid web development
• Event handling : jQuery offers an effective manner to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code
• Lightweight : jQuery is a compact, lightweight library of about 19KB in size
• Animations : It comes with plenty of built-in animation effects which you can use in your web app to make it more interactive

If you want to get an in-depth explanation about jQuery, check out this video recorded by our jQuery experts .

jQuery Tutorial For Beginners | Edureka

This video will help you understand the basics of jQuery and you will be able to create your own program using jQuery.

There’s no installation per se, it’s more like downloading jQuery. There are two ways to install jQuery:

• Local Installation: You can directly download jQuery library from their official website and include it in your HTML code
• Link to a CDN: You can add jQuery library in your HTML code from Content Delivery Network

In this blog, I’ll be using the second method. Here’s a link to a CDN, just copy and paste it within <script> tags in your HTML file:

Before we go any further, I’d like to mention that I’m using Visual Studio Code editor for writing my code and I’ll be running all my code on Google Chrome browser. Google Chrome has an embedded JavaScript engine that runs all the basic commands. All you have to do is open up a browser, right-click anywhere on the blank space and select Inspect.

Google Chrome browser – jQuery Tutorial

This opens up a JavaScript console for you to run your commands.

The Document Object Model (DOM)

DOM is a tree structure of the various HTML elements. 

In the above illustration:

• <html> is the ancestor of all the other DOM elements
• The <head> and <body> elements are descendants of <html>
• <title> is child of <head>
• The <h1> & <p> elements are children of <body> and <html>

It is important to understand the concept behind DOM in order to manipulate DOM elements.

jQuery Selectors are used to select and manipulate HTML elements by using the “$()” function. In regular JavaScript we have functions like document.getElementById, querySelectorAll, getElementByClass and so many other elaborate functions to do this. But in jQuery the “$()” function replaces all of these functions. Refer the below syntax:

$(selector).action( )

Let’s look at an example:

Once you run the above code, open up the JavaScript console and start off by typing the “$” (selector function) to check if you’ve successfully installed jQuery. This should return a function as shown below:

Now that you’ve installed jQuery, lets run the following command on the browser’s console:

This command selects the <h1> tag and adds a css() method to it, which is used for styling the <h1> tag, in this case the <h1> color is set to red.

This is the end result:

jQuery Fundamentals

Now that you have a basic understanding of jQuery, let’s dive deep into jQuery programming. I’ll be covering the following fundamentals:

There are several jQuery methods, I’ll be covering the most commonly used methods. Here’s a list of methods you’ll be learning:

jQuery Methods – before()

Jquery methods – after(), jquery methods – text(), jquery methods – html(), jquery methods – css(), jquery methods – attr(), jquery methods – val(), jquery methods – addclass(), jquery methods – removeclass(), jquery methods – toggleclass().

The jQuery before() method is used to insert the specified content before the selected elements. Refer the below syntax:

$(selector).before(content);

Let’s look at an example :

Once you run the above code, open up the JavaScript console and type the following command:

This command selects the <ul> (unordered list) and adds a <h2> tag which says “My favourite dogs!!” right before the <ul> tag.

The jQuery after() method is used to insert specified content after the selected element. Refer the below syntax:

$(selector).after(content);

Refer the same code used for the before() method and open up the JavaScript console and type the following command:

This command selects the <ul> (unordered list) and adds a <h2> tag which says “All dogs are adorable!!” right after the <ul> tag.

The jQuery text() method is used to set or return the text content of the selected elements. Refer the below syntax:

$(selector).text( )

$(selector).text(content)

Refer the same code used for the before() method and  open up the JavaScript console and type the following commands:

The first command selects the <li> (list) and uses the text() method to return the content of the <li>. The second command selects the only <p> tag and sets or replaces the content of the <p> tag with “Welcome to this fun jQuery Tutorial”.

jQuery html() method is used to set or return the entire content of the selected elements. Refer the below syntax:

$(selector).html( )

$(selector).html(content)

Refer the same code used for the before() method and open up the JavaScript console and type the following commands:

The first command selects the first element of the <li> (list) and uses the html() method to return the entire content of the <li>. The second command selects the last element of the <li> tag and sets or replaces the content of it with “German Shepherd”.

I know you all are wondering, what’s the difference between text() and html() method? Well, run the below commands and see for yourself:

The jQuery css() method is used to get or set style properties for selected elements. Refer the below syntax:

$(selector).css(propertyname);

$(selector).css(propertyname, value);

The first command selects the <h1> and applies a background color to it. The second command selects all the elements of the <ul> tag and sets their color to green.

The jQuery attr() method is used to set or return attributes and values of the selected elements. Refer the below syntax:

$(selector).attr(attribute)

$(selector).attr(attribute, value)

Let’s look at an example, but before you run the below code, a point to note here is that I’m loading three images of puppies which I have stored in a folder named “puppie” within the jQuery folder (contains the index.html file and css file).

This command selects all the images (img) and adds an attribute called border to each image and sets it to solid black by using the attr() method.

A point to note here is that within the code I’ve linked a index.css file which aligns all the images side by side and also sets the width and height of the images. Here’s the index.css file:

The jQuery val() method is used to set or return current values of the selected elements. Refer the below syntax:

$(selector).val( )

$(selector).val(value)

Once you run the above code, open up the JavaScript console and type some value into the input box, this value is returned as an alert by using the val() method.

The addClass() method is used to add one or more class to the selected element. Refer the below syntax:

$(selector).addClass(classname)

Once you run the above code, open up the JavaScript console and click on the “Try addClass” button, this will add a style class to all the images.

The jQuery removeclass( ) method removes one or more class to the selected element. Refer the below syntax:

$(selector).removeClass(classname)

This method is similar to addClass, only it will remove the class that was added. Run the same code you executed for addClass and open up the console and try the below command and see what you get!

This method toggles between adding and removing one or more class to the selected element. Refer the below syntax:

$(selector).toggleClass(classname)

The toggleClass() is a combination of addClass() and removeClass(). Run the same code you executed for addClass and open up the console and try the below command and see what you get!

There are several jQuery events, I’ll be covering the most commonly used events. Here’s a list of events you’ll be learning:

jQuery Events – click()

• jQuery Events- on()
• jQuery Events- keypress()

When you click on an element, the click event occurs by executing a function or a set of statements. Refer the below syntax:

$(selector).click(function)

Once you run the above code, open up the JavaScript console and enter any character into the input box. On the keypress of a character the <p> tag that says “Start typing…” gets hidden. So in this example we’re using the on() event to add another event listener, i.e. keypress(). 

jQuery Events – keypress()

The jQuery keypress ( ) event is executed when a character is entered. Refer the below syntax:

$(selector).keypress(function)

Refer the click() method to understand the keypress() method.

There are several jQuery effects, I’ll be covering the most commonly used effects. Here’s a list of effects you’ll be learning:

• jQuery Effects- hide()
• jQuery Effects- show()
• jQuery Effects- toggle()
• jQuery Effects- fadeOut()
• jQuery Effects- fadeIn()
• jQuery Effects- fadeToggle()
• jQuery Effects- slideDown()
• jQuery Effects- slideUp()
• jQuery Effects- slideToggle()

jQuery Effects – hide()

The jQuery hide() method is used to hide the selected elements . Refer the below syntax:

$(selector).hide(speed, callback);

Once you run the above code, open up the JavaScript console and click on the hide button. This will hide the image because we’re making use of the hide() method on the image.

jQuery Effects – show()

The jQuery show() method is used to display the selected elements. Refer the below syntax:

$(selector).show(speed, callback);

Refer the same code used for hide() method, I’ve mentioned a show() method in that.

Once you run the code, open up the JavaScript console and click on the show button. This will display the hidden image because we’re making use of the show() method on the image.

jQuery Effects – toggle()

The jQuery toggle()  method is used to toggle between the hide() and show() method. It displays the hidden elements and hides the visible element. Refer the below syntax:

$(selector).toggle(speed, callback);

The toggle() effect is a combination of hide() and show(). Run the same code you executed for hide() effect and open up the console and try the below command and see what you get!

jQuery Effects – fadeOut()

The jQuery fadeOut() method is used to fade out the selected element. Refer the below syntax:

$(selector).fadeOut(speed, callback);

Once you run the above code, open up the JavaScript console and click on the “BYEEE” button. This will fadeOut() each image one by one. 

jQuery Effects – fadeIn()

The jQuery fadeIn() method is used to fade in the selected element. Refer the below syntax:

$(selector).fadeIn(speed, callback);

Once you run the above code, open up the JavaScript console and click on the “Namaste” button. This will fadeInOut() three rectangles which sort off look like the Indian flag.

jQuery Effects – fadeToggle()

jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods . Refer the below syntax:

$(selector).fadeToggle(speed, callback);

The fadeToggle() effect is a combination of fadeOut()   and fadeIn(). Run the same code you executed for fadeIn() effect and open up the console and try the below command and see what you get!

jQuery Effects – slideDown()

The jQuery slideDown() method is used to slide down the selected element. Refer the below syntax:

$(selector).slideDown(speed, callback);

Once you run the above code, open up the JavaScript console and click on the “Slide” button. This will slideDown() a small box.

jQuery Effects – slideUp()

The jQuery slideUp() method is used to slide up the selected element. Refer the below syntax:

$(selector).slideUp(speed, callback);

Once you run the above code, open up the JavaScript console and click on the “Slide” button. This will slideUp() the box.

jQuery Effects – slideToggle()

jQuery slideToggle() method is used to toggle between the slideDown() and slideUp() methods . Refer the below syntax:

$(selector).slideToggle(speed, callback);

The slideToggle() effect is a combination of slideDown() and slideUp(). Run the same code you executed for slideUp() effect and open up the console and try the below command and see what you get!

jQ uery U I

There are several jQuery widgets and effects, I’ll be covering the most commonly used effects. I’ll be covering the following under jQuery UI:

• jQuery UI- draggable()
• jQuery UI- droppable()
• jQuery UI- datepicker()

jQuery UI – draggable()

jQuery UI draggable() method is used to make any DOM element draggable. Once the element is draggable, you can drag it anywhere within the html page . Refer the below syntax:

$(selector).draggable( );

Once you run the above code, open up the JavaScript console and try moving the rectangle by clicking and holding on it. This happens because of the draggable() UI. Try it yourself, it’s fun!

jQuery UI – droppable()

jQuery UI facilitates you to use droppable() method to make any DOM element droppable at a specified target . Refer the below syntax:

$(selector).droppable( );

Once you run the above code, open up the JavaScript console and try moving the image by clicking and holding on it and then drop it on the MyHome icon. This happens because of the droppable() UI. Try it yourself, it’s fun!

jQuery UI – datepicker()

jQuery UI datepicker widget enables users to enter dates easily and visually. Refer the below syntax:

$(selector).datepicker( );

Once you run the above code, open up the JavaScript console and input a date, it will appear on the calendar as shown below.

With this we come to the end of this blog. I hope you found this informative and helpful, stay tuned for more tutorials on web development.

Build real-world apps from scratch and showcase your skills with our hands-on Flutter APP Development Course .

Check out the Angular Certification Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.

To get in-depth knowledge on jQuery along with its various applications, you can enroll Edureka’s Full stack Developer Course or Web Development Course for live online training with 24/7 support and lifetime access.

Got a question for us? Mention them in the comments section of “jQuery Tutorial” and we will get back to you.

Recommended videos for you

Portal development and text searching with hibernate, nodejs – communication and round robin way, ms .net – an intellisense way of web development, implementing web services in java, hibernate mapping on the fly, microsoft sharepoint-the ultimate enterprise collaboration platform, hibernate-the ultimate orm framework, node js express: steps to create restful web app, introduction to java/j2ee & soa, php and mysql : server side scripting for web development, service-oriented architecture with java, learn perl-the jewel of scripting languages, microsoft sharepoint 2013 : the ultimate enterprise collaboration platform, rapid development with cakephp, responsive web app using cakephp, a day in the life of a node.js developer, spring framework : introduction to spring web mvc & spring with bigdata, microsoft sharepoint 2013 : the ultimate enterprise collaboration platform, microsoft .net framework : an intellisense way of web development, create restful web application with node.js express, recommended blogs for you, get vs post: what is the difference between get and post method, how to implement blockingqueue interface in java, why java is a secure language, daemon thread in java: know what are it’s methods, node.js mysql tutorial: all you need to know about crud application, what are vectors in c++ all you need to know, how to build a regular expression in php, what is typescript and why you should use it, what is the difference between html and xml, what is the difference between extends and implements in java, a brief introduction to treemap in java with examples, know about parameterized constructor in java with examples, how to implement select and option tag in html, encapsulation in java – how to master oops with encapsulation, everything you need to know about object oriented programming in c++, what is for-each loop in java, why java is a popular programming language, how to implement matrix multiplication in java, java networking: what is networking in java, what is spring framework – path to efficient development.

I recently joined the jQuery course and I’m confused, is it a game changer for me? Then I read your blog and I must say it helps me clear my mind about all this. Overall, I recommend this course to anyone who wants to improve their web development skills. Thanks for sharing your valuable post.

Join the discussion Cancel reply

Trending courses in programming & frameworks, full stack web development internship program.

• 29k Enrolled Learners
• Weekend/Weekday

Java Course Online

• 78k Enrolled Learners

Python Scripting Certification Training

• 14k Enrolled Learners

Flutter App Development Certification Course

• 13k Enrolled Learners

Mastering Java Programming and Microservices ...

• 1k Enrolled Learners

Spring Framework Certification Course

• 12k Enrolled Learners

Node.js Certification Training Course

• 10k Enrolled Learners

Advanced Java Certification Training

• 7k Enrolled Learners

Data Structures and Algorithms using Java Int ...

• 31k Enrolled Learners

PHP & MySQL with MVC Frameworks Certifica ...

• 5k Enrolled Learners

Browse Categories

Subscribe to our newsletter, and get personalized recommendations..

Already have an account? Sign in .

20,00,000 learners love us! Get personalised resources in your inbox.

At least 1 upper-case and 1 lower-case letter

Minimum 8 characters and Maximum 50 characters

We have recieved your contact details.

You will recieve an email from us shortly.

jQuery Tutorial

Jquery effects, jquery html, jquery traversing, jquery ajax, jquery misc, jquery examples, jquery references.

jQuery is a JavaScript Library.

jQuery greatly simplifies JavaScript programming.

jQuery is easy to learn.

Examples in Each Chapter

Our "Try it Yourself" editor makes it easy to learn jQuery. You can edit code and view the result in your browser:

Click on the "Try it Yourself" button to see how it works.

jQuery Exercises

Test yourself with exercises.

Use the correct selector to hide all <p> elements.

Start the Exercise

Advertisement

Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.

jQuery Quiz Test

Test your jQuery skills at W3Schools!

My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study at W3Schools without using My Learning.

At W3Schools you will find a complete reference of all jQuery selectors, methods, properties and events.

jQuery Exam - Get Your Diploma!

Kickstart your career.

Get certified by completing the course

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

Hackito Ergo Sum

• Give Your Next Presentation In Your Browser With JQuery

by Zack Grossbart on November 5, 2009

I’d rather watch linoleum curl than sit through one more robotic technology presentations. A monotone drone over poorly organized slides turns even the most interesting topics sour. There are many great blogs about giving better presentations. Presentation Zen and the Duarte Design blog are two worth reading. I’ve even written a little of my own advice .

Good presentations are well thought out, have strong supporting materials, and tell interesting stories. They also have a sense of pacing. When I present I want one topic to flow into the next, but nothing ruins pacing faster than watching the presenter fool around with PowerPoint when they should be presenting.

“OK. Now we’ll switch to the demo… Where’s that button… Hey Bob do you know how to make this PowerPoint window go away?”

Switching between applications during a presentation throws off your pacing and I don’t like to do it. I recently gave a presentation about CSS , with many examples that ran in a web browser. The solution was simple: put all of my presentation in the browser.

I created a new presentation program using simple HTML, CSS, and JavaScript. This slide show works in all browsers and on all platforms; sharing it is as simple as sending an URL. Just like SlideShare.net you can host anywhere without all that Flash. This approach also gives you the big advantage of writing your slides in HTML. The only drawback is you have to write your slides in HTML.

This article shows you how to create your own presentations with JQuery and gives you an in-depth look at how this program works. It is a useful introduction to JQuery programming and a working program for giving presentations. It’s also released under the Apache 2.0 License and is totally free.

See It In Action

This all started because I wanted to give a presentation about CSS that had many CSS examples. I figured I could combine the presentation and the examples in one and I got Zack’s (Not So) Basic CSS . I kept this presentation simple because I wanted to keep the CSS simple.

A few weeks later I gave a presentation about JQuery that got a little more complex. Zack’s JQuery Jumpstart added a navigation footer and a much nicer key explaining the keyboard navigation.

This framework is a flexible alternative to PowerPoint. You can change these presentations with CSS and make them look any way you want. Let’s take a look at how it works.

You do most of your work for these presentations in HTML. Each slide is a div tag with a class of slide . The easiest type of slide is a content slide like this:

There are a few other built-in slide types including content slides:

and iframe slides for embedding other website into your presentation:

Each slide is HTML and the sky’s the limit. As long as your data is contained in a div tag and with the class slide you can put anything you want in there. The slides will appear in your presentation in the order they are written in the HTML file.

The HTML also contains the controls like the navigation key and the footer that automatically integrate with your presentation. Any slide you have will display above the footer.

You can add whatever CSS you want to support your slides, but the presentation needs some basic CSS to make each slide work.

This CSS basically does three things:

• Make a single slide take up the whole screen
• Make the text in title slides center aligned and really big
• Add a little spacing to content slides

The JavaScript

The JavaScript is where the magic happens, but it’s more rabbit out of a hat than Harry Potter.

First we iterate over all the slides and add them to an array. While we iterate we also hide every slide. Once we’ve done that we just make the first slide visible.

After we add this stack of slides to an array positioning the slide deck is easy. We simply hide the current slide and show the requested slide.

If you wanted to get fancy you could do this with a JQuery Effect . Just replace the calls to hide and show to calls for slideIn or fadeIn and you are all set. I kept it simple because I often present remotely where animations look choppy.

The rest of code takes care of enabling and disabling buttons and hiding and showing controls. Switching from one slide to another is fast and easy. I can use my keyboard, the arrow buttons, or jump to a specific slide. You can see all the source code .

A Little Bonus

One of my favorite presenters likes to start her presentations with an animation . The animation gives the audience something to look at while they are finding a place to sit and waiting for the presentation to start. PowerPoint makes animations like this pretty easy and I wanted to do the same with JQuery

For my recent JQuery presentation I started things off with a simple JQuery animation .

The animation uses a special type of slide called an animatedslide . In this slide you give every word you want animated a different class:

Then the JavaScript kicks in:

I know it looks a little complicated, but it's really pretty simple. Each word chooses a random direction and moves a random amount in that direction. If the words gets too close to the edge of the screen it bounces back to where it started. The effect is simple, but strangely hypnotic.

I must confess there is a hack here. The animation will repeat 300 times and stop. I've done multi-threaded programming in Java , C++ , Erlang , and Scala , but the threading model of JavaScript is still a mystery to me. If someone knows a better way to make this work I would love to hear about it.

Build Your Own Presentation

Now that you've seen how it works you're ready to build your own presentation. Just download the sample presentation and add your slides to the index.html file. When you're done just post it to your favorite web server. The presentation will run with just about every browser and every operating system.

Building all of your presentations in HTML is just silly, but when you need to include many live web pages this is a good solution for the "um... where is the button to get out of PowerPoint?" problem. The results are small, fast, and easy to share. They'll also get indexed by Google unlike SlideShare presentations.

Beyond the usefulness of this application I like the idea of turning a web browser into something else. Browsers are an interesting platform, but if they want to be taken seriously they need to stop just supporting web pages.

Name This Application Contest

You may have noticed that this poor application doesn't have a name. I'm holding a contest to suggest a name. Just post your suggestions as a comment. The winner gets a free copy of this open source software. Good luck!

• Hashbang, Dandelions, and a Web Drawing Throwdown
• Running Spiffy UI with Node.js
• The Spiffy UI Framework is Open Source
• Creating a Mobile Touch Slide Panel with JQuery
• How To Fix Your Software’s Technical Debt, Program Faster, and Spend More of Your Time Writing Useful Code
• Creating a GWT Wrapper for the JQuery UI Slider
• 4 More GWT Anti-patterns
• Our Spiffy UI
• Collecting Statistics for The WordPress Editorial Calendar Plugin
• Creating a Multi-Valued Auto-Complete Field Using GWT SuggestBox and REST
• Fluid Grids, Vertical Rhythm, and CSS Blocking
• Calling REST from GWT with a little bit of JQuery
• Creating a JQuery Powered Posts Calendar for WordPress
• My New Book The One Minute Commute

More Articles

• Everything Zack
• About Hackito Ergo Sum
• Uncopyright

Get smart with the Thesis WordPress Theme from DIYthemes.

jQuery Script - Free jQuery Plugins and Tutorials

Free jquery presentation plugins.

All the Free jQuery Plugins about 'Presentation' are listed here.

Beautiful HTML Presentation Library - reveal.js

reveal.js is a poweful JavaScript library for creating beautiful, touch-enable, full-features, powerpoint-like HTML5 presentation on the webpage.

10 Best HTML Presentation Frameworks In JavaScript (2024 Update)

10 best JavaScript HTML presentation frameworks to help developers generate professional, nice-looking presentations using JavaScript, HTML, and CSS.

Amazing Presentation Framework With CSS3 - impress.js

An amazing Presentation framework for modern bowsers. Based on CSS3 transforms and transitions

Easy Dynamic Presentation Plugin In jQuery - Presentation.js

A jQuery-powered presentation plugin that allows users to create better professional-looking presentations, with awesome jQuery and/or CSS 3 animations.

Full Page Presentations With jQuery And CSS Animations

A vertical full-page presentation app (also called fullscreen page slider) implemented in JavaScript (jQuery) and CSS animations.

jQuery Plugin To Create Amazing Presentations - mb.disclose

mb.disclose is an awesome jQuery plugin that provides an amazing way to present Html contents in carousel like presentations.

Easy Customizable Presentation Framework With jQuery - scroll-js

scroll-js is a simple, lightweight, easy-to-customize jQuery presentation framework that enables you to navigate between sectioned slides with Page Up/Page Down keys.

3D Cube Page Transition Plugin With jQuery - cubeTransition.js

cubeTransition.js is a jQuery plugin used for creating a fullscreen, responsive, mobile-friendly page slider / presentation with an awesome 3D cube transition effect.

Responsive Web Presentation Plugin For jQuery - sectionizr

sectionizr is a really simple jQuery web presentation plugin which presents any html contents in a responsive, fullscreen, carousel-style page UI.

jQuery Plugin To Create Mobile-friendly HTML Presentations - WebSlides

WebSlides is a jQuery plugin for creating responsive, fast, professional, touch-enabled, highly customizable, Keynote or PowerPoint like HTML5 presentaions with ease.

Easy Mobile Friendly HTML Presentation Plugin With jQuery - presentMe.js

presentMe.js is a simple, easy-to-use and mobile friendly plugin used for generating a beautiful, animated, step-based html presentation / page slider.

Easy jQuery Page Slider with CSS3 Transitions

A nice, stylish jQuery based fullscreen page slider / presentation which allows the visitor to switch between page sections with smooth CSS3 transition effects.

Presentation-style One Page Scroll Plugin For jQuery - Contentshow

Just another jQuery plugin created for fullscreen one page scrolling effect that helps you create step-based web applications such as page sliders and presentations.

Beautiful Web-based Presentation Framework For jQuery - Tesseract

Tesseract is a web-based presentation framework for CSS and JavaScript. Your presentations can be written in HTML and presented on any computer with a web browser.

Fullpage Html Presentation Plugin For jQuery - slider.js

slider.js is a super light jQuery plugin that helps you create full page html presentations without the need to write any CSS.

Multi Page Animations with jQuery, CSS3 and Velocity.js - Gridify

Gridify is a jQuery plugin which transforms the webpage into a multi-page grid so you can switch between the grid pages with a zoom in animation based on CSS3 and velocity.js.

Minimalist jQuery Full Page Slider Plugin - Slidy

Slidy is a simplest jQuery presentation plugin which makes smooth slide animations between fullpage content sections in your web application.

Cross-Platform Full Page Transitions with jQuery and CSS3 - FKPageTransitions

FKPageTransitions is a jQuery plugin which allows the visitor to navigator through your fullpage website with cool CSS3 powered transition effects.

jQuery Learning Center

Getting started with jquery ui, link what is jquery ui.

jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library that you can use to build highly interactive web applications. This guide is designed to get you up to speed on how jQuery UI works. Follow along below to get started.

link Start by Checking Out the Demos

To get a feel for what jQuery UI is capable of, check out the UI Demos .

In the demos section, the navigation lists all of the interactions and widgets that jQuery UI offers. Choose an interaction or widget and you'll be presented with several demo configurations for that particular plugin. Each demo allows you to view source code, change themes, and the URL can always be bookmarked. For example, check out the accordion widget's fill space demo page .

link Build Your Custom jQuery UI Download

Once you have a basic understanding of what jQuery UI is and what it does, you're ready to try it out! It's time to head over to the Download Builder on the jQuery UI website to download a copy of jQuery UI. jQuery UI's Download Builder allows you to choose the components you would like to download and get a custom version of the library for your project. There are three easy steps to building your custom jQuery UI download:

link Step 1: Choose Which Components You Need

The main column of the Download Builder lists all of the JavaScript components in jQuery UI categorized into groups: core, interactions, widgets, and effects. Some components in jQuery UI depend on other components. Just check the boxes for the widgets you'd like to download and any required dependencies will automatically be checked as well. The components you select will all be combined into a custom jQuery UI JavaScript file.

link Step 2: Select a Theme (or Roll Your Own Custom Theme)

In the right column of the Download Builder, you'll find a field where you can choose from a number of pre-designed themes for your jQuery UI widgets. You can either choose from the various themes we provide, or you can design your own custom theme using ThemeRoller (more on that later).

Advanced Theme Settings: The theme section of the Download Builder also offers some advanced configuration settings for your theme. If you plan to use multiple themes on a single page, these fields will come in handy. If you plan to only use one theme on a page, you can skip these settings entirely.

link Step 3: Choose a Version of jQuery UI

The last step in the Download Builder is to select a version number. Make sure to check not only what version of jQuery UI you pick, but also the version of jQuery Core that version supports, as different versions of the library support different versions of jQuery. For more information on what's new in each version of jQuery UI, see the project's upgrade guides and changelogs .

link Click Download!

You're finished with the Download Builder! Click the download button and you'll get a customized zip file containing everything you selected.

link Basic Overview: Using jQuery UI on a Web Page

Next, open up index.html from the downloaded zip in a text editor. You'll see that it references your theme, jQuery, and jQuery UI. Generally, you'll need to include these three files on any page to use the jQuery UI widgets and interactions:

Once you've included the necessary files, you can add some jQuery widgets to your page. For example, to make a datepicker widget, you'll add a text input element to your page and then call .datepicker() on it. Like this:

JavaScript:

link That's It!

For demos of all of the jQuery UI widgets and interactions, check out the demos section of the jQuery UI website.

link Customizing jQuery UI to Your Needs

jQuery UI allows you to customize it in several ways. You've already seen how the Download Builder allows you to customize your copy of jQuery UI to include only the portions you want, but there are additional ways to customize that code to your implementation.

link jQuery UI Basics: Using Options

Each plugin in jQuery UI has a default configuration which is catered to the most basic and common use case. But if you want a plugin to behave different from its default configuration, you can override each of its default settings using "options". Options are a set of properties passed into a jQuery UI widget as an argument. For example, the slider widget has an option for orientation, which allows you to specify whether the slider should be horizontal or vertical. To set this option for a slider on your page, you just pass it in as an argument, like this:

You can pass as many different options as you'd like by following each one with a comma (except the last one):

Just remember to surround your options with curly brackets { } , and you're well on your way. Of course, the example above barely touches on what you can do with jQuery UI. To get detailed information on the entire set of jQuery UI widgets, visit the jQuery UI documentation .

link Visual Customization: Designing a jQuery UI Theme

If you want to design your own theme, jQuery UI has a very slick application for just that purpose. It's called ThemeRoller, and you can always get to it by either clicking the "Themes" link in the jQuery UI navigation, or simply going to jQuery UI ThemeRoller .

ThemeRoller provides a custom interface for designing all of the elements used by jQuery UI widgets. As you tweak the "levers" in the left column, the widgets on the right will reflect your design. The Gallery tab of ThemeRoller offers a number of pre-designed themes (the same ones offered by the Download Builder) that you can tweak or download as they are.

link Downloading Your Theme

When you click the "Download theme" button in ThemeRoller, you'll be directed to the Download Builder and your custom theme will be auto-selected in the Theme dropdown menu. You can configure your download package further from there. Once you download, you'll see that the example.html page is styled using your custom theme.

Quick Tip: If you ever need to edit your theme, simply open the CSS file and find where it says "To view and modify this theme, visit ..." That URL will open the theme in ThemeRoller for editing.

link Support: Where Can I Get Help?

JQuery UI user and developer resources are kept up-to-date at the Support Center .

link Developers Wanted!

Want to join the jQuery UI team? We'd love your help! Visit the UI Development Center for details on how to get involved.