How to Install jQuery With Dreamweaver
After seeing an eye-opening jQuery animation, you may be inspired to include these kinds of special effects on all your Web pages. Jquery, a JavaScript library, also helps developers code faster by performing many complex tasks automatically. Although jQuery does not exist in a Web application until someone installs it, you can add the jQuery library to your Dreamweaver projects by linking to the file that contains the source code.
Other People Are Reading
Instructions
-
-
1
Open Dreamweaver, and click the "HTML" button. Dreamweaver creates a new Web page document.
-
2
Type "This is a test" on the document, and then highlight the text using your mouse. Type "jQueryTest" in the "ID" text box at the bottom of Dreamweaver. Doing this gives the text an ID value.
-
-
3
Click the "Code" tab near the top of Dreamweaver to view the document's HTML code. Locate the "<head>" tag within the code, and paste the following text below that tag:
<script type="text/javascript" src="https://ajax.googleapis.com/
ajax/libs/jquery/1/jquery.min.js"> </script>This code makes jQuery available in your Dreamweaver document.
-
4
Paste the following JavaScript code beneath the code added in the previous step:
$(function () {
$('#jQueryTest').fadeOut(5000);
});This is a simple jQuery animation function. It allows you to verify that jQuery works. The function fades out the text you typed when the Web page loads. The fadeout effect takes 5000 milliseconds.
-
5
Click the "Design" tab to return to design view. Your text appears. Click the "Live Preview" tab. The text fades out in five seconds, verifying that jQuery works. Add additional jQuery code as needed to the Web page.
-
1
Tips & Warnings
Remember that no JavaScript or jQuery code works if users disable JavaScript in their browsers. When creating Web applications, it's useful to create alternative ways to handle critical functions without relying on JavaScript.
References
Resources
- Photo Credit Jupiterimages/Photos.com/Getty Images
