1.當document文檔就緒時執行JavaScript代碼。
我們為什麼使用jQuery庫呢？原因之一就在於我們可以使jQuery代碼在各種不同的浏覽器和存在bug的浏覽器上完美運行。
<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>
2.使用route。
<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>
3.使用JavaScript中的AND技巧。
使用&&操作符的特點是如果操作符左邊的表達式是false，那麼它就不會再判斷操作符右邊的表達式了。所以：
// Instead of writing this:
if($('#elem').length){
// do something
}
// You can write this:
$('#elem').length && log("doing something");
4. is()方法比你想象的更為強大。
下面舉幾個例子，我們先寫一個id為elem的div。js代碼如下：
// 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!");
// Animating
elem.animate({'width':200},1);
// is it animated?
elem.is(':animated') && log("it is animated!");
其中判斷是否為動畫我覺得非常不錯。
5.判斷你的網頁一共有多少元素。
通過使用$("*").length（）;方法可以判斷網頁的元素數量。
// How many elements does your page have?
log('This page has ' + $('*').length + ' elements!');
6.使用length()屬性很笨重，下面我們使用exist()方法。
/ Old way
log($('#elem').length == 1 ? "exists!" : "doesn't exist!");
// Trickshot:
jQuery.fn.exists = function(){ return this.length > 0; }
log($('#elem').exists() ? "exists!" : "doesn't exist!");
7.jQuery方法$()實際上是擁有兩個參數的，你知道第二個參數的作用嗎？
// 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 called
var 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');
8.使用jQuery我們可以判斷一個鏈接是否是外部的，並來添加一個icon在非外部鏈接中，且確定打開方式。
這裡用到了hostname屬性。
<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');
}
});
9.jQuery中的end()方法可以使你的jQuery鏈更加高效。
<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)
});
10.也許你希望你的web 應用感覺更像原生的，那麼你可以阻止contextmenu默認事件。
<script>
// Prevent right clicking on this page
$(function(){
$(document).on("contextmenu",function(e){
e.preventDefault();
});
});
</script>
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.有時候我們不希望網頁的某一部分內容被選擇比如復制粘貼這種事情，我們可以這麼做：
<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>
這樣，內容就不能被選擇啦。
14.從CDN中引入jQuery，這樣的方法可以提高我們網站的性能，並且引入最新的版本也是一個不錯的主意。
下面會介紹四種不同的方法。
<!-- 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> -->
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.對於重復的函數只定義一次
如果你追求代碼的更高性能，那麼當你設置事件監聽程序時必須小心，只定義一次函數然後把它的名字作為事件處理程序傳遞是不錯的方法。
$(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;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');
未完待續...
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！