1.当document文档就绪时执行JavaScript代码。
我们为什么使用jQuery库呢？原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行。
<script src="https://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="https://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> <li><a href="https://www.jb51.net/007.html">The previous tip</a></li> <li><a href="https://www.jb51.net/article/009.html">The next tip</a></li> <li><a href="https://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="https://www.jb51.net/assets/img/external.png" />') .attr('target','_blank'); } });
9.jQuery中的end()方法可以使你的jQuery链更加高效。
<ul> <li> <ul> <li>No</li> <li>No</li> <li>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标签中的，我们可以这样解决。