jQuery技巧来提高你的代码质量

2019独角兽企业重金招聘Python工程师标准>>>

3.从jquery.org读取jQuery最新版本

你可以使用这句代码读取jQuery的最新版本的代码文件。

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    
4.存储数据
    
    这个data方法能让你自己明明数据的参数，更语义更灵活，你可以在页面上的任何元素存储数据信息。这个方法的经典应用是给input域一个默认值，然后在聚焦的时候清空它:

     <form id="testform"> 
     <input type="text" class="clear" value="Always cleared" /> 
     <input type="text" class="clear once" value="Cleared only once" /> 
     <input type="text" value="Normal text" /> 
    </form>

    
    JavaSript部分:

    $(function() {  
     //取出有clear类的input域  
     //(注: "clear once" 是两个class clear 和 once)  
     $('#testform input.clear').each(function(){  
       //使用data方法存储数据  
       $(this).data( "txt", $.trim($(this).val()) );  
     }).focus(function(){  
       // 获得焦点时判断域内的值是否和默认值相同，如果相同则清空  
       if ( $.trim($(this).val()) === $(this).data("txt") ) {  
         $(this).val("");  
       }  
     }).blur(function(){  
       // 为有class clear的域添加blur时间来恢复默认值  
       // 但如果class是once则忽略  
       if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {  
         //Restore saved data  
         $(this).val( $(this).data("txt") );  
       }  
     });  
    });

    
7.尽可能使用ID选择器　　

在使用jQuery之后，你会发现利用class属性来选择DOM元素变得相当简单。
尽管如此，还是推荐大家尽量少用class选择器取而代之尽量多使用运行更快的ID选择器。(IE浏览器下使用class选择器会在遍历整个DOM树之后返回相符的class包装集)。
而ID选择器更快是因为DOM本身就有”天然的”getElementById这个方法，而class并没有。
所以如果使用class选择器的话，浏览器会遍历整个DOM，如果你的网页DOM结构足够复杂，这些class选择器足矣把页面拖得越来越慢。

看看这段简单的HTML代码:

    <div id="main"> 
    <form method="post" action="/"> 
      <h2>Selectors in jQuery</h2> 
      ...  
      ...  
      <input class="button" id="main_button" type="submit" value="Submit" /> 
    </form> 
    </div>   
     
    //使用class来调用submit按钮要比使用ID选择器慢得多  
    var main_button = $('#main .button');  
    var main_button = $('#main_button');

    
9.绑定jQuery函数到$(window).load事件

大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件。虽然$(document).ready事件在大多数情况下都OK，但是它的解析顺序是在文档准备就绪，单文档中的图片等对象正在下载的时候开始运行的。所以在某些时候使用$(document).ready事件并不一定能达到我们预期的效果，比如一些视觉效果和动画、拖拽、预读取隐藏图片等…通过使用$(window).load事件可以安全的在整个文档都准备就绪之后再开始运行你期望的代码。

     $(window).load(function(){  
     // 将你希望在页面完全就绪之后运行的代码放在这里  
    });

    
10.使用jQuery链来限定选择器，让你的代码更简洁更优雅　　

由于JavaScript支持链结构而且支持断行，所以你的代码可以写成下面这样，这个例子先在元素上移除一个class然后在同一个元素上添加另一个class：

    $('#shopping_cart_items input.in_stock')  
       .removeClass('in_stock')  
       .addClass('3-5_days');

转载于:https://my.oschina.net/ajian2014/blog/309883