Jquery 1

Jquery By – Hussain Fakhruddin Manish Singh

What is Jquery? jQuery is a fast and concise JavaScript Library. Simplifies HTML document traversing, event handling, animating, and ajax interactions for rapid web development. Designed to change the way that you write JavaScript. Lightweight tool.

Features Free and Open Source. Support for CSS3. Cross-browser support. Lots of inbuilt functions and plugins. Support for creating own plugins for users.

JavaScript and jQuery Jquery is a library bult on top of javascript. jQuery simplifies coding for developers. jQuery is NOT faster then javascript but makes the code look much elegent. Once you have done some work with jQuery coming back to JavaScript mght look painful.

Why Jquery Over JavaScript There are much more functions and plugins for developers. Even bigger functionalities can be achieved in less amount of coding. Provides better compatibility with different browsers. Ajax is made very easy with jquery. Easy to provide effects, animation, designs to the pages

Downloading Jquery jQuery can be downloaded either in minified form or uncompressed form. Download jQuery in minified form in below link : http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js . jQuery resources can be found at http://docs.jquery.com .

Getting Started Put the downloaded jquery.js file after unzipping ( if needed) inside your application directory. Insert the following <script> tag in the <head> section of your HTMl file: <script type="text/javascript" src="jquery.js"></script> Now write the HTML code given in next slide and run it through any browser

Hello World Code using jQuery <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("a").click(function() { alert("Hello World!"); }); }); </script> </head> <body> <a href="">Link</a> </body> </html>

Explanation of Code $(document).ready = window.onload of plain javascript. $("a") stands for <a> element of html. In the web page the word “Link” is displayed with a link. On clicking that link the jquery function will get called and an alert message is displayed.

$ Sign in jQuery or JavaScript A beginner, or even a seasoned JavaScript programmer may be slightly intimidated once spotting something as ambiguous as the dollar sign ($). Well,there is nothing mysterious about the $ sign, for it is just a variable (or an identifier) name and legal in Javascript. In JavaScript, the dollar sign commonly appears in variable definitions and function calls.

Making jQuery Simpler Jquery is all about making things simple for developers. So we can replace the $(document).ready part like below in the Hello World Example : $(function() { $("a").click(function() { alert("Hello world!"); }); });

Types in jQuery JavaScript provides several built-in types.All of them are supported in jquery In addition to those, there are virtual types like Selectors, enhanced pseudo-types like Events and Functions. By default any variable is initialized with false.

String Type A string in JavaScript is an immutable object that contains none, one or many characters. Immutable means, once created they cannot be changed. Ex : - “ I am a string.” - typeof “Any String”; //o/p string

String Quoting A string can be defined using single or double quotes. You can nest single quotes inside of double quotes, and vice versa. To mix double quotes with double quotes, the nested ones have to be escaped with a backslash. Ex : "You make 'me' sad.“ 'Holy "cranking" moses!‘ "<a href=\"home\">Home</a>"

String Functions A string in JavaScript has some built-in methods to manipulate the string . The result might be new string - or something else, eg. split returns an array. Ex : "hello".charAt(0) // "h" "hello".toUpperCase() // "HELLO" "Hello".toLowerCase() // "hello“ "hello".replace(/e|o/g, "x") // "hxllx" "1,2,3".split(",") // ["1", "2", "3"]

String Properties All strings have a length property. Ex : "Hello".length // 5 An empty string defaults to false: Ex : !"" // true !"hello" // false !"true" // false !new Boolean(false) // false

Numbers Numbers are double-precision 64-bit format IEEE 754 values. They are immutable, just as strings. All operators common in c-based languages are available to work with numbers (+, -, *, /, %, =, +=, -=, *=, /=, ++, --). Ex : typeof 12 // "number"

More on Numbers JavaScript provides utilities to work with numbers in the Math object. Ex : Math.PI // 3.141592653589793 Math.cos(Math.PI) // -1 If a number is zero, it defaults to false. Ex : !0 // true !1 // false

Continued… Parsing Numbers : parseInt and parseFloat help parsing strings into numbers. Both do some implicit conversion if the base isn't specified. Ex : parseInt("123") = 123 (implicit decimal) parseInt("010") = 8 (implicit octal) parseInt("0xCAFE") = 51966(implicit hex) parseInt("010", 10) = 10 (explicit decimal) parseInt("11", 2) = 3 (explicit binary)

Continued… Numbers to Strings : When appending numbers to string, the result is always a string. If you want to add numbers and then append them to a string, put parentheses around them. Ex : "" + 1 + 2; // "12“ "" + (1 + 2); // "3"

NaN and Infinity Parsing something that isn't a number results in NaN. Division by zero results in Infinity. Both NaN and Infinity are of type "number“. Ex : parseInt("hello", 10) // NaN isNaN(parseInt("hello", 10)) // true 1 / 0 // Infinity NaN == NaN // false Infinity == Infinity // true

Objects Javascript supports Object Orientation. Object can be crated in following way : var x = { }; var y = { name: “Manish", age: 24 }; You can write and read properties of an object using the dot notation. Ex : x.name = y.name + " Singh" // “Manish Singh"

Arrays Collection of data into a single variable. Ex : x = [1,2,3]; The type of an array is "object" . You write and read object properties using the array notation also. It allows you to dynamically choose the property.

Continued An array, no matter if it has elements or not, never defaults to false . Ex : var operations = { increase: "++", decrease: "--" } var operation = "increase"; operations[operation] // "++"; operations["multiply"] = "*"; // "*"

Iteration Apart from normal javascript loops jquery support many advanced iterations. jQuery provides a generic each-function to iterate over properties of objects, as well as elements of arrays Ex : jQuery.each(obj, function(key, value) { console.log("key", key, "value", value); });

Function A function in JavaScript can be either named or anonymous. An anonymous function can be assigned to a variable or passed to a method. The type of a function is "function". Ex : function named() { } var handler = function() { }

More on Functions Inside a function a special variable "arguments" is always available. It's similar to an array in that it has a length property, but it lacks the built-in methods of an array. The arguments object also has a callee property, which refers to the function you're inside of.

Examples function log(x) { console.log(typeof x,arguments.length); } log(); // "undefined", 0 log(1); // "number", 1 log("1", "2", "3"); // "string", 3 var awesome = function() { return arguments.callee } awesome() == awesome // true

Scope and Closures In JavaScript, all variables defined inside a function are only visible inside that function scope. Closures are created whenever a variable that is defined outside the current scope is accessed from within some inner scope.

Example // global var x = 0; (function() { // private var x = 1; console.log(x); // 1 })(); console.log(x); // 0

function create(){ var counter = 0; return { increment: function() { counter++; }, print: function() { console.log(counter); } } } var c = create(); c.increment(); c.print(); // 1

Callback A callback is a plain JavaScript function passed to some method as an argument or option. Some callbacks are just events, called to give the user a chance to react when a certain state is triggered. jQuery's event system uses such callbacks everywhere.

Example of callback $("body").click(function(event) { console.log("clicked: " + event.target); }); $("#myform").submit(function() { return false; });

References http://www.tutsdeck.com/tutorial/2/jquery-tutorial-beginners/ http://my123web.blogspot.com/search/label/jQuery http://jquery-howto.blogspot.com/2009/06/jquery-beginner-tutorials.html http://docs.jquery.com http://www.authenticsociety.com/blog/JavaScript_DollarSign

Jquery 1

More Related Content

What's hot

Similar to Jquery 1

Recently uploaded

Jquery 1