<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>        <script>            // Different ways to achieve the Document Ready event            // With jQuery            $(document).ready(function(){ /* ... */});            // Short jQuery            $(function(){ /* ... */});            // Without jQuery (doesn't work in older IE versions)            document.addEventListener('DOMContentLoaded',function(){                // Your code goes here            });            // The Trickshot (works everywhere):            r(function(){                alert('DOM Ready!');            })            function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}        </script>

        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>        <script>            var route = {                _routes : {},    // The routes will be stored here                add    : function(url, action){                    this._routes[url] = action;                },                run : function(){                    jQuery.each(this._routes, function(pattern){                        if(location.href.match(pattern)){                            // "this" points to the function to be executed                            this();                        }                    });                }            }            // Will execute only on this page:            route.add('002.html', function(){                alert('Hello there!')            });            route.add('products.html', function(){                alert("this won't be executed :(")            });            // You can even use regex-es:            route.add('.*.html', function(){                alert('This is using a regex!')            });            route.run();        </script>

// Instead of writing this:if($('#elem').length){    // do something}// You can write this:$('#elem').length && log("doing something");

// First, cache the element into a variable:var elem = $('#elem');// Is this a div?elem.is('div') && log("it's a div");// Does it have the bigbox class?elem.is('.bigbox') && log("it has the bigbox class!");// Is it visible? (we are hiding it in this example)elem.is(':not(:visible)') && log("it is hidden!");// Animatingelem.animate({'width':200},1);// is it animated?elem.is(':animated') && log("it is animated!");

// How many elements does your page have?log('This page has ' + $('*').length + ' elements!');

/ Old waylog($('#elem').length == 1 ? "exists!" : "doesn't exist!");// Trickshot:jQuery.fn.exists = function(){ return this.length > 0; }log($('#elem').exists() ? "exists!" : "doesn't exist!");

// Select an element. The second argument is context to limit the search// You can use a selector, jQuery object or dom element$('li','#firstList').each(function(){    log($(this).html());});log('-----');// Create an element. The second argument is an// object with jQuery methods to be calledvar div = $('<div>',{    "class": "bigBlue",    "css": {        "background-color":"purple"    },    "width" : 20,    "height": 20,    "animate" : {   // You can use any jQuery method as a property!        "width": 200,        "height":50    }});div.appendTo('#result');

<ul id="links">    <li><a href="007.html">The previous tip</a></li>    <li><a href="./009.html">The next tip</a></li>   <li><a href="http://www.google.com/">Google</a></li> </ul>// Loop through all the links$('#links a').each(function(){    if(this.hostname != location.hostname){        // The link is external        $(this).append('<img src="assets/img/external.png" />')               .attr('target','_blank');    }});

<ul id="meals"> <li> <ul class="breakfast"> <li class="eggs">No</li> <li class="toast">No</li> <li class="juice">No</li> </ul> </li> </ul>
// Here is how it is used:var breakfast = $('#meals .breakfast');breakfast.find('.eggs').text('Yes')                      .end() // back to breakfast                      .find('.toast').text('Yes')                      .end()                      .find('.juice').toggleClass('juice coffee').text('Yes');breakfast.find('li').each(function(){    log(this.className + ': ' + this.textContent)});

        <script>            // Prevent right clicking on this page            $(function(){                $(document).on("contextmenu",function(e){                    e.preventDefault();                });            });        </script>

// Here is how it is used:if(window != window.top){    window.top.location = window.location;}else{    alert('This page is not displayed in a frame. Open 011.html to see it in action.');}

// Make the stylesheet visible and editable$('#regular-style-block').css({'display':'block', 'white-space':'pre'})                         .attr('contentEditable',true);

<p class="descr">In certain situations you might want to prevent text on the page from being selectable. Try selecting this text and hit view source to see how it is done.</p>     <script>            // Prevent text from being selected            $(function(){                $('p.descr').attr('unselectable', 'on')                           .css('user-select', 'none')                           .on('selectstart', false);          });     </script>

        <!-- Case 1 - requesting jQuery from the official CDN -->        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>        <!-- Case 2 - requesting jQuery from Google's CDN (notice the protocol) -->        <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> -->        <!-- Case 3 - requesting the latest minor 1.8.x version (only cached for an hour) -->        <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js"></script> -->        <!-- Case 4 - requesting the absolute latest jQuery version (use with caution) -->        <!-- <script src="https://code.jquery.com/jquery.min.js"></script> -->

CODE// Bad//var elem = $('#elem');//for(var i = 0; i < 100; i++){//    elem.append('<li>element '+i+'</li>');//}// Goodvar elem = $('#elem'),    arr = [];for(var i = 0; i < 100; i++){    arr.push('<li>element '+i+'</li>');}elem.append(arr.join(''));

// You want to parse this address into parts:var url = 'http://tutorialzine.com/books/jquery-trickshots?trick=12#comments';// The trickshot:var a = $('<a>',{ href: url });log('Host name: ' + a.prop('hostname'));log('Path: ' + a.prop('pathname'));log('Query: ' + a.prop('search'));log('Protocol: ' + a.prop('protocol'));log('Hash: ' + a.prop('hash'));

// Print the IDs of all LI items$('#colors li').each(function(){    // Access the ID directly, instead    // of using jQuery's $(this).attr('id')    log(this.id);});

// Let's try some benchmarks!var iterations = 10000, i;timer('Fancy');for(i=0; i < iterations; i++){    // This falls back to a SLOW JavaScript dom traversal    $('#peanutButter div:first');}timer_result('Fancy');timer('Parent-child');for(i=0; i < iterations; i++){    // Better, but still slow    $('#peanutButter div');}timer_result('Parent-child');timer('Parent-child by class');for(i=0; i < iterations; i++){    // Some browsers are a bit faster on this one    $('#peanutButter .jellyTime')

// Bad:// $('#pancakes li').eq(0).remove();// $('#pancakes li').eq(1).remove();// $('#pancakes li').eq(2).remove();// Good:var pancakes = $('#pancakes li');pancakes.eq(0).remove();pancakes.eq(1).remove();pancakes.eq(2).remove();// Alternatively:// pancakes.eq(0).remove().end()//           .eq(1).remove().end()//           .eq(2).remove().end();

$(document).ready(function(){    function showMenu(){        alert('Showing menu!');        // Doing something complex here    }    $('#menuButton').click(showMenu);    $('#menuLink').click(showMenu);});

var arr = $('li'),    iterations = 100000;timer('Native Loop');for(var z=0;z<iterations;z++){    var length = arr.length;    for(var i=0; i < length; i++){      arr[i];    }}timer_result('Native Loop');timer('jQuery Each');for(z=0;z<iterations;z++){    arr.each(function(i, val) {      this;    });}timer_result('jQuery Each');

// Modifying in placevar elem = $('#elem');timer('In place');for(i=0; i < iterations; i++){    elem.width(Math.round(100*Math.random()));    elem.height(Math.round(100*Math.random()));}timer_result('In place');var parent = elem.parent();// Detaching firsttimer('Detached');elem.detach();for(i=0; i < iterations; i++){    elem.width(Math.round(100*Math.random()));    elem.height(Math.round(100*Math.random()));}elem.appendTo(parent);timer_result('Detached');

        <script>            // jQuery is loaded at this point. We can use            // event delegation right away to bind events            // even before $(document).ready:            $(document).on('click', '#clickMe', function(){                alert('Hit view source and see how this is made');            });            $(document).ready(function(){                // This is where you would usually bind event handlers,                // but as we are using delegation, there is no need to.                // $('#clickMe').click(function(){ alert('Hey!'); });            });            // Note: You should place your script tags at the bottom of the page.            // I have included them in the head only to demonstrate that we can bind            // events before document ready and before the elements are created.        </script>

<ul id="testList"> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul>var style = $('<style>');// Try commenting out this line, or change the color:style.text('#testList li{ color:red;}');// Placing it before the result section so it affects the elementsstyle.prependTo('#result');

$(document).ready(function(){    $('html').addClass('JS');});  html.JS #message { display:block; } #message {display:none;}

<ul id="testList"> <li>Old</li> <li>Old</li> <li>Old</li> <li>Old</li> </ul>var list = $('#testList');// Binding an event on the list, but listening for events on the li items:list.on('click','li',function(){    $(this).remove();});// This allows us to create li elements at a later time,// while keeping the functionality in the event listenerlist.append('<li>New item (click me!)</li>');

<button id="press">Press me!</ul>var press = $('#press');// There is a method that does exactly that, the one():press.one('click',function(){    alert('This alert will pop up only once');});// What this method does, is call on() behind the scenes,// with a 1 as the last argument:// press.on('click',null,null,function(){alert('I am the one and only!');}, 1);

<button id="press">Press me!</ul>var press = $('#press');// Just a regular event listener:press.on('click',function(e, how){    how = how || '';    alert('The buton was clicked ' + how + '!');});// Trigger the click eventpress.trigger('click');// Trigger it with an argumentpress.trigger('click',['fast']);

// Define some variablesvar ball = $('<div id="ball"></div>').appendTo('body'),startPosition = {}, elementPosition = {};// Listen for mouse and touch eventsball.on('mousedown touchstart',function(e){    e.preventDefault();    // Normalizing the touch event object    e = (e.originalEvent.touches) ? e.originalEvent.touches[0] : e;    // Recording current positions    startPosition = {x: e.pageX, y: e.pageY};    elementPosition = {x: ball.offset().left, y: ball.offset().top};    // These event listeners will be removed later    ball.on('mousemove.rem touchmove.rem',function(e){        e = (e.originalEvent.touches) ? e.originalEvent.touches[0] : e;        ball.css({            top:elementPosition.y + (e.pageY - startPosition.y),            left: elementPosition.x + (e.pageX - startPosition.x),        });    });});ball.on('mouseup touchend',function(){    // Removing the heavy *move listeners    ball.off('.rem');});

<div id="holder"> <button id="button1">1</button> <button id="button2">2</button> <button id="button3">3</button> <button id="button4">4</button> <button id="clear" style="float: right;">Clear</button> </div>// Lets cache some selectorsvar button1 = $('#button1'),    button2 = $('#button2'),    button3 = $('#button3'),    button4 = $('#button4'),    clear = $('#clear'),    holder = $('#holder');// Case 1: Direct event handlingbutton1.on('click',function(){    log('Click');});// Case 2: Direct event handling of multiple eventsbutton2.on('mouseenter mouseleave',function(){    log('In/Out');});// Case 3: Data passingbutton3.on('click', Math.round(Math.random()*20), function(e){    // This will print the same number over and over again,    // as the random number above is generated only once:    log('Random number: ' + e.data);});// Case 4: Events with a namespacebutton4.on('click.temp', function(e){    log('Temp event!');});button2.on('click.temp', function(e){    log('Temp event!');});// Case 5: Using event delegation$('#holder').on('click', '#clear', function(){    log.clear();});// Case 6: Passing an event mapvar t; // timerclear.on({    'mousedown':function(){        t = new Date();    },    'mouseup':function(){        if(new Date() - t &gt; 1000){            // The button has been held pressed            // for more than a second. Turn off            // the temp events            $('button').off('.temp');            alert('The .temp events were cleared!');        }    }});

<a href="http://google.com/" id="goToGoogle">Go To Google</a>$('#goToGoogle').click(false);

<button id="press">点击</button> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script>var press = $('#press');press.on('click',function(){    return 'Hip';});// The second event listener has access// to what was returned from the firstpress.on('click',function(e){    console.log(e.result + ' Hop!');}); </script>

<button id="button1">Jump</button> <button id="button2">Punch</button> <button id="button3">Click</button> <button id="clear" style="float: right;">Clear</button> <div id="eventDiv"></div>     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>     <script>var button1 = $('#button1'),    button2 = $('#button2'),    button3 = $('#button3'),    clear = $('#clear'),    div = $('#eventDiv');div.on({    jump : function(){        alert('Jumped!');    },    punch : function(e,data){        alert('Punched '+data+'!');    },    click : function(){        alert('Simulated click!');    }});button1.click(function(){    div.trigger('jump');});button2.click(function(){    // Pass data along with the event    div.trigger('punch',['hard']);});button3.click(function(){    div.trigger('click');});clear.click(function(){    //some clear code});     </script>

<a href="001.html" class="fetchSize">First Trickshot</a> <br /> 
<a href="034.html" class="fetchSize">This Trickshot</a> <br /> 
<a href="assets/img/ball.png" class="fetchSize">Ball.png</a> <br />

// Loop all .fetchSize links$('a.fetchSize').each(function(){    // Issue an AJAX HEAD request for each one    var link = this;    $.ajax({        type        : 'HEAD',        url            : link.href,        complete    : function(xhr){            // Append the filesize to each            $(link).append(' (' + humanize(xhr.getResponseHeader('Content-Length')) + ')');        }    });});function humanize(size){    var units = ['bytes','KB','MB','GB','TB','PB'];    var ord = Math.floor( Math.log(size) / Math.log(1024) );    ord = Math.min( Math.max(0,ord), units.length-1);    var s = Math.round((size / Math.pow(1024,ord))*100)/100;    return s + ' ' + units[ord];}

// This is equivalent to passing a callback as the// second argument (executed on success):$.get('assets/misc/1.json').done(function(r){    log(r.message);});// Requesting a file that does not exist. This will trigger// the failure response. To handle it, you would normally have to// use the full $.ajax method and pass it as a failure callback,// but with deferreds you can can simply use the fail method:$.get('assets/misc/non-existing.json').fail(function(r){    log('Oops! The second ajax request was "' + r.statusText + '" (error ' + r.status + ')!');});

// The trick is in the $.when() function:$.when($.get('assets/misc/1.json'), $.get('assets/misc/2.json')).then(function(r1, r2){    log(r1[0].message + " " + r2[0].message);});

$.get('http://jsonip.com/', function(r){ log(r.ip); });// For older browsers, which don't support CORS// $.getJSON('http://jsonip.com/?callback=?', function(r){ log(r.ip); });

<p class="content"></p> <p class="content"></p>var contentDivs = $('.content');// Fetch the contents of a text file:contentDivs.eq(0).load('1.txt');// Fetch the contents of a HTML file, and display a specific element:contentDivs.eq(1).load('1.html #header');

<form action="">First name: <input type="text" name="FirstName" value="Bill" /><br />Last name: <input type="text" name="LastName" value="Gates" /><br /></form>// Turn all form fields into a URL friendly key/value string.// This can be passed as argument of AJAX requests, or URLs.$(document).ready(function(){    console.log($("form").serialize()); // FirstName=Bill&LastName=Gates});// You can also encode your own objects with the $.param method:log($.param({'pet':'cat', 'name':'snowbell'}));

// The file input fieldvar fileInput = $('input[type=file]'),    button = $('#upload');button.on('click', function(){    // Access the files property, which holds     // an array with the selected files        var files = fileInput.prop('files');    // No file was chosen!    if(files.length == 0) {        alert('Please choose a file to upload!');        return false;    }        // Create a new FormData object        var fd = new FormData();        fd.append('file', files[0]);        // Upload the file to assets/php/upload.php. Open that file in a text     // editor to get a better idea of how it works.        $.ajax({        url: './assets/php/upload.php',        data: fd,        contentType:false,        // This will make the browser use the multipart/formdata encoding, which is required for transferring binary data.        processData:false,        // jQuery shouldn't do any processsing on the data - the browser will handle this when it sees we are passing a formdata object.        type:'POST',        success: function(m){            log(m);        }    });});

CODE// Fetch the publicly accessible data on Tutorialzine's Pagevar api = 'http://graph.facebook.com/Tutorialzine/?callback=?',    holder = $('#fbdata');$.getJSON(api, function(r){    // This will always give the current picture    holder.append('<img src="https://graph.facebook.com/Tutorialzine/picture/?type=large">');    holder.append('<p>'+ r.about +'</p>')    holder.append('<a href="'+%20r.website%20+'">'+%20r.website%20+'</a>');});

// Request weather data:var api = 'http://openweathermap.org/data/2.1/find/name?q=paris,france&callback=?';$.getJSON(api, function(r){    // This will always give the current picture    log(r.list[0].name + ', ' + r.list[0].sys.country);    log(r.list[0].main);    // Temperatures are in kelvin, subtract 273.15 to convert to Celsius,});

<div id="post"></div>// Define variablesvar blog = 'minimaldesks.tumblr.com',    api  = 'http://' + blog + '/api/read/json?callback=?',    post = $('#post');$.getJSON(api, function(r){    log('Blog title: ' + r.tumblelog.title);    log('Description: ' + r.tumblelog.description);    // If this post has a photo, show it    if(r.posts[0]['photo-url-250']){        post.append('<img src="'%20+%20r.posts[0]['photo-url-250']%20+%20'" />');    }    else{        log('Latest post: ' + r.posts[0]['regular-title']);    }});

// Define variablesvar ip = '119.75.218.70', // you can optionally put an ip address here    api  = 'http://freegeoip.net/json/' + ip + '?callback=?';$.getJSON(api, function(r){    console.log('How is the weather in ' + r.city + ', ' + r.country_name + '?');}); //How is the weather in Beijing, China?

CODE// Define variablesvar query = 'select * from data.html.cssselect where url="http://www.chucknorrisfacts.com/chuck-norris-top-50-facts" and css=".field-content a"';var yqlAPI = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + ' &format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=?';$.getJSON(yqlAPI, function(r){        log('Chuck Norris Facts:');        $.each(r.query.results.results.a, function(){        log('----------');        log(this.content);    });    });

CODE// Create an indicator that would be shown whenever an AJAX request occurs:var preloader = $('<div>',{ 'class':'preloader' }).appendTo('body');var doc = $(document);// Show the preloader whenever you are making an AJAX request:doc.ajaxStart(function(){    preloader.fadeIn();});// Hide it when the ajax request finishesdoc.ajaxComplete(function(){    // Keep it visible for 0.8 seconds after the request completes    preloader.delay(800).fadeOut();});// It will show automatically every time you do an AJAX request:$.get('assets/misc/1.json');

// The simple case. Use this instead of alert():console.log('This is a console message!');// It supports embedding of variables as well:var a = 'morning', b = 'Miss';console.log('Good %s %s! How are you feeling today?', a, b);// Interactively browse the properties of a method (similar to console.log):console.dir(window);// Information message (in webkit it looks like console.log)console.info('Everything is OK');// Warning messageconsole.warn('Something may be wrong');// Error message (will print a stack trace)console.error('Ooops. That was bad.');// Counting thingsfor(var i = 0; i<20; i++){    console.count('Counter Name');}// Starts a collapsable group of log messagesconsole.group("Preflight check");console.info('Fuel is OK');console.info('Temperature is normal');console.error('Wings are missing');console.groupEnd()// Timing thingsconsole.time('The million-dollar loop')var dollars = 0;for(var i=0;i<100000; i++){    dollars+=10;}console.timeEnd('The million-dollar loop');// Profiling code (it will show up in your console's Profile tab)console.profile('My app performance');var arr = [];$.each([0,1,2,3,4,5,6,7,8,9],function(){    arr.push(this+1);});console.profileEnd('My app performance');

    <input id="testInput" placeholder="YourName"/>     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>     <script>// Define the placeholder plugin$.fn.placeholder = function(){    if ('placeholder' in document.createElement('input')){        // This browser already supports placeholders.        // Nothing to do here.        return this;    }    this.each(function(){        var input = $(this);        input.on('focus', function(){            if(input.val() == input.attr('placeholder')){                input.val('');            }        }).on('blur', function(){            if(input.val() == ''){                input.val(input.attr('placeholder'));            }        });        // Show the placeholder on load        input.trigger('blur');    });    return this;};// And here is how to use it:$('#testInput').placeholder();

// Isolating a block of code:(function($){        // Declare a variable. It will only be visible in this block.    var c = 1;        // Define a simple plugin         $.fn.count = function(){                // Increment and log the counter        log(c++);                return this;    };    })(jQuery); // The c variable is only visible for the plugin and will keep // its value between invocations:$(document).count();$('body').count().count();

// Combine properties (useful in plugins).// The defaults are passed as the first argument.var supplied = { height: 400 };var options = $.extend({    color    : 'blue',    width    : 200,    height    : 150}, supplied);log('New options:', options);// You can also pass more than one objectlog('Three parents:', $.extend({a:2}, {b:3}, {c:4}) );log('-------');// Cloning objects.// To clone an object, simply pass an empty one// as the first argumentvar original = {a:123, b:'#fff'};var clone = $.extend({}, original);log('Clone:', clone);log('-------');// Extending jQuery.// You can define plugins with extend$.extend($.fn, {    plugin1: function(){        log('Plugin 1');        return this;    },    plugin2: function(){        log('Plugin 2');        return this;    }});$('body').plugin1().plugin2();log('-------');// If you pass only one arguments to $.extend,// it will add the properties to the jQuery object$.extend({ dontDoThis : 123});log($.dontDoThis);log('-------');// Deep cloning.// If you have nested objects, you will have to// pass one additional argument to extend:var obj1 = { a: 1, b: 2, c: {d: 3} };var obj2 = { c: {e: 4}, f:5};// This won't work// $.extend(obj1, obj2);// This will$.extend(true, obj1,obj2);log('Deep clone:', obj1);