jquery - web engineering

jQueryWEB ENGINEERING

By: Muhammad Adeel

jQuery

• jQuery is a JavaScript Library.

• jQuery greatly simplifies JavaScript programming.

• jQuery is easy to learn.

Before Studying jQuery You should Know:

Step 1 HTML

Step 2 CSS

Step 3 JavaSc

ript

Purpose

• 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, you can call with a single line of code.

• Many of the biggest companies on the Web use jQuery, such as: Google, Microsoft, IBM, Netflix.

Adding jQuery to your Web Pages

• Just go to your browser and write jquery.com

http://www.jquery.com/

Adding jQuery to your Web Pages (cont.)

• Now Go to the Downloads Options as shown below

• Now Scroll down the page, at the end of the Web page you will found “Past Releases”. Just Click on jQuery CDN.

• Now you will see different versions of jQuery Core, You click on See all version of jQuery Core.


STEP 1

STEP 2


• When you uncompressed it, new tab will be open automatically with JavaScript/jQuery code.

• Press Ctrl + A then Ctrl + C, then Paste it on Notepad and save as file name: jquery.js and save as type: All files.

How to Refer jQuery ?

• The jQuery library is a single JavaScript file,• and you reference it with the HTML <script> tag• (notice that the <script> tag should be inside the <head>

section):

<head><script src="jquery.js"></script></head>

Functions In a Separate File

• <head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="my_jquery_functions.js"></script></head>

jQuery Syntax

• $(selector).action()

$(this).hide() - hides the current element.$("p").hide() - hides all <p> elements.$(".test").hide() - hides all elements with class="test".$("#test").hide() - hides the element with id="test".

METHODS

jQuery Method

• all jQuery methods in our examples, are inside a document ready event:

• $(document).ready(function(){

// jQuery methods go here...

});

The #id Selector

• $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); });});

<!DOCTYPE html><html><head><script src="jquery.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); });});</script></head>

<body><h2>This is a heading</h2><p>This is a paragraph.</p><p id="test">This is another paragraph.</p><button>Click me</button></body>

</html>

Events Occur in jQuery

Mouse hover Event

• $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!");});

Focus event

• $("input").focus(function(){ $(this).css("background-color","#cccccc");});

jQuery Effects - Fading

• jQuery has the following fade methods:• fadeIn() - fades in a hidden element.• fadeOut()-fades out a visible element.• fadeToggle()- toggles between the fadeIn() and

fadeOut() methods• fadeTo()-allows fading to a given opacity (value

between 0 and 1).

jQuery Effects - Sliding

• slideDown() - slides down an element.• slideUp() - slides up an element• slideToggle() - toggles between the slideDown()

and slideUp()

THANK YOU….

jquery - web engineering

Technology