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!");// Animatingelem.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 waylog($('#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 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');

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://plex 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');

未完待续...

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！