![]() Most of the jQuery codes is actually dealing with programming event handlers for a set of selected elements! The steps are: This example shows you how to program event handler to handle user's action. But Example 1 is a useless as all changes are pre-program, instead of responding to the user's action. Example 1 illustrate the jQuery selector and built-in functions.Bind onmouseover/onmouseout handlers to all selected elements Return false // Prevent triggering the default handler Bind a onclick handler to a selected element Run after the ROM tree is constructed. $(document).ready( function() ).Įxample 2: jQuery Event Handling " JQEx2.html" Run after the Document DOM tree is constructed Moreover, the download jquery.js would be cached for reuse. This could save some of your network traffic and probably provide slightly faster response. Note: In HTML4/XHTML1.0, you need to include attribute type= "text/javascript" in the opening tag.Īlternatively, instead of serving the jquery.js from your server, you can use one of the CDN (Content Distribution Network) to serve it. But you can place it anywhere in the document, as long as before any jQuery function (such as $()) is used. For testing and studying the codes, use the ". Note: The " min.js" is the minified version meant for production, which removes additional spaces and comments to reduce the file size for faster download. Copy the JavaScript file (e.g., jquery-1.xx.x.min.js) under your document root directory, typically under a sub-directory " js".Remember that jQuery is written in JavaScript! Using jQuery Installation and Setup I shall assume that you are familiar with HTML5, CSS3 and JavaScript, which are the absolutely necessary pre-requisites for using jQuery. It is reported that jQuery is used by over 60% of the production websites in the Internet! ![]() The cross-browser support is particularly important for production, as you can't possibly test your JavaScript codes on all browsers. With jQuery, you can write a few lines of codes to replace tenths of JavaScript codes and run on all browsers without the need to test on each of them. AJAX Interface: jQuery provides a simple Ajax interface to send asynchronous HTTP GET/POST requests and process the response.Special Effects and Animation: jQuery simplifies the programming for special visual effects (such as show/hide, fade-in/fade-out, slide-in/Slide-out) and custom animation.Event Handling: jQuery also simplifies JavaScript event handling.On the other hand, selecting and manipulating DOM elements using raw JavaScript is messy and cumbersome. jQuery provides a powerful and supercharged selector function to select elements based on HTML tag-names (e.g.,, ), HTML ID attribute (e.g., #debug), and CSS class name (e.g. DOM Elements Selection and Manipulation: The "query" refers to querying and selecting DOM elements within a web document for subsequent manipulation.On the other hand, to provide cross-browser support in raw JavaScript, you need to check the browser and issue the appropriate codes, as different browsers (particularly IE) implement certain features differently. ![]() That is, the same jQuery code runs on the big-5 browsers (Chrome, Firefox, IE, Safari and Opera). Cross-Browser Support: jQuery provides cross-browser support.In other words, most of the developers nowadays program in jQuery, rather than raw JavaScript. Among the JavaScript libraries/frameworks, jQuery's market share is 95.2% (Ref: ). In May 2015, JQuery is used by 64.2% of all the websites. ![]() It is a small script (about 96kB minified) written in JavaScript called " jquery.js", which greatly simplifies JavaScript programming by providing cross-browser supports for DOM element selection and manipulation, event handling, Ajax request/response processing and animation. ![]()
0 Comments
Leave a Reply. |