jQuery basic’s
This is a basic example of using jQuery in your web pages, jQuery has many built in functions that can be designed to enhance the user interface of any web pages, below snippet displays few effects of like displaying message box like pop up’s, adding or removing css to any html element and hiding any object effects.
Before testing the page below you need to download jquery.js script from http://docs.jquery.com/Downloading_jQuery and add it to src element under
tag of the html page. in case if you will be generating html page using php then add the scripts under tag.Read the comments in code page to understand the functionality and power of jQuery.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 | < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org"> </meta><meta http-equiv="Expires" content= "Fri, Jan 01 1900 00:00:00 GMT"> </meta><meta http-equiv="Pragma" content="no-cache"> </meta><meta http-equiv="Cache-Control" content="no-cache"> </meta><meta http-equiv="Content-Type" content= "text/html; charset=utf-8"> </meta><meta http-equiv="Lang" content="en"> </meta><meta name="author" content="Qasim"> </meta><meta http-equiv="Reply-to" content="@.com"> </meta><meta name="description" content=""> </meta><meta name="keywords" content=""> </meta><meta name="creation-date" content="01/01/2009"> </meta><meta name="revisit-after" content="15 days"> <title>jQuery test page by Qasim</title> <link rel="stylesheet" type="text/css" href="my.css"> <style type="text/css"> a.makemebold {font-weight: bold; } </style> <script type="text/javascript" src="..\jquery.js"> </script> <script type="text/javascript"> /* * The following code will not run until the html page is completly loaded, * Means it will run after all the images, banners, graphics, scripts are fully loaded */ window.onload = function(){ alert("Hello World, this event is executed once the page/graphics are loaded"); } /* * Using jQuery .ready function we can run the script once the page is ready * to execute any code, example below is a click event. * Following are the list of other events. blur change click dblclick error focus keydown keypress keyup mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit */ $(document).ready(function(){ /* * "a" element click handler is created to execute when clicking on link */ $("a").click(function(event){ alert("As you can see, this is an example of jQuery click event which gets executed once clicked on 'a' link element"); /* * .preventDefault function will prevent the default behaviour of any events, * below example is used to display this in action - once the link is clicked * the event above this code is processed and the link redirection will not be * processed */ event.preventDefault(); /* * Another nice example is to add or remove .css from an object. * style information should be present in the <head> tag of * html page. * for format and eg. see the <style> tags above */ $("a").addClass("makemebold"); }); /* * similarly a style can be removed from an element by using the following. */ $("a").removeClass("makemebold"); /* * Adding effects to your page * jQuery has many effects which will enhance the look n feel * and usablility of your web pages. * Below is an example of using fade effect on a link. * detail list of events can be found at * http://docs.jquery.com/Events */ $("a").click(function(event){ event.preventDefault(); $(this).hide("slow"); }); }); </style></head></script> </link></meta></head> <body> <a href="http://www.eQasim.com/">eQasim.com</a> </body> </html> |
The above page will generate a pop up using Javascript, jQuery, execute script upon clicking the link and generate effects like making the links bold and hide.
Leave a Reply
Gallery
