jQuery Trickshots

100个jquery 高级进阶技巧，2015版， JQuery Trickshots25 Assign a S class to the element.·:··26. Listen for events on elements that do not yet exist.....................3027. Single use event listener3128 Event simulation29. Working with touch events30. Know your events31. Quickly prevent default events actions…………,…,.…….…,…,,…..…………………,632. Chain event handlers with event33. Create custom events37V.AJA…·············:·····.·········.··;····················:·····.··.····.···.······················5934 Display file sizes next to download links35. Simplify your Ajax calls with deferreds.·:.···a:·.a··:.a.a:a:.a::sa:a:..aaaa:.·aaa:··4136. Run multiple ajaX requests in parallel....37. Get your IP with jQuery4238. The simplest AJaⅩ request……4239. Serializing objects…...........…………440 File uploads with jQuery1441. Work with Facebooks Graph…4642. Access weather information.………………4743. Fetch your latest Tumblr posts..4844. Find the geographic location of an IP address..…..….,…,.…….……,41945 Scrape sites with YOL................5046. Use the global aJAX methodV Master class5247. Learn to love the console538. Convert code to plugins to promote reuse49. Use anonymous functions to isolate code5650. Merge objects with extend............................5751. Use jQuery. typed……5952. The map method...........,,…6153. The Sgrepo method.54. Sort the elements inside a jQuery collection6355. More about j Query Deferreds.............56. Call jQuery methods conditionally..·:········申6557. jQuery callback lists......,.,.,.,.,.,...,..16658. Make an image black and white...............59. Create a custom pseudo selector....................7060. Custom casing functions61 ( Mis)use jQuery's Animation Queue7262. Custom CSS properties using hooks.........7363. The jQuery $. proxy method7564. Pass callbacks to jQuery' s methods....,.,.,.,…,…,….…,,,75VI Plugins7865. Test HTML5 support with modernize.66. Bring media queries to jQuery.67. Speed up your site with a script loader.8168. Render html with templates................................69. Give jQuery a utility belt.8370. Simplify JavaScript's date and time functions71. Use classical inheritance in JavaScript∴8772. How to work with IndexedDB73. jQuery and cookies……74. Parse and print75 Animate and work with colors76. Upgrade jquery with Css3 animations……….….….….….….….……….………………………977. Show full screen You Tube video backgrounds.....................9478. Enhance your web app with better dialogs∴9479. Notifications in your favicon非。。自。。音着非。音。自道普···80 Supercharge your select dropdowns.....81. Blur page elements with blur s鲁鲁9882. Generate OR Codes with jQuery.…………………………….……………….….…….….……9983 Face detection with jquery84. Trigger full screen mode.......10185. Manipulate the browser history…………10286. Turn textboxes into rotating87. Work with money and currencies∴10588. Easily display Google Maps.....10589. jQuery and Web Workers..........….………10790. Mask input91. Lightweight form validation.10992. Work with retina graphics11093. Instagram-like filters with Java Script ....................11194. jQuery keyboard shortcuts.11495. Inflate web type.…….…,….….…11596. JavaScript and web cameras11597 Responsive date picker11798. Handling file drag &drop in the browser......11899. Rumble elements with100. Dynamic charts121Summary124IntroductionHey reader, thank you for purchasing this book! As you probably know, jQuery is the most popular Java Scriptlibrary in use today it gives web developers a great deal of power by abstracting away the complex tasks oftraversing the DOM, creating elements, handling events and more, while at the same time leveling the play fieldby working around browser differences.In this book, you will find a collection of 100 advanced jQuery and JavaScript techniques, presented as aseries of easy to follow tips that we have developed over the years as Java Script programmers and authors forTutorialzine.If you are an experienced jQuery developer, or a beginner just starting out with javaScript, this book is for youYou will learn neat tricks, find out about awesome plugins, and discover how to use(and abuse)our favoritelibrary to your advantageTo try out the examples in the chapters you will have to paste the code into an html document and open it in abrowser. Some of the examples will not work when opened directly as a file(due to browsers'securityrestrictions), so it would be best to open them through a locally running web server like apache(you can installone of the available packages like XAMPP, MAMP and others). Along with the book, you have received a zip withall the examples as separate hTML files that you can run and edit directly in your browser, which will be mucheasierAt any time, you can visit the book home page or reach out to us on twitter if you have any suggestions orquestions about the bookNow, let's begin our journeyI Dom ManipulationjQuery is the library of choice for DoM manipulation. It gives you a friendly css syntax for selecting elementsthe ability to filter and traverse them and to modify them in more ways you can think of. In this chapter we willstart with the basics and gradually move to more challenging tricks1. The dom Ready EventThe first step to manipulating the dom is subscribing to the doM ready event. This is not only a matter ofconvention- the event is fired only when all page elements are present and accessible, so your j Query selectorsactually return anything. But do you know that there is a neat way to subscribe to the ready event that worksconsistently cross-browser and doesn,' t even depend on jQuery? Here is how to do it// with jQuerys(document). ready (function([/*...*/1);// shorter jQuery versions( function()[/*,,,*});// wi thout jQuery(doesn't work in older IEs)document addEventlistener (DOMContentLoaded, function ()fyour code goes heref, false)// and here's the trick (works everywhere):r(function()talert( DOM Ready!function r(f)in/test(document. ready State)?setTimeout(r(+f+),9): fo]The trick here, as explained by the original author, is that we are checking the document. ready State propertyIf it contains the string in(as in Loading) we set a timeout and check again. otherwise we execute the passedfunction2. Execute Page Specific CodeThis trick is strictly about code organization, but it is good to know nonetheless. If you write lots of Java Script itcan quickly get difficult to manage. This is especially true when most of your code resides in a single file that isincluded in all the pages of your site. You end up with what is know as DOM Spaghetti. Here is one simple way tokeep your code in check and avoid bugs write a page routing function that executes only the js that is needefor that particular pagevar routeroutes th// The routes will be stored hereadd function(url, action)tthis. routesurl= actionrun: function()[JQuery. each(this. routes, function (patterniif(location. href match(pattern))// this" points to the function to be executedthis o);// will execute only on this pageroute add(002.html, function )ialert('Hello there!route add( products. html, function(talert( this wont be executed )});// You can even use regex-es:route add( .*.html, function ()talert( This is using a regex! )})route. run();Each function is executed only when the path is matched. You can even use regexes for greater control3. Use the JavaScript ANd TrickThe JavaScript logical AND operator doesnt evaluate the second expression if the first is false. You can use thisto your advantage and save yourself from having to write a full if-statcment// Instead of writing this:if(s(#elem). length)t// do some thing// You can write thisS(#elem). Length & alert( doing something )This works best when checking single boolean variables. USing it in place of more complex conditionals is to beavoided as it will make your code difficult to comprehend4. Use the jQuery is0 methodThe iso method is more powerful than you think. here are a few examplesHTML// First, cache the element into a variablevar elem=$(#elem)// Is this a div?elem. is( div)&& console. log( it's a div);// Does it have the bigbox class?elem is( .bigbox ')&& console. log("it has the bigbox class! "// Is it visible? (we are hiding it in this exampleelem is( not(: visible)')&& console. log("it is hidden! )Animatingelem. animate(t ': 2001,1);is it animated?elem. is(: animated)&& console. log( it is animated! )