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

POST TIME: 2014-10-29 19:08:53

目前jQuery的大多数用户更趋向于使用jQuery插件来解决面临的难题,这通常是明智的选择。但是当插件相对于你的需求有一定缺陷的时候,你也许更应该想办法自己来解决,下面来看看这些实用的jQuery技巧,他们肯定会能够派上用场的!


1.测试并提升你的jQuery选择器水平

这个jQuery选择器实验室非常酷,它能在线免费使用,当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段,然后你能尝试预定义使用各种jQuery选择器。如果这还不够你也可以自定义选择器。

2.测试jQuery包装集是否包含某些元素  

如果你想测试一下某个jQuery包装集中是否包含某些元素,你首先可以尝试使用验证首个元素是否存在:

  1. if($(selector)[0]){...}  
  2. // 或者这样  
  3. if($(selector).length){...}  

来看看这个例子:

  1. //例子.如果你的页面有以下html代码  
  2. <ul id="shopping_cart_items"> 
  3.   <li><input class="in_stock" name="item" type="radio" value="Item-X" />Item X</li> 
  4.   <li><input class="unknown" name="item" type="radio" value="Item-Y" />Item Y</li> 
  5.   <li><input class="in_stock" name="item" type="radio" value="Item-Z" />Item Z</li> 
  6. </ul> 
  7. <pre escaped="true" lang="javascript">...  
  8. //这个if条件将返回true,因为我们有两个  
  9. // input域匹配了选择器,所以<statement>代码将会执行  
  10. if($('#shopping_cart_items input.in_stock')[0]){<statement>}  

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

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

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

你可以使用这个方法来调用最近版本的jQuery框架,当然,你还可以使用下面这个代码从ajax.googleapis.com调用同样的最新版本jQuery:

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" 
  2. type="text/javascript"></script>  

4.存储数据

使用data方法可以避免在DOM中存储数据,有些前端开发er喜欢使用HTML的属性来存储数据:

  1. $('selector').attr('alt', 'data being stored');  
  2. //之后可以这样读取数据:  
  3. $('selector').attr('alt');  

使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的,我们可以使用jQuery的data方法来为页面中的某个元素存储数据:

  1. $('selector').data('参数名', '要存储的数据');  
  2. //之后这样取得数据:  
  3. $('selector').data('参数');  

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

  1.  <form id="testform"> 
  2.  <input type="text" class="clear" value="Always cleared" /> 
  3.  <input type="text" class="clear once" value="Cleared only once" /> 
  4.  <input type="text" value="Normal text" /> 
  5. </form>  

JavaSript部分:

  1. $(function() {  
  2.  //取出有clear类的input域  
  3.  //(注: "clear once" 是两个class clear 和 once)  
  4.  $('#testform input.clear').each(function(){  
  5.    //使用data方法存储数据  
  6.    $(this).data( "txt", $.trim($(this).val()) );  
  7.  }).focus(function(){  
  8.    // 获得焦点时判断域内的值是否和默认值相同,如果相同则清空  
  9.    if ( $.trim($(this).val()) === $(this).data("txt") ) {  
  10.      $(this).val("");  
  11.    }  
  12.  }).blur(function(){  
  13.    // 为有class clear的域添加blur时间来恢复默认值  
  14.    // 但如果class是once则忽略  
  15.    if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {  
  16.      //Restore saved data  
  17.      $(this).val( $(this).data("txt") );  
  18.    }  
  19.  });  
  20. });  


5.jQuery手册常备身边  

大多数人都很难记住所有的编程细节,即使再好的程序员也会有对某个程序语言的疏忽大意,所以把相关的手册打印出来或随时放在桌面上进行查阅绝对是可以提高编程效率的。

6.在FireBug控制台记录jQuery  

FireBug是我最喜欢用的一个浏览器扩展工具之一,这个工具可以让你快速的在可视化界面中了解当前页面的HTML+CSS+JavaScript,并在该工具下完成即时开发。作为jQuery或JavaScript开发人员,FireFox对于记录你的JavaScript代码也得到支持。写入FireBug控制台的最简单方式如下:

  1. console.log("hello world") 
  2.  

你也可以按照你希望的方式写一些参数:

  1. console.log(2,4,6,8,"foo",bar)
  2.   

你也可以编写一个小扩展来记录jQuery对象到控制台:
 

  1. jQuery.fn.log = function (msg) {  
  2.    console.log("%s: %o", msg, this);  
  3.    return this;  
  4. ;  

对于这个扩展,你可以直接使用.log()方法来记录当前对象到控制台。

  1. $('#some_div').find('li.source > input:checkbox')  
  2.    .log("sources to uncheck")  
  3.    .removeAttr("checked");  

7.尽可能使用ID选择器  

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

  1.  <div id="main"> 
  2. <form method="post" action="/"> 
  3.   <h2>Selectors in jQuery</h2> 
  4.   ...  
  5.   ...  
  6.   <input class="button" id="main_button" type="submit" value="Submit" /> 
  7. </form> 
  8. </div>   
  9.  
  10.  //使用class来调用submit按钮要比使用绝对的ID选择器慢很多  
  11. var main_button = $('#main .button');  
  12. var main_button = $('#main_button');  

8.善于利用jQuery链

jQuery链不但允许以简洁的方式写出强大的操作,而且提高了开发效率,因为它能够把多个命令应用到包装集,而不必重新计算包装集。从而你不用再这样写了:

  1. <li>Description: <input type="text" name="description" value="" /></li>   
  2. $('#shopping_cart_items input.text').css('border', '3px dashed yellow');  
  3. $('#shopping_cart_items input.text').css('background-color', 'red');  
  4. $('#shopping_cart_items input.text').val("text updated");  

取而代之你可以使用jQuery链来完成简便的操作:

  1. var input_text = $('#shopping_cart_items input.text');  
  2. input_text.css('border', '3px dashed yellow');  
  3. input_text.css('background-color', 'red');  
  4. input_text.val("text updated");  
  5.    
  6. //same with chaining:  
  7. var input_text = $('#shopping_cart_items input.text');  
  8. input_text  
  9.  .css('border', '3px dashed yellow')  
  10.  .css('background-color', 'red')  
  11.  .val("text updated");  

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

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

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


2 条记录 1/2 页 下一页 12

文章转载请注明出处:https://ynxy999.com/Article/view/id/1775.shtml

掌握企业微信营销命脉的几大关键问题钻石:美丽背后的血与泪

告诉我们您的需求

 我们将在一个工作日之内回复您
昆明地址:新闻路429号文化空间25层1055711410
安宁地址:安宁市县街镇麒麟路17号云南经济管理学院图书馆406室、305室ynxy999_com
免费热线:15287195860
售前热线:0871-68034467-999

Copyright 2011-2019,All Rights Reserved ynxy999.com co.ltd.云南炫烨科技有限公司 Powered by ynxy999.com 滇公网安备 53010202000225号  滇ICP备15002943号  [技术支持昆明锦华科技]