// 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.'); }
12.你的内联样式表并不是被设置为不可改变的，如下：
// Make the stylesheet visible and editable $('#regular-style-block').css({'display':'block', 'white-space':'pre'}) .attr('contentEditable',true);
这样即可改变内联样式了。
13.有时候我们不希望网页的某一部分内容被选择比如复制粘贴这种事情，我们可以这么做：
<p>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>
这样，内容就不能被选择啦。
14.从CDN中引入jQuery，这样的方法可以提高我们网站的性能，并且引入最新的版本也是一个不错的主意。
下面会介绍四种不同的方法。
<!-- 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="https://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="https://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> -->
15.保证最小的DOM操作。
我们知道js操作DOM是非常浪费资源的，我们可以看看下面的例子。
CODE // Bad //var elem = $('#elem'); //for(var i = 0; i < 100; i++){ // elem.append('<li>element '+i+'</li>'); //} // Good var elem = $('#elem'), arr = []; for(var i = 0; i < 100; i++){ arr.push('<li>element '+i+'</li>'); } elem.append(arr.join(''));
16.更方便的分解URL。
也许你会使用正则表达式来解析URL，但这绝对不是一种好的方法，我们可以借用a标签来实现它。
// 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'));
17.不要害怕使用vanilla.js。
jQuery背负的太多，这便是原因，你可以用一般的js。
// 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); });
18.最优化你的选择器
// 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')
19.缓存你的selector。
// 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();
20.对于重复的函数只定义一次
如果你追求代码的更高性能，那么当你设置事件监听程序时必须小心，只定义一次函数然后把它的名字作为事件处理程序传递是不错的方法。