jQuery中的100个技巧汇总

<script src="http://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="http://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="http://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="http://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');