',{ "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');
8.使用jQuery我们可以判断一个链接是否是外部的，并来添加一个icon在非外部链接中，且确定打开方式。
这里用到了hostname属性。
The previous tip The next tip Google // Loop through all the links $('#links a').each(function(){ if(this.hostname != location.hostname){ // The link is external $(this).append('') .attr('target','_blank'); } });
9.jQuery中的end()方法可以使你的jQuery链更加高效。
No No No // 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) });
10.也许你希望你的web 应用感觉更像原生的，那么你可以阻止contextmenu默认事件。
11.一些站点可能会使你的网页在一个bar下面，即我们所看到在下面的网页是iframe标签中的，我们可以这样解决。
// 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.有时候我们不希望网页的某一部分内容被选择比如复制粘贴这种事情，我们可以这么做：
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.
这样，内容就不能被选择啦。
14.从cdn中引入jQuery，这样的方法可以提高我们网站的性能，并且引入***的版本也是一个不错的主意。
下面会介绍四种不同的方法。
15.保证最小的DOM操作。
我们知道js操作DOM是非常浪费资源的，我们可以看看下面的例子。
CODE // Bad //var elem = $('#elem'); //for(var i = 0; i < 100; i++){ // elem.append('element '+i+''); //} // Good var elem = $('#elem'), arr = []; for(var i = 0; i < 100; i++){ arr.push('
element '+i+''); } 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 = $('',{ 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。
// 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.对于重复的函数只定义一次
如果你追求代码的更高性能，那么当你设置事件监听程序时必须小心，只定义一次函数然后把它的名字作为事件处理程序传递是不错的方法。
$(document).ready(function(){ function showMenu(){ alert('Showing menu!'); // Doing something complex here } $('#menuButton').click(showMenu); $('#menuLink').click(showMenu); });21.像对待数组一样地对待jQuery对象
由于jQuery对象有index值和长度，所以这意味着我们可以把对象当作普通的数组对待。这样也会有更好地性能。
var arr = $('li'), iterations = 100000; timer('Native Loop'); for(var z=0;z22.当做复杂的修改时要分离元素。
修改一个dom元素要求网页重绘，这个代价是高昂的，所以如果你想要再提高性能，就可以尝试着当对一个元素进行大量修改时先从页面中分离这个元素，修改完之后再添加到页面。
// Modifying in place var 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 first timer('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');23.不要一直等待load事件。
我们已经习惯了把我们所有的代码都放在ready的事件处理程序中，但是，如果你的html页面很庞大，decument ready恐怕会被延迟了，所以对于一些我们不希望ready后才可以触发的事件可以放在html的head元素中。
24.当使用js给多个元素添加样式时更好的做法是创建一个style元素。
我们之前提到过，操作dom是非常慢的，所以当添加多个元素的样式时创建一个style元素并添加到document中是更好的做法。
Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item var style = $('
